0

I m trying to use a div with class col-sm-6 and trying to divide it again in 12 grids using col-sm-6 and col-sm-6 classes. However, it does not seem to work. col-sm-6 inside col-sm-6 is taking entire width of the parent and not sticking to 50% width as it should.

This pattern used to work well in Bootstrap 3 but does not seem to work in Bootstrap 4. I have code to prove it works in bootstrap3 but not in 4 below:

Bootstrap 3- It works: https://codepen.io/vishalgulati/pen/axMNRz enter image description here

Bootstrap 4- It does not work - https://codepen.io/vishalgulati/pen/KYEzxr enter image description here

Same code is used in both:

  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">
        <div class="col-sm-6" style="background-color:red;">25%</div>
        <div class="col-sm-6" style="background-color:pink;">25%</div>
      </div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
</div>
Peter
  • 10,492
  • 21
  • 82
  • 132

2 Answers2

4

Bootrap 4 use "flex" styles. So you have two way:

1) You need to add 

<div class="row">

before your first two divs with class col-sm-6 and close it after.

You can see your modified example: https://codepen.io/anon/pen/ZZPOEz

2) You need to add flex (display: flex;) to you first div on cols-sm-6, that contain two divs.

<div class="col-sm-6" style="display: flex;background-color:yellow;">

You can see your modified example: https://codepen.io/anon/pen/MRxeow

or add class 'row' to it - https://codepen.io/anon/pen/wZOWPO

<div class="col-sm-6 row" style="background-color:yellow;">
inem88
  • 327
  • 3
  • 15
  • 1
    Thats one way. However, that would add one more div in DOM. Without that also it should have worked like it did in Bootstrap3, what exactly changed in BS4? – Peter Apr 28 '19 at 06:13
  • I add two way to solve this problem. BS4 now use flex css styles. They correct work in flex container. Simple div with class col-sm-* is not a flex container by default. – inem88 Apr 28 '19 at 06:30
  • Thanks @inem88 , you saved my hours. Putting `display: flex;` works for me. – funbrain9 Jul 02 '21 at 08:43
1

col will only works when it is the direct child of row. in your case, if the col is inside another col, it won't work. So you must wrap them with row. And since row has default margin of -15, you must wrap it with container. Check this. 

<div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">
        <div class="container">
         <div class="row">
          <div class="col-sm-6" style="background-color:red;">25%</div>
          <div class="col-sm-6" style="background-color:pink;">25%</div>
         </div>
       </div>
      </div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
</div>
imste
  • 360
  • 3
  • 7