How do row-cols utilities work and when should I use them?

Asked on Jun 10, 2025

1 Answer

Bootstrap's row-cols utilities allow you to easily control the number of columns in a row across different screen sizes. They are useful for creating responsive grid layouts without specifying explicit column sizes.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
                <div class="col">Column 1</div>
                <div class="col">Column 2</div>
                <div class="col">Column 3</div>
                <div class="col">Column 4</div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The example uses `row-cols-1`, `row-cols-sm-2`, and `row-cols-md-3` to define the number of columns for different screen sizes.
`
` is used to create a flex container for columns.
`row-cols-1` sets one column per row on extra small screens.
`row-cols-sm-2` sets two columns per row on small screens and above.
`row-cols-md-3` sets three columns per row on medium screens and above.
Adjust the classes to fit your design needs for different breakpoints.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions