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

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

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 inside the Bootstrap structure, it is OK. I mean it hasn’t to be with col-xx-xx class.
Whatever I do the main problem is that I don’t manage to make the fluid container stays beside the sidebar.
The point is also that if I display to none the sidebar, the fluid container has to use the full width of the page.


Solution 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

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

Related:  col-*-12 (col-xs / col-sm / etc) use in Bootstrap 3

Bootstrap 4 Alpha 6 or Beta

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

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>

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

Update 2018
Bootstrap 4.0.0 example

Solution 2:

Try including your container-fluid in a div with margin-left: 200px (where 200px is your sidebar’s width).

Then position your sidebar with position: absolute for instance