Prev Next

BS5 Grid Basic

The Bootstrap grid system is built on a 12-column layout. Understanding rows, columns, and breakpoints allows you to create fully responsive designs with minimal effort.

Key Topics

Basic Structure

All Bootstrap grids start with a .row container inside a .container (or .container-fluid). Columns use .col-* classes to specify their width.

<div class="container">
    <div class="row">
        <div class="col-6 bg-warning">Column 1</div>
        <div class="col-6 bg-info">Column 2</div>
    </div>
</div>

Explanation: Here, each column is 6 units wide out of 12, creating two equal columns. The bg-warning and bg-info classes are Bootstrap color utilities for quick visualization.

Responsive Columns

Use different breakpoint classes (e.g., col-sm-4, col-md-6) to change column widths at various screen sizes.

<div class="row">
    <div class="col-sm-4 col-md-3">A</div>
    <div class="col-sm-8 col-md-9">B</div>
</div>

Explanation: On small screens (sm), A is 4 columns wide and B is 8. On medium screens (md) and above, A becomes 3 columns, while B is 9.

Key Takeaways

  • The grid uses 12 columns and must be placed within a .row container.
  • .col-* classes define column widths per breakpoint.
  • Combine fluid containers and responsive column classes for flexible layouts.
Prev Next