How to make a fixed width column with a container-fluid?

Question

I am trying have a side column on the left with fixed width, and then, on the right a normal Bootstrap container-fluid.

Even if the sidebar is not insid

Answer 1

A fixed-fluid layout is possible in Bootstrap 3, but now that Bootstrap 4 is flexbox this layout is much easier. You just need to enable flexbox, and make a few simple adjustments to set the width of your fixed side column flex: 0 0 300px;, and then flex: 1; on your main column to fill remaining width...

Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw

Here's a simpler update for the latest Bootstrap 4 which is flexbox by default:

Bootstrap 4 Alpha 6 or Beta http://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }


    

        


        
        

            
Main (fluid width...)
        
    

Also see: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Update 2018 Bootstrap 4.0.0 example