CODEWITHSUNDEEP
reactjstwitter-bootstrapnext.js
János
János

Reputation: 35060

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

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/

enter image description here

Upvotes: 0

Views: 614

Answers (1)

Osmanys Fuentes-Lomb&#225;
Osmanys Fuentes-Lomb&#225;

Reputation: 863

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

Upvotes: 3

Related Questions