Category: Bootstrap Grids
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> |
✔ On small screens → stacked✔ On...
Bootstrap Grid – Large Devices Bootstrap provides responsive grid classes to control layouts across different screen sizes. For large devices such as desktops and wide screens, you use the class prefix: col-lg-* ➡️ This...
Bootstrap Grid – Medium Devices Bootstrap offers responsive grid classes to control how layout behaves on different screen sizes. For medium devices, such as tablets and small laptops, you use the class prefix: col-md-*...
Bootstrap Grid – Small Devices Bootstrap provides responsive column classes to control how content displays on small devices such as portrait tablets and large smartphones. Small devices use the class prefix: col-sm-* ▶ Applies...
Bootstrap Grid – Stacked-to-Horizontal Layout The stacked-to-horizontal grid is a responsive layout pattern where: On small screens (phones) → columns stack vertically. On larger screens (tablets, desktops) → columns are arranged horizontally side-by-side. Bootstrap...
Bootstrap Grid System The Bootstrap Grid System is one of the core features of Bootstrap. It allows you to create responsive layouts for all screen sizes using a series of rows and columns. ✅...
