How to align thumbnails in center in bootstrap - html

Question

I am creating a small website using bootstrap and angular.js 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
<div ng-controller = "ModuleController as module">
<div class="row">
<div class="col-md-4 col-sm-4 text-center" ng-repeat="i in module.item" ng-hide="module.item.soldOut">
<img class="img img-responsive center-block" ng-src="{{i.images[0]}}" /><br>
<ul class="clearfix">
<li class="pull-left thumbnail" ng-repeat="image in i.images">
<img ng-src="{{image}}"/>
</li>
</ul>
<span> <b>{{i.name}}</b> </span><br>
<span> <b>{{i.price | currency : '₹' }}</b> </span><br>
<span> <b>{{i.description}} </span></b> <br><br>
<span> <button class="btn btn-primary" ng-show="i.canPurchase">Add to Cart</button> </span>
</div>
</div>
</div>
Here, is the fiddle
https://jsfiddle.net/rajatgarg/vgknhc6f/1/

Answer 1

You have the class "pull-left" on the thumbnail image in the html. Should be centered after you remove it.

Answer 2

You could use bootstrap's helper class: center-block.
I wrapped the images in a div - like below which seems to do the trick:
<div class="center-block">
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
</div>
</div>
See Docs - Running Demo below...
.col-md-4 {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-4 col-sm-4 text-center">
<img class="img img-responsive center-block" src="http://lorempixel.com/75/75/" />
<div class="row">
<br>
<div class="center-block">
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
<a href="#" class="">
<img src="http://lorempixel.com/50/50/" />
</a>
</div>
</div>
<span> <b>name</b> </span>
<br>
<span> <b>currency</b> </span>
<br>
<span> <b>description</b> </span>
<br>
<br>
<span> <button class="btn btn-primary">Add to Cart</button> </span>
</div>
</div>

Answer 3

Bootstrap columns have a default padding and floating and that why the columns aligned left. If you want to centered the div you have to remove your float like this
float:none; margin:0 auto;
Thanks