How can I create a sticky CTA bar on mobile screens?

Asked on Sep 20, 2025

1 Answer

To create a sticky Call-To-Action (CTA) bar that remains fixed at the bottom of mobile screens using Bootstrap 5, you can utilize the `position: sticky` or `position: fixed` CSS properties. Here's a simple example using `position: fixed`.

<!-- BEGIN COPY / PASTE -->
        <div class="d-block d-md-none fixed-bottom bg-primary text-white text-center p-3">
            <button type="button" class="btn btn-light">Call to Action</button>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-block d-md-none` classes ensure the CTA bar is only visible on mobile devices.
`fixed-bottom` is used to keep the bar at the bottom of the screen.
Customize the `bg-primary` and `btn btn-light` classes to fit your design needs.
The `p-3` class adds padding for better touch targets.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions