Bootstrap 5 Grid System Explained with Easy Examples for Beginners
The Bootstrap 5 Grid System serves as your fastest tool to build websites. The system leads you to design clean interfaces by using rows and columns. Due to the Bootstrap 5 Grid System, you can now avoid using custom CSS for layout tasks.
Real-world Bootstrap grid examples will serve to explain how grid design operates.
What is the Bootstrap Grid System?
The Bootstrap Grid System functions as an essential feature that divides every row into twelve equal parts.
Bootstrap uses a 12-column layout. Each row receives an equal division into 12 parts. Each Bootstrap 5 grid system can contain a single column or include multiple columns at once. All columns in each row should equal the value of 12.
No math skills are needed—use classes to split col-md-6 your page!
You can also group columns. For example:
<div class="row"> <div class="col-4">Left</div> <div class="col-8">Right</div> </div>
This layout uses two columns in Bootstrap. The left part takes 4 spaces. The right part takes 8 spaces. Together, they make 12.
Responsive Grid for Every Screen
The Bootstrap 1920 grid and any other screen size fit perfectly. Bootstrap grids are responsive. The system changes the display across all mobile platforms, including smartphones, tablets, and laptops.
There are 5 screen size options:
- col- for all screens
- col-sm- for tablets (≥768px)
- col-md- for small laptops (≥992px)
- col-lg- for laptops (≥1200px)
- col-xl- for large screens like 1920px
Example: Three columns that stack on mobile:
<div class="row"> <div class="col-sm-12 col-md-4">Column 1</div> <div class="col-sm-12 col-md-4">Column 2</div> <div class="col-sm-12 col-md-4">Column 3</div> </div>
Example: For large screens:
<div class="row"> <div class="col-lg-6">Half Width</div> <div class="col-lg-6">Half Width</div> </div>
On desktops or laptops, each column will take 50% width.
Handling Giant Screens (1920px and Beyond)
For extra-large monitors (like 1920px, 3840px), customize the grid. Bootstrap 5 doesn’t include a default class here, but you can add your own:
/* Custom CSS */
@media (min-width: 1920px) {
.col-xxl-3 {
flex: 0 0 25%;
max-width: 25%;
}
}
Three Equal Columns Example
<div class="row"> <div class="col-sm-4">One</div> <div class="col-sm-4">Two</div> <div class="col-sm-4">Three</div> </div>
This code creates three equal columns in Bootstrap. On small screens, 3 columns stack one below the other.
Two Unequal Columns Example
The example below illustrates how to create two columns of varying widths that begin at tablet sizes and adapt for larger desktops:
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
Full-Width Grid with Container
If you want full-width layout, use .container-fluid:
<div class="container-fluid">
<div class="row">
<div class="col-12">Full Width Content</div>
</div>
</div>
For a fixed-width layout on laptops or large screens, use .container
Bootstrap Grid in ReactJS
ReactJS + Bootstrap Grid = Magic!
If you are using ReactJS Bootstrap Grid, install react-bootstrap first:
npm install react-bootstrap bootstrap
Example: Create a grid in React:
import { Container, Row, Col } from 'react-bootstrap';
function MyGrid() {
return (
<Container>
<Row>
<Col md={6}>Left Side</Col>
<Col md={6}>Right Side</Col>
</Row>
</Container>
);
}
This is how you use React-Bootstrap columns with the same grid rules.
Bootstrap 5 Real-World Examples
1. Responsive Navigation Bar with Auto-Adjusting Menu Items
Ideal for headers that adapt to mobile screens.
Logos and menu items adjust on smaller screens.
<div class="row align-items-center py-3 bg-light">
<!-- Logo (3 columns on desktop, 6 on mobile) -->
<div class="col-md-3 col-6">
<h2>Logo</h2>
</div>
<!-- Menu Items (9 columns on desktop, hide on mobile) -->
<div class="col-md-6 d-none d-md-block">
<a href="#" class="mx-3">Home</a>
<a href="#" class="mx-3">About</a>
</div>
<!-- Button (3 columns on desktop, 6 on mobile) -->
<div class="col-md-3 col-6 text-end">
<button class="btn btn-primary">Contact</button>
</div>
</div>
2. Bootstrap Hero Section with Sidebar
Perfect for landing pages with a main focus area.
70% width for content, 30% for sidebar on desktops.
<div class="row min-vh-50">
<!-- Main Content -->
<div class="col-lg-7 p-5 bg-info text-white">
<h1>Welcome to My Site!</h1>
<p>Start exploring our features.</p>
</div>
<!-- Sidebar -->
<div class="col-lg-5 p-5 bg-warning">
<h3>Sign Up Now</h3>
<input type="email" class="form-control mb-2" placeholder="Email">
<button class="btn btn-dark">Subscribe</button>
</div>
</div>
3. Bootstrap Card Grid for Products/Blog Posts
Display content in neat rows.
3 cards per row on desktop, 1 on mobile.
<div class="row">
<!-- Card 1 -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="product1.jpg" class="card-img-top">
<div class="card-body">
<h5>Product 1</h5>
</div>
</div>
</div>
<!-- Repeat same structure for Card 2 & 3 -->
</div>
Replace col-md-4 with col-lg-3 for 4 cards per row.
4. Nested Grid for Complex Layouts
Grid inside another grid for advanced designs.
The parent row splits into 8/4 columns. The child grid adds 6/6 inside.
<div class="row">
<!-- Parent Column 1 (8/12 width) -->
<div class="col-md-8">
<div class="row">
<!-- Nested Columns -->
<div class="col-md-6 p-2 bg-danger">Left Block</div>
<div class="col-md-6 p-2 bg-primary">Right Block</div>
</div>
</div>
<!-- Parent Column 2 (4/12 width) -->
<div class="col-md-4 bg-secondary p-2">Sidebar</div>
</div>
5. Image and Text Sections in Two Columns
Use one column for an image and another for text, ideal for landing pages.
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-md-6">
<img src="https://via.placeholder.com/500x300" class="img-fluid rounded" alt="Doctor Team">
</div>
<div class="col-md-6">
<h2>Trusted Team of Doctors</h2>
<p>Our doctors are highly trained professionals with years of experience.</p>
<p>We use modern technology and caring methods to treat every patient.</p>
</div>
</div>
</div>
6. Four-Column Info Grid
Divide the row into 4 equal parts using col-md-3. Perfect for showing quick facts or contact info.
<div class="container mt-5">
<div class="row text-center">
<div class="col-md-3 bg-light p-3">
<h5>Call Us</h5>
<p>+1 234 567 890</p>
</div>
<div class="col-md-3 bg-primary text-white p-3">
<h5>Email</h5>
<p>info@clinic.com</p>
</div>
<div class="col-md-3 bg-light p-3">
<h5>Location</h5>
<p>123 Health St, City</p>
</div>
<div class="col-md-3 bg-success text-white p-3">
<h5>Working Hours</h5>
<p>Mon-Sat: 9am - 8pm</p>
</div>
</div>
</div>
Final Thoughts
The Bootstrap 5 Grid System is easy to use and works on all screen sizes. You can use the Bootstrap columns to create any layout. Also, it works with React and is great for beginners.
Got questions? Drop a comment below or share your grid creations with us! 🚀
