bootstrap 3 to bootstrap 4 cols no longer horizontally aligned

Question

im migrating to bootstrap 4 however Ive swapped the boostrap-min.css for my pages from 3 to 4 and my columns are all now vertically aligned as as far as I can see the columns are correct.

I also used a JS fiddle to test and am able to repliate them all being vertical there too. can anyone point me in the right direction, from how ive read the documentation https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match this should work

<div class="row">
    <div class="col-12">
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
    </div>
</div>

https://jsfiddle.net/aq9Laaew/4791/

Can you not remove the `col-sm-12`? If you can then here is a working [fiddle](https://jsfiddle.net/aq9Laaew/4829/) — snack_overflow, Apr 13 '18 at 15:40
that seems to do the trick, can you not nest columns anymore? — AlexW, Apr 13 '18 at 15:41
Good, I'm glad it worked for you. I think you may need to throw another row underneath the parent column for it to work? I'm sure there is some docs on this.. — snack_overflow, Apr 13 '18 at 15:42
Yeah, here you go [DOCS](https://getbootstrap.com/docs/4.0/layout/grid/#nesting) — snack_overflow, Apr 13 '18 at 15:44

snack_overflow · Accepted Answer · 2018-07-31T13:19:29.300

4

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

https://getbootstrap.com/docs/4.0/layout/grid/#nesting

edited Jul 31 '18 at 13:19

answered Apr 13 '18 at 15:44

snack_overflow

536
2
9
27

Bhuwan · Answer 2 · 2018-04-13T15:49:58.980

As bootstrap4 grid structure is based on flexbox, so you will need to use row and col grid carefully. Here is no need to .col-12 div, just wrap your .col-2 into a row. Also wrap your .row inside the .container class

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
  </div>
</div>

Or if you don't want to remove .col-12 div, use another row to wrap the .col-2 elements which is useless ^{(Just trying to show you the concept of grid structure).}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </div>
</div>

KaSkuLL · Answer 3 · 2018-04-13T15:44:26.303

0

You shoud delete frist col-xs-12

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-2">
    <h1>TEST</h1>
  </div>
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-4">
    <h1>TEST</h1>
  </div>
</div>

edited Apr 13 '18 at 15:44

answered Apr 13 '18 at 15:41

KaSkuLL

531
6
27

can we not nest columns anymore? – AlexW Apr 13 '18 at 15:42
@AlexW Of course you can, take a look at my answer – KaSkuLL Apr 13 '18 at 15:44

bootstrap 3 to bootstrap 4 cols no longer horizontally aligned

3 Answers3

Linked

Related