Bootstrap cols are not next to each other

Question

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

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

score 0 · Accepted Answer · answered Oct 28 '18 at 11:55

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>

Vishnudev Krishnadas · Answer 2 · 2018-10-28T14:29:14.383

0

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

edited Oct 28 '18 at 14:29

answered Oct 28 '18 at 11:56

Vishnudev Krishnadas

10,679
2
23
55

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 Krishnadas 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 Krishnadas 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 Krishnadas 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

Bootstrap cols are not next to each other

2 Answers2