Why Bootstrap nested columns are not beside each other but below?

Question

Why here left and right are not beside but below?

<section className="section-top-overflow">
  <div className="container">
    <div className="row">
      <div className={"col-lg-12"}>
        <div className="col">left</div>
        <div className="col">right</div>
      </div>
    </div>
  </div>
</section>

Found here this info:

Remove the col-12 as Bootstrap 4 requires a new row for columns to be nested.

bootstrap 3 to bootstrap 4 cols no longer horizontally aligned

I try to recreate this contact form here, and there are nesting column into column. Does it mean they do not use Bootstrap 4 but 3? How can I check which one is used?

http://themes.framework-y.com/codrop/careers/

Columns should always be children of rows in Bootstrap, with a few expectations such as form inputs. . — isherwood, Jun 10 '22 at 19:33

score 3 · Accepted Answer · edited Jun 10 '22 at 19:33

In bootstrap 'col' classes are rendered as blocks not inline. To make cols render next to each other you must wrap they in a 'row' class, currently you are wrapping they into another 'col' class, let me show you:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<section class="section-top-overflow">
  <div class="container">
    <div class="row">
      <div class="col-lg-12"> <!-- this wrapper is a col -->
        <div class="row"> <!-- this is what you are missing -->
          <div class="col">left</div>
          <div class="col">right</div>
        </div>
      </div>
    </div>
  </div>
</section>

Why Bootstrap nested columns are not beside each other but below?

1 Answers1