CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Neek
Neek

Reputation: 101

how to create 8 even columns in Bootstrap 3 with out gutter

I'm trying to create a custom row which has 8 logos sat in even columns at the bottom of a page when sat at full size desktop (lg) I need them to work responsively.

I've tried a few options - 2 cols with 4 cols nested and 4 cols with 2 cols nested... the problem I have is the gutter creates extra spacing between columns which means the logos won't space evenly. Any experts have a better idea how I could place 8 logos spaced evenly in a row? perhaps creating a new 8 col custom grid?

Any help would be great.

Thanks N

Upvotes: 10

Views: 12813

Answers (5)

Carol Skelly
Carol Skelly

Reputation: 362620

Bootstrap 3

How about using a list-inline with 4 columns of 2 like this..

  <ul class="list-inline row"> 
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
  </ul>

Demo: http://bootply.com/90906

Bootstrap 4

Since Bootstrap 4 is flexbox, any number of equal width columns is now possible using the auto-layout grid..

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
    </div>
</div>

Demo: http://www.codeply.com/go/AOVGoJncei

Upvotes: 10

Sagive
Sagive

Reputation: 1827

Its Simple... Just add another column to your css.
Its best not to edit bootstrap CSS (and use a cdn).

So... We need to create the column css for all screen types.
I usually address 3 screen sizes which means creating 3 css sets for this column

  1. big screens & normal screens
  2. medium screens (ipad ext.)
  3. small screens (mobile phones ext.)

Decision time:
Since we are talking about 8 columns which is a lot
its best to go with these css rules (in my opinion)

i almost always use a .container class for my designs which
makes big screen mode suitable in tablet unless in portrait mode.

In short, Here are a good set of css rules 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    eight-col {width: 50%; padding: 0 15px;}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    eight-col {width: 20%; padding: 0 15px;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    eight-col {float: left; width: 12.5%; margin: 0; padding: 0 5px;}
}

Please note:
i play around with padding as i see fit. Its best to leave some extra padding when in mobile mode but you can play around with it ;)

Upvotes: 0

Francis Booth
Francis Booth

Reputation: 676

Extending on my answer here: https://stackoverflow.com/a/25023129/2266157

Here is a demonstration of an eight-wide Bootstrap row structure, with

Equal padding (i.e. column gutters)...

<div class="container">
  <h2>No padding (.no-pad) on outermost columns (.col-md-6)<br></h2>

  <h3>Then nested columns can have padding...</h3>
  <div class="row no-pad">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
  </div>
</div>

...or indeed no column gutters.

<div class="container">    
  <h3>...or not</h3>
  <div class="row no-pad">
    <div class="col-md-6">
      <div class="row no-pad">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row no-pad">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
  </div>
</div>

This CSS is required in addition to Bootstrap

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

Here is a working demo:
http://www.bootply.com/eWWpj3G9tL



And the logo centring

To position the logos, I'd either use an <img class="img-responsive"> or if they're smaller than the column width then you could CSS center them with text-align:center (or the bootstrap class text-center placed on the .col-*) or using the following CSS:

#logos img {
    display:block;
    margin:0 auto;
}

Upvotes: 4

BENARD Patrick
BENARD Patrick

Reputation: 30985

2 columns 6 with each 4 colums 3 inside row-fluid

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
        </div>
    </div>
    <div class="col-md-6">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
        </div>      
    </div>
</div>

Upvotes: 8

Sir Kettle
Sir Kettle

Reputation: 127

Sounds like this is for a specific module so I would just create a simple new grid for this...

.eightLogos .logo {
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0;
}

Upvotes: 1

Related Questions