Bootstrap Grid Large

Bootstrap Grid - Large Devices and Beyond

Bootstrap Grid Example: Adapting to Large Devices

Bootstrap’s grid system is designed to be mobile-first and scales up to larger screen sizes. You can define different column layouts for various breakpoints (e.g., small, medium, large, extra-large).

Let’s say you have a layout that’s 25%/75% on small devices (.col-sm-*) and 50%/50% on medium devices (.col-md-*):

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

For large devices, you might prefer a 33%/66% split. Bootstrap’s large breakpoint (lg) starts at screen widths of 992 pixels and up by default. Bootstrap 5 also includes extra-large (xl >= 1200px) and extra-extra-large (xxl >= 1400px) breakpoints.

To add a specific layout for large devices, you use the .col-lg-* classes. Let’s adjust our example to a 4/12 (33%) and 8/12 (66%) split for large screens:

<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">....</div>
  <div class="col-sm-9 col-md-6 col-lg-8">....</div>
</div>

Bootstrap applies the largest active breakpoint. So, on a large screen, it uses .col-lg-*. On a medium screen, it falls back to .col-md-*, and on a small screen, to .col-sm-*. If no sm, md, lg, etc. class is specified, columns stack vertically by default on extra-small screens unless a base col-* class is used.

Here’s a full example demonstrating this behavior:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Added for visual clarity */
    .demo-col { padding: 15px; margin-bottom: 15px; }
  </style>
</head>
<body>
  <div class="container-fluid mt-3">
   <h1>Responsive Columns</h1>
   <p>Resize your browser window to see the column widths change based on screen size.</p>
   <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 demo-col" style="background-color:#e9ecef;">
     <p>This column is `col-sm-3`, `col-md-6`, `col-lg-4`.</p>
     <p>Content for the first column. Try resizing!</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 demo-col" style="background-color:#f8f9fa;">
     <p>This column is `col-sm-9`, `col-md-6`, `col-lg-8`.</p>
     <p>Content for the second column. This will adapt differently based on the screen width, demonstrating the power of Bootstrap's responsive grid.</p>
    </div>
   </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

| | Important Grid Concepts:

• Rows (.row): Act as wrappers for columns. They use negative margins to counteract the padding on columns if gutters are used.
• Columns (.col-*-*): Define the width of content areas. The sum of column numbers in a row should ideally be 12 for that row.
• Gutters: Spacing between columns. Bootstrap 5 uses gx-* (horizontal), gy-* (vertical), and g-* (both) utility classes on the .row to control gutter widths. For example, g-3 adds a standard gutter.
• Breakpoints: Bootstrap has predefined breakpoints (xs, sm, md, lg, xl, xxl). You can specify column behavior for each. | | --- | --- |

Remember to always place columns within a .row or an element with display: flex. This ensures proper alignment and spacing.