Code2care : TechZone Apps & Tutorials

How to Center Align Image in Bootstrap 3.0

Images are left aligned by default. One simple way it to warp the img tag with a
tags, but it is not recommended as center tags are deprecated.

If you want an image to be center aligned for bootstrap UI, you can make use of the class center-block

If you have a look at the center-block class in bootstrap.css then you may find,

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;

 <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Center Align image in bootstrap</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<script src="js/ie-emulation-modes-warning.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>


<div class="container">
<img src="" 
alt="Center Align image in bootstrap" 
class="img-rounded center-block">

<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>

Image Center Aligned in Bootstrap
Its the code that you can also use with other html elements as well to make then center aligned horizontally.


Posts related to bootstrap.

1. How to add hint text in bootstrap input text filed and text area

2. How to make jsfiddle bootstrap ready

3. Make Bootstrap Button look like a link

4. How to Center Align Image in Bootstrap

5. Right Align Text in Bootstrap framework

6. Align left align text in Bootstrap

7. Adding Sub Headings to Bootstrap Header tags

8. Simple Login Page using Bootstrap

9. Rounded Images in Bootstrap framework


Popular tags
x 175
x 29
x 20
x 14
x 14
x 14
x 13
x 11

1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy

Code2care © 2012-17