Bootstrap grid doesn't sit side by side

Question

Here's a very basic 6 column grid that I'd like to sit side by side. The second column breaks to the line under the first.

<div class="col-12">
    <div class="col-6">
        Col6
    </div>
    <div class="col-6">
        Col6
    </div>
</div>

Bootstrap `cols` need to be inside a `row`. Replace the `col-12` class with `row` class, your problem will be fixed. — Siddharth Bhansali, Jul 28 '21 at 05:22

score 1 · Answer 1 · answered Jul 28 '21 at 08:26

When ever you put col inside col put row class in between

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12">
  <div class="row">
    <div class="col-6">
      Col6
    </div>
    <div class="col-6">
      Col6
    </div>
  </div>
</div>

Bootstrap grid doesn't sit side by side

1 Answers1