Bootstrap 4 layout with one width fixed column

None of these answers solved the problem I faced. And I have come up with such a solution: (it is not effective but it works.)

.my-fixed-col{
  width: 150px;
}

.my-fluid-col{
  width: calc(100% - 150px);
}

/***/
*{
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container-fluid d-flex p-0 m-0">
  <div class="row p-0 m-0 w-100">
    
    <div class="my-fixed-col bg-primary text-white p-1">
        150px fixed column
    </div>
    
    <div class="my-fluid-col bg-danger text-white p-1">
        fluid column
    </div>
  
  </div>
</div>

@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.

Bootstrap 4 has this built into their layout components.

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

Reference: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

If you would like your set width column to have a fixed pixel width, you can omit .col-4 and add a custom pixel width class.

<div class="container">
  <div class="row">
    <div class="col-pixel-width-100">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

// style.css
.col-pixel-width-100 { flex: 0 0 100px; }

There is a built-in solution in bootstrap 4.

Try this;

<div class="container">
    <div class="row">
        <div class="col-12 col-md">
            content
        </div>
        <div class="col-12 col-md-auto">
            <div style="background: red; width: 300px;">
                sidebar
            </div>
        </div>
    </div>
</div>

Demo: https://www.bootply.com/WiegnnJbxX