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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Jun 05, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Jun 05, 2025

Answer

The Q&A Network