Bootstrap 4 layout with one width fixed column

Question

this is my html code:

<div class="container-fluid d-flex h-100">   <div class="white h-100" style="background-color: white;">     fixed 100px   </div>   <div class="col-3 blue h-100" style="background-color: blue;">     3   </div>   <div class="col-6 red h-100" style="background-color: red;">     6   </div>   <div class="col-3 blue h-100" style="background-color: blue;">     3   </div> </div> 

Can you help me to fix my code please? I need on left side column with fixed width, which will be have 100px. This column have not resize. Rest of space I need to should be dynamically adjustable in ratio 1 : 2 : 1. Thanks for help.

Answer 1

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