title: How to align thumbnails in center in bootstrap
body: <p>I am creating a small website using <code>bootstrap</code> and <code>angular.js</code> and stuck in thumbnails alignment. I am having three thumbnail and I want them centrally aligned. I have tried so many css properties but didn't get through it. Please help me out.Here is my code</p>
  
  <pre><code>&lt;div ng-controller = "ModuleController as module"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4 col-sm-4 text-center" ng-repeat="i in module.item" ng-hide="module.item.soldOut"&gt;
        &lt;img class="img img-responsive center-block" ng-src="{{i.images[0]}}" /&gt;&lt;br&gt;
        &lt;ul class="clearfix"&gt;
          &lt;li class="pull-left thumbnail" ng-repeat="image in i.images"&gt;
            &lt;a href=""&gt;&lt;img ng-src="{{image}}"/&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;span&gt; &lt;b&gt;{{i.name}}&lt;/b&gt; &lt;/span&gt;&lt;br&gt;
        &lt;span&gt; &lt;b&gt;{{i.price | currency : '&amp;#8377;' }}&lt;/b&gt; &lt;/span&gt;&lt;br&gt;
        &lt;span&gt; &lt;b&gt;{{i.description}} &lt;/span&gt;&lt;/b&gt; &lt;br&gt;&lt;br&gt;
        &lt;span&gt; &lt;button class="btn btn-primary" ng-show="i.canPurchase"&gt;Add to Cart&lt;/button&gt; &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, is the fiddle</p>
  
  <p><a href="https://jsfiddle.net/rajatgarg/vgknhc6f/1/" rel="nofollow noreferrer">https://jsfiddle.net/rajatgarg/vgknhc6f/1/</a></p>
  
  <p><a href="https://i.stack.imgur.com/Flsss.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Flsss.png" alt="enter image description here"></a></p>