Bootstrap grid is a responsive layout system that divides screens into rows and columns, creating flexible, mobile-first designs. It uses a series of containers, rows, and columns to structure content.
The Bootstrap grid consists of three key components:
Each row contains 12 equal-width columns by default. These columns create gutters (spacing between columns) through padding. When viewed on different devices, columns stack to fill the entire width of the screen.
For example, a row with two columns of six each will display side-by-side on desktop but stack vertically on mobile devices.
Bootstrap grid uses media queries to adjust layouts at specific breakpoints:
| Breakpoint | Class Prefix | Screen Width |
|---|---|---|
| Extra Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra Large | xl | ≥1200px |
| Extra Extra Large | xxl | ≥1400px |
Many developers confuse Bootstrap grid with CSS Grid. While both create grid layouts, Bootstrap grid is specifically designed for responsive behavior and includes predefined classes for quick implementation.
Another mistake is assuming Bootstrap grid replaces CSS Grid entirely. In reality, they can complement each other, with Bootstrap handling responsive layouts and CSS Grid managing more complex design elements.
Here's a simple Bootstrap grid layout with two columns on desktop and one column on mobile:
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Left column content -->
</div>
<div class="col-md-6">
<!-- Right column content -->
</div>
</div>
</div>On screens smaller than 768px, both columns will stack vertically, each taking the full width of the container.
Bootstrap grid is ideal for quickly creating responsive layouts without writing custom CSS. It's particularly useful for:
However, for complex, non-responsive layouts or highly customized designs, CSS Grid may be more appropriate.