Advertisements
How to Align Responsive Image in Center in Bootstrap
Topic: Bootstrap / SassPrev|Next
Answer: Use the center-block Class
If the original width of the responsive image is smaller than containing element it will not cover the full width, which looks ugly on small screens like tables and mobile phones.
You can solve this problem to some extent by center aligning the responsive image through applying an addition class .center-block on it, along with the .img-responsive class in Bootstrap 3.
The .center-block class is however removed in Bootstrap 4, but you can still achieve the same effect using the classes .d-block and .mx-auto along with the .img-responsive class.
The following example will work in both Bootstrap 3 and 4 versions.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Responsive Image Align Center</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="images/125x125.jpg" class="img-responsive center-block d-block mx-auto" alt="Sample Image">
<p class="text-center">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to center buttons in Bootstrap
- How to align Bootstrap modal vertically center
- How to center a column in Bootstrap
Advertisements
