Bootstrap Grid Examples

Below are some Bootstrap Grid Examples—from simple to advanced—to help you understand how the grid works.

✅ Example 1: Basic Three-Column Layout

<div class="container">
<div class="row">
<div class="col-md-4 bg-primary text-white p-3">Column 1</div>
<div class="col-md-4 bg-success text-white p-3">Column 2</div>
<div class="col-md-4 bg-danger text-white p-3">Column 3</div>
</div>
</div>

<div class="col-md-4 bg-primary text-white p-3">Column 1</div>

<div class="col-md-4 bg-success text-white p-3">Column 2</div>

<div class="col-md-4 bg-danger text-white p-3">Column 3</div>

</div>

✔ On small screens → stacked
✔ On medium+ screens → 3 columns

✅ Example 2: Responsive Layout with Different Breakpoints

<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 bg-info p-3">Item 1</div>
<div class="col-12 col-sm-6 col-lg-3 bg-warning p-3">Item 2</div>
<div class="col-12 col-sm-6 col-lg-3 bg-secondary p-3">Item 3</div>
<div class="col-12 col-sm-6 col-lg-3 bg-dark text-white p-3">Item 4</div>
</div>
</div>

</div>

Screen Size	Layout
Mobile	Stacked
Tablet	2 Columns
Desktop	4 Columns

✅ Example 3: Mixed Width Layout

✔ Common in blog layouts.

✅ Example 4: Nested Grid

<div class="container">
<div class="row">
<div class="col-md-8 bg-warning p-3">
Parent Column
<div class="row mt-2">
<div class="col-md-6 bg-light p-2">Nested 1</div>
<div class="col-md-6 bg-dark text-white p-2">Nested 2</div>
</div>
</div>
</div>
</div>

Parent Column

<div class="col-md-6 bg-light p-2">Nested 1</div>

<div class="col-md-6 bg-dark text-white p-2">Nested 2</div>

</div>

✔ You can place rows inside columns.

✅ Example 5: Offset Columns

✔ Offsets help position elements without blank columns.

✅ Example 6: Auto Layout Columns

✔ Columns automatically divide equally.

✅ Example 7: Column Ordering

<div class="container">
<div class="row">
<div class="col-md-4 order-3 bg-secondary p-3">Third</div>
<div class="col-md-4 order-1 bg-primary text-white p-3">First</div>
<div class="col-md-4 order-2 bg-success text-white p-3">Second</div>
</div>
</div>

<div class="col-md-4 order-3 bg-secondary p-3">Third</div>

<div class="col-md-4 order-1 bg-primary text-white p-3">First</div>

<div class="col-md-4 order-2 bg-success text-white p-3">Second</div>

</div>

✔ Useful to reorder content based on screen size.

🎯 Summary of What You Learned

Feature	Example Shown
Basic columns	✔
Responsive breakpoints	✔
Nested columns	✔
Offsets	✔
Auto equal columns	✔
Ordering columns	✔

Bootstrap Grid Examples