Centering images in Bootstrap using offsets

Question

At the top of a page using Bootstrap 3, I am trying to center 3 images by placing them in nested columns within an offset column. They do end up looking offset, but not centered (there is a jumbotron just beneath these images, and clearly they are not centered above the jumbotron). The offset column is has a width of 6, and is offset by 3 - yet is not centered.

Here is my code:

<div class="container">

  <div class="row">
    <div class="col-md-6 col-md-offset-3 center">

    <div class="row">
      <div class="col-md-2 text-center">
         <img src="images/nav_benefits.png" width="66" height="65" />
      </div>
      <div class="col-md-2 text-center">
         <img src="images/nav_benefits.png" width="66" height="65" />
      </div>
      <div class="col-md-2 text-center">
         <img src="images/nav_benefits.png" width="66" height="65" />
      </div>
    </div>
  </div>
</div>
</div>


<div class="container">
<div class="jumbotron">
      <h1>Hello World</h1>
      <p>Hello everybody</p>
    </div>
</div>

Answer 1

There are two ways you can achieve this. If you want to keep the offset, change the column that will do the nesting to 12:

 <div class="row">
<div class="col-md-12 col-md-offset-3 center">

<div class="row">
  <div class="col-md-2 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
  </div>
  <div class="col-md-2 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
  </div>
  <div class="col-md-2 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
  </div>
</div>
</div>
</div>

Another approach is to place two blank columns on either side.

<div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-4  text-center">
   <div class="row">
     <div class="col-md-4 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
     </div>
     <div class="col-md-4 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
     </div>
     <div class="col-md-4 text-center">
     <img src="images/nav_benefits.png" width="66" height="65" />
     </div>
   </div>
 </div>
<div class="col-md-4"></div>
</div>