How do I make a sidebar that sticks until the footer using position-sticky?

Asked on Jun 16, 2025

1 Answer

To create a sidebar that sticks until the footer using Bootstrap 5, you can utilize the `position-sticky` utility class. This allows the sidebar to remain visible as you scroll, stopping at the footer.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="sticky-top" style="top: 0;">
                        <div class="bg-light border p-3">
                            Sidebar content
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="content">
                        <!-- Main content goes here -->
                        <p>Long content to enable scrolling...</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `sticky-top` class is used to make the sidebar sticky. The `style="top: 0;"` ensures it sticks to the top of the viewport.
Adjust the `col-md-3` and `col-md-9` classes to change the width of the sidebar and main content as needed.
Ensure the sidebar's height does not exceed the viewport height to maintain the sticky effect.
The sidebar will stop scrolling when it reaches the footer if the footer is positioned after the main content.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions