What is the proper way to use Bootstrap 5 breakpoints for responsive design?

Asked on Jun 01, 2025

1 Answer

Bootstrap 5 provides a set of predefined classes to handle responsive design using breakpoints. These breakpoints allow you to create a responsive layout that adapts to different screen sizes.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    Responsive Column
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Bootstrap 5 breakpoints are based on minimum viewport widths.
The classes `col-`, `col-sm-`, `col-md-`, `col-lg-`, and `col-xl-` are used to define column sizes for different screen sizes.
The example above shows a column that spans 12 columns on extra-small screens, 6 on small, 4 on medium, and 3 on large screens.
Use the `.container` class for a responsive fixed-width container, or `.container-fluid` for a full-width container.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions