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

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.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<section >
  <div >
    <div >
      <div > <!-- this wrapper is a col -->
        <div > <!-- this is what you are missing -->
          <div >left</div>
          <div >right</div>
        </div>
      </div>
    </div>
  </div>
</section>