Skip to content
Bootstrap

Grid System

Lay out pages with the 12-column responsive grid.

By EZ4Code Team
gridlayout

Code

<div class="container">
  <div class="row">
    <div class="col-md-4">Sidebar</div>
    <div class="col-md-8">Main content</div>
  </div>

  <div class="row">
    <div class="col-6 col-sm-4 col-lg-2">A</div>
    <div class="col-6 col-sm-4 col-lg-2">B</div>
    <div class="col-6 col-sm-4 col-lg-2">C</div>
    <div class="col-6 col-sm-4 col-lg-2">D</div>
  </div>

  <div class="row">
    <div class="col">Auto</div>
    <div class="col">Auto</div>
    <div class="col w-50">Forced width</div>
  </div>
</div>

Explanation

Bootstrap's grid uses a 12-column system inside .container > .row > .col. Breakpoint suffixes (sm, md, lg, xl) change column width at each tier, and equal-width .col classes share space automatically. Columns wrap when their total exceeds 12.

More Bootstrap Snippets

Responsive Utilities

Show, hide, and reorder elements per breakpoint.

Navbar

Build a responsive collapsing navbar with brand and links.

Cards

Compose a card with image, body, list, and footer.

Modal

Trigger and structure a Bootstrap modal dialog.

Forms & Validation

Build a responsive form with validation feedback.

Buttons

Use button variants, sizes, states, and groups.