WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
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.

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

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.