Grid System in Bootstrap
From the Bootstrap 5 cheat sheet · Layout & Grid · verified Jul 2026
Grid System
12-column responsive grid layout
html
<!-- Basic Grid -->
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
<!-- Responsive Columns -->
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Responsive</div>
<div class="col-12 col-md-6 col-lg-4">Columns</div>
<div class="col-12 col-md-12 col-lg-4">Example</div>
</div>💡 Bootstrap uses a 12-column grid system
⚡ Use container for fixed-width, container-fluid for full-width
📌 Columns automatically wrap to new line when exceeding 12
🔥 Responsive classes stack vertically on smaller screens