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

Question

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

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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
big screens & normal screens
medium screens (ipad ext.)
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 ;)