CODEWITHSUNDEEP
csstwitter-bootstrap-3
Awais Imran
Awais Imran

Reputation: 1344

Bootstrap: Stop last columns under the second last column

I have three different height of the columns (lg-box, md-box and sm-box).I want to show the column #7 in the next line but not sure why it is filling the empty space and coming up under the column 6. It should show in the next line. It works fine when I have less than 7 or more than 8 columns but it creates a problem only when I have total 7 columns. Is possible to stop filling the empty space of column 6?

enter image description here

Here is the fiddle

HTML

<div class="col-xs-2 lg-box">1</div>
<div class="col-xs-2 lg-box">2</div>
<div class="col-xs-2 lg-box">3</div>
<div class="col-xs-2 lg-box">4</div>
<div class="col-xs-2 lg-box">5</div>
<div class="col-xs-2 md-box">6</div>
<div class="col-xs-2 sm-box">7</div>

CSS

.col-xs-2{
    border:2px solid white;
    box-sizing: border-box;
}
.lg-box{
    background-color: red;
    height: 200px;
}
.md-box{
    background-color: red;
    height: 120px;
}
.sm-box{
    background-color: green;
    height: 60px
}

Upvotes: 1

Views: 154

Answers (3)

Sean Gregory
Sean Gregory

Reputation: 621

EDIT: If you are concerned for support for older browsers in relation to this answer, please consider using a flexbox polyfill, like https://github.com/jonathantneal/flexibility

You also can use bootstrap's row class to declare new rows.

<div class="row">
  <div class="col-xs-2 lg-box">1</div>
  <div class="col-xs-2 lg-box">2</div>
  <div class="col-xs-2 lg-box">3</div>
  <div class="col-xs-2 lg-box">4</div>
  <div class="col-xs-2 lg-box">5</div>
  <div class="col-xs-2 md-box">6</div>
</div>
<div class="row">
   <div class="col-xs-2 sm-box">7</div>
</div>

https://jsfiddle.net/wumnLz96/1/

If you want to keep the dynamic number of columns, use a flex container to wrap them.

<div class="row">
  <div class="col-xs-2 lg-box">1</div>
  <div class="col-xs-2 lg-box">2</div>
  <div class="col-xs-2 lg-box">3</div>
  <div class="col-xs-2 lg-box">4</div>
  <div class="col-xs-2 lg-box">5</div>
  <div class="col-xs-2 md-box">6</div>
  <div class="col-xs-2 sm-box">7</div>
</div>

.col-xs-2{
    border:2px solid white;
    box-sizing: border-box;
}
.lg-box{
    background-color: red;
    height: 200px;
}
.md-box{
    background-color: red;
    height: 120px;
}
.sm-box{
    background-color: green;
    height: 60px
}
.row{ 
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

https://jsfiddle.net/wumnLz96/2/

Upvotes: 3

sasha_gud
sasha_gud

Reputation: 1735

Add clearfix before your last column like this:

<div class="clearfix visible-xs-block"></div>
<div class="col-xs-2 sm-box">7</div>

This will be clear and allow you to control clearfix visibility and so the number of columns for different media sizes.

See jsFiddle for example.

Upvotes: 0

tech2017
tech2017

Reputation: 1806

use clear to stop floating elements on left.

<div class="col-xs-2 sm-box" style="clear: left;">7</div>

Upvotes: 0

Related Questions