Bootstrap Grid System
5 min read Quiz at the end
Build responsive layouts with containers, rows, col classes, gutters (g-*), and offsets.
Grid System
<!-- 12-column fluid grid -->
<div class="container"> <!-- fixed max-width -->
<div class="container-fluid"> <!-- full width -->
<div class="container-xl"> <!-- max-width at xl+ -->
<div class="row">
<div class="col">Auto width</div>
<div class="col-6">Half</div>
<div class="col-4">One third</div>
</div>
<!-- Responsive breakpoints: xs sm md lg xl xxl -->
<div class="col-12 col-md-6 col-lg-4">
Full on mobile, half on tablet, third on desktop
</div>
<!-- Gutters -->
<div class="row g-3"> <!-- gap: 1rem -->
<div class="row gx-4 gy-2"> <!-- horizontal/vertical -->
<!-- Offset -->
<div class="col-4 offset-4">Centered</div>
<!-- Order -->
<div class="col order-last">Shows last</div>
<div class="col order-first">Shows first</div>
Topic Quiz · 3 questions
Test your understanding before moving on
1. What is the purpose of the row class?
💡 row applies display:flex and negative margins to contain columns.
2. What does col-md-6 mean?
💡 col-md-6 is 50% width at md breakpoint and above; stacks full on smaller.
3. Which container class spans the full width?
💡 container-fluid is always 100% width of the viewport.