Bootstrap 4 layout with one width fixed column

by

@Denis Stephanov, you can create a flex item that doesn’t shrink or grow and has a fixed width, with the following css rule:

.flex-fixed-width-item {
    flex: 0 0 100px;
}

This is the short-hand for flex-grow, flex-shrink, and flex-basis. You can read more about these properties in this CSS-Tricks article.

Adding that class to your fixed width column:

<div class="container-fluid d-flex h-100">
  <div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
    fixed 100px
  </div>
  ...

Then keeping your column ratio the same:

  ...
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
  <div class="col-4 red h-100" style="background-color: red;">
    4
  </div>
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
</div>

You’ll get your requested outcome, which you can view in this codeply project.

Leave a Comment