"TEST: Centering Everything in Bootstrap"
Bootstrap 3.2.0 Snippet by mrmccormack

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <h4>Default behavior (left justified)</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> <div> <img src="http://i.imgur.com/yxAxCaK.jpg" alt=""> </div> </div> <div class="col-md-4"> <h4>Center only image in div</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> <div class="text-center"> <img src="http://i.imgur.com/yxAxCaK.jpg" alt=""> </div> </div> <div class="col-md-4 text-center"> <h4>Center text and image in div</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> <div> <img src="http://i.imgur.com/yxAxCaK.jpg" alt=""> </div> </div> </div> <hr> <div class="row text-center"> <h4>Center text and image across page</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> <img src="http://i.imgur.com/yxAxCaK.jpg" alt=""> </div> <hr> <div class="row"> <h4>Image centered with tag and responsive</h4> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> <div> <img class="center-block img-responsive" src="http://i.imgur.com/yxAxCaK.jpg" alt=""> </div> </div>

Related: See More


Questions / Comments: