How to Center Align Image in Bootstrap


Images are left-aligned by default. One simple way it to warp the img tag with 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;
}

Demo html code:

<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="container">
<img src="http://code2care.org/tools/images/code2care-logo.png" 
alt="Center Align image in bootstrap" 
class="img-rounded center-block">
</div>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>

Output:

Image Center Aligned in Bootstrap
Image Center Aligned in Bootstrap





Recent Posts:
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.