How to create a fixed sidebar layout with Bootstrap 4?

Question

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 sa

Answer 1

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:

    

        

            

                ...
            
        
        

            
Main Area
            ...   
        
    

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

or, use position-fixed:

    

        

            ...
        
        

            
Main Area
            ...
        
    

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?