How do I build a responsive grid layout using Bootstrap 5 row and col classes?

Asked on Jun 01, 2025

1 Answer

Bootstrap 5 provides a powerful grid system that allows you to create responsive layouts easily using row and col classes. Here's a simple example to get you started.

<!-- BEGIN COPY / PASTE -->
        <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>
        <!-- END COPY / PASTE -->

Additional Comment:

The `container` class centers your content and provides responsive padding.
The `row` class creates a horizontal group of columns.
The `col-md-4` class specifies that each column should take up 4 out of 12 parts of the row on medium-sized screens and larger, making them equal in width.
You can adjust the column sizes by changing the number after `col-md-` to fit your design needs.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions