Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a fixed sidebar layout with Bootstrap 4?

enter image description here

I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time.

Going with a basic example:

<div class="container">   <div class="row">     <div class="col-m-4" id="sticky-sidebar">       Sidebar     </div>     <div class="col-m-8" id="main">       Main Area     </div>   </div> </div> 

It's possible to get this layout but things get tricky once I declare:

.sidebar { position: fixed // or absolute } 

Once I make the sidebar sticky, the main div starts appearing behind the sidebar instead of next to it. Of course it's possible to declare some margin and push it back to it's original position but it makes things complicated for responsiveness.

I feel like I'm missing something, I read the Bootstrap 4 documentation but I couldn't find a simple way to achieve this layout.

like image 927
cinnaroll45 Avatar asked Nov 08 '16 22:11

cinnaroll45


People also ask

How do you make a sidebar sticky?

You can either make a custom stylesheet specifying the sidebar style or you can add an inline CSS code "position: sticky" to your sidebar element/container.

How do I make a collapsible sidebar in bootstrap?

Bootstrap 3 Basically you need to wrap the layout in an outer div, and use media queries to toggle the layout on smaller screens.

Does bootstrap have sidebar?

Since Bootstrap 4 nor Bootstrap 3 don't provide any sidebar menu, we will build 5 separate solutions. Each of them will have slightly different features and design, so you can choose one that serves your needs.


1 Answers

Updated 2020

Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....

Use sticky-top:

<div class="container">     <div class="row py-3">         <div class="col-3 order-2" id="sticky-sidebar">             <div class="sticky-top">                 ...             </div>         </div>         <div class="col" id="main">             <h1>Main Area</h1>             ...            </div>     </div> </div> 

Demo: https://codeply.com/go/O9GMYBer4l

or, use position-fixed:

<div class="container-fluid">     <div class="row">         <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">             ...         </div>         <div class="col offset-3" id="main">             <h1>Main Area</h1>             ...         </div>     </div> </div> 

Demo: https://codeply.com/p/0Co95QlZsH

Also see:
Fixed and scrollable column in Bootstrap 4 flexbox
Bootstrap col fixed position
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?

like image 93
Zim Avatar answered Oct 09 '22 09:10

Zim