Bootstrap side by side divs, one with fixed size?

Question

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?

I almost checked all bootstrap 4 -> grid system related questions, I'm not able to find any question which asks this. If there's any can you please share the link? — Mubariz Hajimuradov, Apr 17 '18 at 06:23
Please read the other question and answers. https://www.codeply.com/go/x4TUJV8AFD — Carol Skelly, Apr 17 '18 at 06:30

score 1 · Accepted Answer · answered Apr 17 '18 at 06:00

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.

thank you, it works – Mubariz Hajimuradov Apr 17 '18 at 07:05 — Mubariz Hajimuradov, Apr 17 '18 at 07:05

Bootstrap side by side divs, one with fixed size?

1 Answers1