csstwitter-bootstrapstylesrow

how can to center overflow columns of bootstrap row?

I want to center every element of a boostrap row that overflows, for example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
</div>

So this row has 6 columns and then overflows in 3 columns. I want that the last three columns align in the center, like margin: auto (see example image). I'd like to use a single style for the row.

Image of what I have now and what I want to achieve:

Image on Imgur

Solution

  • Just add the class justify-content-center to your, row as described in the grid system documentation of BS4, in section #Horizontal alignment.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
  .col-lg-2 {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    font-size: 150%;
    &:nth-child(odd) { background: #77E4C8; }
    &:nth-child(even) { background: #36C2CE; }
  }
</style>

<div class="row justify-content-center">
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
  <div class="col-lg-2"> .col-lg-2 </div>
</div>