Q:

How to Align Responsive Image in Center in Bootstrap

mhmadesk
Save to bookmark
|
2022-05-19
|
  202 
Easy
0

How to Align Responsive Image in Center in Bootstrap

Bootstrap,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-19
need an explanation for this answer? contact us directly to get an explanation for this 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.

<!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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now