March 17, 2016

Bootstrap Image Align Center

Bootstrap Image Align Center : Sometimes we need images to keep in center of page. There are many approaches to to align center an image. Here in this tutorial we are going to explain few of them. We will explain this with example and demo.

Bootstrap Image Align Center Example

You can use the following method to align center the image.

Method 1 : Image align center Using the text-center Class

Using the text-center class you can align center the images. Here is an example –

Bootstrap Image Align Center : Example

<div class="row text-center">
  <img src="images/test.jpg">
</div>

Try it »

If you run the above example it will produce output like this –

Method 2 : Image align center Using the center-block Class

Using the center-block class you can align center the images. Just add this class to image which will make it centered align without any other class.

Bootstrap Image Align Center : Example

  <img src="images/test.jpg" class="center-block">

Try it »

If you run the above example it will produce output same as the first example.

You can use any of the method to align center the images.

Bootstrap Image Align Center