Bootstrap Grid Small

Bootstrap Grid - Small Devices (and up)

Bootstrap Grid Example: Targeting Small Devices

Let’s create a simple two-column layout. We want the columns to be split 25%/75% (or 3/12 and 9/12) starting from small devices and maintaining this ratio on larger screens unless specified otherwise.

Tip: In Bootstrap 5, ‘small’ devices (sm) are defined as having a screen width of 576 pixels and up. Layouts for extra small devices (<576px) are handled by .col-* (without a breakpoint infix) or by default stacking behavior.

For small devices and larger, we will use the .col-sm-* classes. Bootstrap’s grid system is based on 12 columns.

To achieve a 25%/75% split, we’ll use .col-sm-3 (3 out of 12 columns) and .col-sm-9 (9 out of 12 columns):

<div class="container">
  <div class="row">
    <div class="col-sm-3">....</div>
    <div class="col-sm-9">....</div>
  </div>
</div>

Bootstrap interprets this as: ‘Starting from the small (sm) breakpoint and up, apply these column widths. On screens smaller than ‘sm’ (extra-small), these columns will stack vertically by default.’

Here’s a full example demonstrating a 25%/75% split on small devices and up. The columns will stack on extra-small screens:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Small Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Optional: for better visualization */
    .row > div { padding-top: .75rem; padding-bottom: .75rem; }
    .col-sm-3 { background-color: #e9ecef; border: 1px solid #ced4da; }
    .col-sm-9 { background-color: #f8f9fa; border: 1px solid #ced4da; }
  </style>
</head>
<body>
  <div class="container-fluid mt-3">
    <h1>Responsive Columns</h1>
    <div class="row">
      <div class="col-sm-3">
        <p>This is the 25% column (col-sm-3).</p>
        <p>It takes up 3 out of 12 available units on small screens and wider.</p>
      </div>
      <div class="col-sm-9">
        <p>This is the 75% column (col-sm-9).</p>
        <p>It takes up 9 out of 12 available units on small screens and wider. On extra-small screens, this column will stack below the first one.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Note: The sum of column units within a .row for a specific breakpoint should ideally not exceed 12. If it does, columns will wrap to the next line. You can also use the .col-sm class without a number to have columns automatically size themselves equally within a row for the ‘sm’ breakpoint and up.

Application Scenario: A blog layout where the main content area (e.g., .col-sm-8) takes up most of the width, and a sidebar (e.g., .col-sm-4) contains links or ads. On mobile, the sidebar would stack below the main content for better readability.

The next chapter explores how to define different column splits for various device sizes (e.g., small, medium, large).