CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
BrettD
BrettD

Reputation: 379

Bootstrap 3 column issue

I'm working with bootstrap 3, and am new to it but it seems like a fairly simple transition from 2.

Here is the jsfiddle with the code: http://jsfiddle.net/AHvLW/

And here is an image of how it renders when they are all in col-md-4:

I don't get it though, it works fine in jsFiddle, but not on my index file. Anyone experience a similar issue of might know whats up with it?

Upvotes: 8

Views: 12687

Answers (6)

GeorgeButter
GeorgeButter

Reputation: 2589

Thought this may help some people. Just add the following to your stylesheet. I have provided CSS or SCSS.

css

/*================ Row Uniform ==================*/
.row-uniform {
  margin-right: -15px;
  margin-left: -15px;
}
.row-uniform:after {
  clear: both;
}
.row-uniform:before {
  display: table;
  content: '';
}
.row-uniform .col-xs-6:nth-child(2n+1) {
  clear: left;
}
.row-uniform .col-xs-4:nth-child(3n+1) {
  clear: left;
}
.row-uniform .col-xs-3:nth-child(4n+1) {
  clear: left;
}
.row-uniform .col-xs-2:nth-child(6n+1) {
  clear: left;
}
@media (min-width: 768px) and (max-width: 992px) {
  .row-uniform .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-sm-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-sm-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-sm-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .row-uniform .col-md-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-md-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-md-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-md-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width: 1200px) {
  .row-uniform .col-lg-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-lg-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-lg-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-lg-2:nth-child(6n+1) {
    clear: left;
  }
}

scss

/*================ Row Uniform ==================*/

.row-uniform {
  margin-right: -15px;
  margin-left: -15px;
  &:after {
    clear:both;

  }
  &:before {
    display: table;
    content: '';
  }

  // 2
  .col-xs-6:nth-child(2n+1) {
    clear: left;
  }
  // 3
  .col-xs-4:nth-child(3n+1) {
    clear: left;
  }
  // 4
  .col-xs-3:nth-child(4n+1) {
    clear: left;
  }
  // 6
  .col-xs-2:nth-child(6n+1) {
    clear: left;
  }
  // sm
  @media (min-width:768px) and (max-width:992px) {
    // 2
    .col-sm-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-sm-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-sm-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-sm-2:nth-child(6n+1) {
      clear: left;
    }
  }
  // md
  @media (min-width:992px) and (max-width:1200px) {
    // 2
    .col-md-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-md-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-md-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-md-2:nth-child(6n+1) {
      clear: left;
    }
  }
  // lg
  @media (min-width:1200px) {
    // 2
    .col-lg-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-lg-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-lg-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-lg-2:nth-child(6n+1) {
      clear: left;
    }
  }
}

Then you just give your rows the new class row-uniform.

<div class="row-uniform">
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
</div>

Upvotes: 1

Aus-tn
Aus-tn

Reputation: 31

If you're looking for a solution where you don't mind all three columns being of equal height, and you can't use a wrapper due to calling different column numbers per different screen sizes you can apply a rule similar to my solution where I apply an id to a main wrapper of the columns and then style the column size to have a minimum height. 

main#shop .col-md-3 {
    min-height:600px;
}

Upvotes: 1

Ajoy
Ajoy

Reputation: 1848

You can easily solve it with this css :

.col-md-4:nth-child(3n+1){
    clear: left;
}

Found this solution here

Upvotes: 10

Bart Calixto
Bart Calixto

Reputation: 19725

not an answer to your question, but you should be able to optimize your code since there is no need to use all size classes.

<div class="row">
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
</div>

Upvotes: 2

Mothy
Mothy

Reputation: 416

Please check whether your div tags are closed correctly and the classes that you are using have correctly referenced in your code.

Upvotes: 1

omma2289
omma2289

Reputation: 54659

Since the columns are not all equal in height you need to add a clearfix <div> for the large viewports just as the new row should start, that is between your 3rd and 4th column:

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>

Demo fiddle

Upvotes: 20

Related Questions