Bootstrap 12-Column Grid: Containers, Rows & Cols

The 12-Column Grid System

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content:

<div class="container">
    <div class="row g-4">
        <!-- Takes 12 cols on mobile, 6 cols on tablet, 4 cols on desktop -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="p-4 bg-light rounded shadow-sm">Column 1</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="p-4 bg-light rounded shadow-sm">Column 2</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="p-4 bg-light rounded shadow-sm">Column 3</div>
        </div>
    </div>
</div>