How to align image in center of div bootstrap?
April 18, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Use the center-block Class
If the native width of the responsive image is smaller than the 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.
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.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>How to Align Responsive Image in Center in Bootstrap</title>
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="images/tree.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>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>In the above code, we have used .img-responsive .center-block .d-block .mx-auto method to align image in center of div.
Check the output of the above code example.
All the best 👍
