• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid Small

← Previous Next →

What is Bootstrap 4 Grid Small?

The Bootstrap 4 Grid Small layout refers to grids designed for small devices, typically screens 576px and larger. Small grids allow content to be displayed side by side while maintaining readability and responsiveness. Understanding small grids is essential for creating adaptive layouts that look good on tablets and larger mobile devices.

Bootstrap 4 uses a mobile-first approach, meaning small grid classes override extra-small behavior to provide a more flexible layout for slightly larger screens.

Small Device Classes

For small devices, Bootstrap 4 provides the .col-sm- classes. Columns using these classes adjust automatically based on the row’s 12-column system.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-sm-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-sm-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • On screens ≥576px, columns display horizontally.

  • On smaller screens, columns stack vertically automatically.

  • Padding .p-3 and margin .mb-2 ensure clean spacing.

Combining Small with Other Breakpoints

Small grids can be combined with extra-small and larger breakpoints to create fully responsive layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-sm-6 col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-sm-6 col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • .col-12 stacks columns on extra-small devices.

  • .col-sm-6 displays two columns per row on small devices.

  • .col-md-4 shows three columns per row on medium devices and above.

Nesting Columns in Small Grids

You can nest columns in small grids for more complex layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-8 bg-primary text-white p-3">
      Main Column
      <div class="row mt-2">
        <div class="col-sm-6 bg-warning p-2">Nested 1</div>
        <div class="col-sm-6 bg-danger p-2">Nested 2</div>
      </div>
    </div>
    <div class="col-sm-4 bg-success text-white p-3">Sidebar</div>
  </div>
</div>

  • The main column spans two-thirds, sidebar one-third.

  • Nested columns divide the main column into halves, maintaining responsiveness on small devices.

Offsets in Small Grids

Offsets can move columns to the right, creating gaps or centering content.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-6 offset-sm-3 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • .offset-sm-3 moves the column three units to the right on small devices.

  • .col-sm-6 occupies half the row width.

Stacked and Horizontal Layouts on Small Devices

Columns in small grids can be stacked or displayed horizontally using responsive classes:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-sm-6 col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-sm-6 col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • Extra-small screens: columns stack vertically.

  • Small screens: two columns per row.

  • Medium and above: three columns per row.

This ensures content is flexible, readable, and visually appealing.

Flexbox Alignment in Small Grids

Bootstrap 4 uses Flexbox utilities to control column alignment:

  • .justify-content-center → horizontal centering

  • .align-items-center → vertical centering

Example:

<div class="container" style="height:200px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-sm-6 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • The column is centered horizontally and vertically on small devices and larger.

  • Flexbox eliminates the need for extra CSS.

Best Practices for Small Grids

  1. Use .col-sm- classes to optimize layouts for small screens.

  2. Combine with .col- for extra-small devices to maintain mobile-first responsiveness.

  3. Nest columns to create complex layouts within a small grid.

  4. Use offsets to center content or create visual gaps.

  5. Test layouts on real tablets or emulators for accuracy.

  6. Apply padding and margin utilities consistently for spacing.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Grid Small system, focusing on layouts for screens ≥576px. You learned how to use .col-sm- classes, combine them with other breakpoints, nest columns, apply offsets, and use Flexbox utilities for alignment. Mastering small grids ensures your website is tablet-friendly, responsive, and visually consistent, providing a better experience for users on slightly larger mobile devices.

Practice Questions

  1. Create a row with three columns using .col-sm-4 so they appear side by side on small devices.

  2. Make a two-column layout that stacks on extra-small devices but displays side by side on small screens using .col-12 col-sm-6.

  3. Nest two smaller columns inside a larger column for small devices using .col-sm-8 for the parent and .col-sm-6 for nested columns.

  4. Center a column in a row using .col-sm-6 offset-sm-3 on small devices.

  5. Create a row with four columns stacked on extra-small devices but two per row on small devices using .col-12 col-sm-6.

  6. Combine small and medium breakpoints to show two columns per row on small devices and three per row on medium devices.

  7. Use Flexbox utilities .justify-content-center and .align-items-center to center a column horizontally and vertically on small screens.

  8. Apply background colors to each column to visually verify alignment and spacing.

  9. Build a row where three columns stack on extra-small devices but display horizontally on small screens using .col-12 col-sm-4.

  10. Add padding .p-3 and margin .mb-2 to all columns to maintain consistent spacing on small devices.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top