Bootstrap side by side divs, one with fixed size?

I'm using Bootstrap 4 and trying to put 2 divs side by side. I know below method:

<div class="row">
    <div class="col-6">
    </div>
    <div class="col-6">
    </div>
</div>

But i need the first div fixed width: 140px; What is the best practice to achieve that?

1 answer

  • answered 2018-04-17 06:00 DragonBorn

    Here's an example of how to do it using flex-boxes. (Not using bootstrap)

    .parent-div {
      display: flex;
    }
    
    .first-div {
      width: 140px;
      height: 100px;
      background: blue;
     }
     
     .second-div {
     height: 100px;
     width: 100%;
      background: green;
     }
    <div class="parent-div">
        <div class="first-div">
        </div>
        <div class="second-div">
        </div>
    </div>

    If you want to customise your own bootstrap column widths then check this post.