BFalcon BFalcon - 4 months ago 19
HTML Question

Bootstrap Grid Overflow Center

Using the Bootstrap Grid I have made row with 11 logos. Each of the 11 have the class="col-md-2 col-xs-4", meaning 2 rows for "md" and 4 rows for "xs".

Is it even possible to center the final row? Am I misunderstanding the grid?

Answer

For example, you can use offsetting columns.
Please check the result. Is it what you want to achieve?

responsive layout

https://jsfiddle.net/glebkema/r98pj2s8/

.logos img {
  height: auto;
  margin-top: 20px;
  max-width: 100%;
}
.logos .row {
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container logos">
  <div class="row">
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/c69/f9c/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/9c6/cf9/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/69c/9cf/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/3cc/6ff/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/c69/f9c/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/9c6/cf9/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2 col-md-offset-1"><img src="//placehold.it/80x80/69c/9cf/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/3cc/6ff/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/c69/f9c/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2 col-md-offset-0 col-xs-offset-2"><img src="//placehold.it/80x80/9c6/cf9/?text=logo" alt=""></div>
    <div class="col-xs-4 col-md-2"><img src="//placehold.it/80x80/69c/9cf/?text=logo" alt=""></div>
  </div>
</div>