1

I have simple layout in HTML using Bootstrap like so

<div class='row'>
    <div class="col-6">
     <div class="col-2">
       FOO
     </div>
     <div class="col-4">
       BAR
     </div>
    </div>
</div>

I expected it be FOO and BAR next to each other, but it is not so? Why? Can someone help me with this?

Here is a Demo

Rehan
  • 3,621
  • 6
  • 32
  • 57
  • 1
    read the doc to understand how to correctly nest column : https://getbootstrap.com/docs/4.1/layout/grid/#nesting .. you need row and you also need container as a main wrapper – Temani Afif Oct 28 '18 at 11:49

2 Answers2

0

You have nested the columns, please read the docs about bootstrap. To achieve your scope try this code:

<div class='row'>
  <div class="col-6">
  </div>
  <div class="col-2">
    FOO
  </div>
  <div class="col-4">
    BAR
  </div>
</div>
0

The grid system has a full size of 12. Hence the columns could have combination of any one of below:

Grid system

Vishnudev
  • 9,498
  • 1
  • 15
  • 50
  • He nested the columns in a wrong way, this is why the grid layout didn't work. Moreover the sum of the column he used is 12. –  Oct 28 '18 at 11:59
  • @user9741470 Check his code in the pen link he mentioned. – Vishnudev Oct 28 '18 at 12:00
  • He posted the code, so I assume the pen linked has the same code. If not I assume this was a mistake of the user –  Oct 28 '18 at 12:02
  • @user9741470 I don't assume. I just go by facts. The code is not the same. – Vishnudev Oct 28 '18 at 12:03
  • He need to modify the code to reflect the linked one. –  Oct 28 '18 at 12:15
  • 1
    Well that doesn't have anything to do with my answer :) I gave generic answer. – Vishnudev Oct 28 '18 at 12:17
  • 1
    There's nothing wrong with having the sum of the columns exceed 12, they'll just [wrap to a new row](https://getbootstrap.com/docs/4.1/layout/grid/#column-wrapping). That's not causing the problem that the OP has. – JJJ Oct 28 '18 at 14:09