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

Question

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.

Leave a Comment Cancel reply