Menu
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
926
To remove the gutter space, all you need to do is add the no-gutter class beside row in your HTML markup. It's that simple!
You simply divide 100 by however many columns you need and then use that number in place of the 4 instances of width: 12.5%; in the code above (obviously, don't forget to update the class names to whatever number you are using).
You can get the 5 colums to wrap within the same . row using a clearfix break such as <div class="col-12"></div> or <div class="w-100"></div> every 5 columns. As of Bootstrap 4.4, you can also use the row-cols-5 class on the row ... Simple and right answer.
Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4 . Column width s are set in percentages, so they're always fluid and sized relative to their parent element.
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
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
