Layout

Grid System

Master Bootstrap's 12-column responsive grid system to create flexible layouts for any screen size.

How the Grid Works

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Breakpoints

BreakpointPrefixScreen width
Extra small(none)< 576px
Smallsm≥ 576px
Mediummd≥ 768px
Largelg≥ 992px
Extra largexl≥ 1200px
XXLxxl≥ 1400px

Grid Classes

  • col-* — spans all sizes
  • col-sm-* — small and up
  • col-md-* — medium and up

12 columns total. Mix breakpoints for responsive layouts.

Example

html
<!-- Basic grid -->
<div class="container">
  <div class="row">
    <div class="col-md-4">Left sidebar</div>
    <div class="col-md-8">Main content</div>
  </div>
</div>

<!-- Responsive: full width on mobile, split on desktop -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Card 1</div>
    <div class="col-12 col-md-6 col-lg-4">Card 2</div>
    <div class="col-12 col-md-12 col-lg-4">Card 3</div>
  </div>
</div>

<!-- Auto-width columns -->
<div class="row">
  <div class="col">Equal</div>
  <div class="col">Equal</div>
  <div class="col">Equal</div>
</div>

<!-- Gutters (spacing between columns) -->
<div class="row g-3">
  <div class="col-md-6"><div class="p-3 bg-light">Col 1</div></div>
  <div class="col-md-6"><div class="p-3 bg-light">Col 2</div></div>
</div>

<!-- Offset columns -->
<div class="row">
  <div class="col-md-4 offset-md-4">Centered column</div>
</div>

<!-- Ordering -->
<div class="row">
  <div class="col order-3">First in HTML, last on screen</div>
  <div class="col order-1">Last in HTML, first on screen</div>
</div>
Try it yourself — HTML