Bootstrap 5 provides a powerful grid system that makes creating responsive layouts a breeze. In this tutorial, you’ll learn how to build a responsive three-column grid layout for a services section using Bootstrap 5. This layout will automatically adjust to different screen sizes, ensuring a consistent and professional appearance across all devices.
The Bootstrap grid system is based on a 12-column layout, where you can specify how many columns each element should occupy. By using classes like col
, col-sm
, col-md
, col-lg
, and col-xl
, you can control how the layout behaves on different screen sizes.
<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>
To create a three-column layout for a services section, you’ll use the row
class to create a row and the col-md-4
class to divide the row into three equal columns. Each column will occupy four out of the twelve available grid columns.
<section class="services"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="service-box"> <h3>Service 1</h3> <p>Details about Service 1.</p> </div> </div> <div class="col-md-4"> <div class="service-box"> <h3>Service 2</h3> <p>Details about Service 2.</p> </div> </div> <div class="col-md-4"> <div class="service-box"> <h3>Service 3</h3> <p>Details about Service 3.</p> </div> </div> </div> </div> </section>
Bootstrap’s grid system automatically adjusts to different screen sizes. By using classes like col-md-4
, the columns will stack vertically on smaller screens. You can customize the grid’s behavior further by using other breakpoint classes, like col-sm-6
for tablets and col-lg-3
for larger screens.
<section class="services"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3">Column 1</div> <div class="col-sm-6 col-md-4 col-lg-3">Column 2</div> <div class="col-sm-6 col-md-4 col-lg-3">Column 3</div> <div class="col-sm-6 col-md-4 col-lg-3">Column 4</div> </div> </div> </section>
You can enhance the appearance of your grid layout by adding custom CSS styles. For example, you might want to add padding, background colors, and borders to each service box.
.service-box { background-color: #f5f5f5; padding: 20px; border: 1px solid #ddd; text-align: center; margin-bottom: 20px; } .service-box h3 { font-size: 18px; font-weight: bold; } .service-box p { color: #666; }
Once your layout is complete, test it on various devices to ensure it is fully responsive. Use browser developer tools to simulate different screen sizes and adjust your layout as needed. Make sure the grid structure remains intact, and the design looks clean and professional.
By following this guide, you’ve learned how to create a responsive three-column grid layout using Bootstrap 5. Whether you’re designing a services section, photo gallery, or any other content, Bootstrap’s grid system provides the flexibility needed to ensure a responsive and visually appealing design across all devices.
Empowering future web developers by providing easy-to-follow tutorials in HTML, CSS, and JavaScript. Whether you’re just starting or honing your skills, explore practical lessons and projects to bring your coding dreams to life!
Share Your Projects
Submit Tutorials or Tips
Join Our Community Forum
Beginner’s Guide to Web Development
Top Tools for Coding Websites
Latest Web Development Trends
Terms | Privacy