How do I use container-fluid only above a certain breakpoint?

Asked on Jun 14, 2025

1 Answer

In Bootstrap 5, you can use responsive container classes to apply `container-fluid` only above a certain breakpoint. Here's how you can achieve that.

<!-- BEGIN COPY / PASTE -->
        <div class="container-sm">
            <!-- Content here will be fluid only above the 'sm' breakpoint -->
            <p>This container is fluid above the 'sm' breakpoint.</p>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `container-sm`, `container-md`, `container-lg`, `container-xl`, or `container-xxl` to make the container fluid above the respective breakpoint.
The content inside the container will be fluid starting from the specified breakpoint and will have fixed width below it.
Adjust the class according to your desired breakpoint.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions