Bootstrap: seven same size columns in two rows

Question

Any idea on how to keep the same size for each column but center the second row...

(In another word, create a 1.5 column)

<div class="container""
    <div class="row">
        <div class="col-sm-3">
            1
        </div> <!-- close .col -->
        <div class="col-sm-3">
            2
        </div> <!-- close .col -->
        <div class="col-sm-3">
           3
        </div> <!-- close .col -->
        <div class="col-sm-3">
            4
        </div> <!-- close .col -->
    </div><!-- close .row-->
    <div class="row">
        <div class="col-sm-3 col-sm-offset-1">
            5
        </div> <!-- close .col -->
        <div class="col-sm-3">
            6
        </div> <!-- close .col -->
        <div class="col-sm-3">
            7
        </div> <!-- close .col -->
    </div><!-- close .row-->
</div><!-- close container -->

Answer 1

As you are essentially offsetting by 1.5, you can create your own offset class like this:

.col-sm-offset-1point5 {
    margin-left: 12.5%;
}

Note that 12.5% is one eighth of the width of a row which is your 1.5 column offset. Now apply it to your first column in the second row (replace col-sm-offset-1 with col-sm-offset-1point5)

Example here: http://www.bootply.com/1rBTZPGsYu

Answer 2

One other way is :

Bootply : http://www.bootply.com/NWkWutLI8M

CSS:

.centered{
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    float: none; 
  }

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            1
        </div> 
        <div class="col-sm-3">
            2
        </div> 
        <div class="col-sm-3">
           3
        </div> <!-- close .col -->
        <div class="col-sm-3">
            4
        </div>
    </div>
    <div class="row">
      <div class="col-xs-9 centered">
        <div class="row">

            <div class="col-sm-4">
                5
            </div>
            <div class="col-sm-4">
               6
            </div>
            <div class="col-sm-4">
                 7
            </div>
        </div>      
      </div>
    </div>
</div>