How to force a fixed column width with a Bootstrap grid and keep the other ones fluid

Bootstrap 4.0 beta:

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col my-sidebar">
      <h2>LEFT</h2>
      <h6>(FIXED 230px COLUMN)</h6>
    </div>
    <div class="col text-center">
      <h1>CENTER (FLUID COLUMN)</h1>
    </div>
    <div class="col my-sidebar">
      <h2>RIGHT</h2>
      <h6>(FIXED 230px COLUMN)</h6>
    </div>
  </div>
</div>

CSS:

.my-sidebar {
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    background-color: greenyellow; 
} 

@media (max-width: 690px) {
  .my-sidebar {
    display: none; 
  } 
}

Live example here: https://www.codeply.com/view/PHYTWFDFRU

In this example fixed columns will disappear if the browser window width becomes less than 690px. If you want them to be always visible remove the second css-block with @media entirely.


Bootstrap's grid were meant to be fluid so they're supposed to change as the screen changes size.

For your desired layout, you can make it happen using display: flex or display:table instead. I'm going to go with display:table for my example since there's more support for it than the flexbox.

You will need to change your HTML to something like:

<div class="page">
  <div class="page-content">
    <div class="row">
      <div class="col-md-2">
        <div class="blue">test</div>
      </div>
      <div class="col-md-10">
        <div class="green">test</div>
      </div>
    </div>
  </div>
  <div class="sidebar">
    <div class="gold">test</div>
  </div>
</div>

And here's the CSS I used:

.page {
  display: table;
  width: 100%;
}
.page-content,
.sidebar {
  display: table-cell;
}
.sidebar {
  width: 330px;
}
.blue,
.green,
.gold {
  height: 50px;
}

.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.gold {
  background-color: gold;
}

You can checkout the fiddle here: https://jsfiddle.net/m0nk3y/qjutpze4/


Simply fix the width of the element you want fixed and don't add a measure to your bootstrap column (like col-8), by doing this it will take the remaining space automatically.

In my case I only had two elements on the row. Hope this helps.

.fixed{
    width: 300px;
}

<body>
    <div class="container">
        <div class="row">
            <div class="fixed">
                Fixed Width
            </div>
            <div class="col">
                Fluid
            </div>
        </div>        
    </div>
</body>

Tags:

Html

Css

Twitter Bootstrap

Recent Posts