title: How to center an image within a col element in bootstrap 3+
body: <p>I've been struggling to center a few images since moving to Bootstrap 3. Previously, I'd use pagination-centered class on the whole col element but that does not work now. </p>
  
  <p>In addition, I've tried creating the class img-center to use margin: 0 auto (<a href="https://stackoverflow.com/questions/18462808/responsive-image-align-center-bootstrap-3">per the answer here</a>) but that is not working either and I'm unsure why. If someone can point me in the right direction, that would be great.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-10 col-md-offset-1"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;img class="img-center" src="images/chart_bw.png"&gt;
                      &lt;h3 class="text-center"&gt;Charts &amp; data&lt;/h3&gt;
                      &lt;p class="text-center"&gt;Polish your analytical skills by picking apart Marimekko, bar charts, regressions &amp; more&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- col-md-4 --&gt;
  
                  &lt;div class="col-md-4 pagination-centered"&gt;
                      &lt;img class="img-center" src="images/calculate_bw.png"&gt;
                      &lt;h3 class="text-center"&gt;Mental math&lt;/h3&gt;
                      &lt;p class="text-center"&gt;Nail your mental math by practicing on unlimited case style math problems&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- col-md-4 --&gt;
  
                  &lt;div class="col-md-4 pagination-centered"&gt;
                      &lt;img class="img-center" src="images/lightbulb_bw.png"&gt;
                      &lt;h3 class="text-center"&gt;Case problems&lt;/h3&gt;
                      &lt;p class="text-center"&gt;Structure problems and compare answers to suggestions from McKinsey consultants.&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- col-md-4 --&gt;
              &lt;/div&gt;&lt;!-- /.row --&gt;
          &lt;/div&gt; &lt;!-- col-md-10 --&gt;
      &lt;/div&gt;&lt;!-- /.row --&gt;
  &lt;/div&gt;&lt;!-- container --&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.img-center{
      margin: 0 auto;
  }
  </code></pre>