Open In App

Bootstrap 4 Images

Last Updated : 11 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts.

The different classes available in Bootstrap for images are explained below:

Table of Content

Responsive Images

The .img-fluid class is used within the <img> tag to create the responsive image. The responsive image is used to adjust the image automatically to the specified box. 

Syntax:

<img src="image_source" class="img-fluid" ...>

Example: In this example we demonstrates Bootstrap 4's responsive image feature, using the 'img-fluid' class to ensure the image scales appropriately based on screen size.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .custom-img {
            width: 600px !important;
            height: 180px !important;
        }
    </style>
</head>

<body style="text-align:center;">
    <div class="container">
        <h2>Responsive Image</h2>
        <img class="img-fluid custom-img"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611121643/responsive-image.png"
            alt="Responsive image" />
    </div>
</body>

</html>

Output:

Bootstrap-image-responsive-3

Rounded Corners Image

The .rounded class is used to create a rounded corner image. This class is used with <img> tag.

Syntax:

<img src="image_source" class="rounded" ...>

Example: In this example we use Bootstrap 4's 'rounded' class to create a rounded corner image, providing a visually appealing presentation for the image element.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body style="text-align:center;">
    <div class="container">
        <h2>Rounded Corner Image</h2>
        <img class="rounded"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611122859/
 responsiveImageOutput.png"
            alt="Responsive image" 
            width="367" 
            height="340" />
    </div>
</body>

</html>

Output:

Rounded-Corner-Image
Rounded Corner Image Example Output

Circle Image

The .rounded-circle class is used to create the circle shape image. 

Syntax:

<img src="image_source" class="rounded-circle" ...>

Example: In this example we are using Bootstrap 4's rounded-circle class to render a circular image, offering a visually distinct presentation for the image element.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body style="text-align:center;">
    <div class="container">
        <h2>Circle Image</h2>
        <img class="rounded-circle" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611122859/
responsiveImageOutput.png"
             alt="Responsive image" 
             width="467" 
             height="340" />
    </div>
</body>

</html>

Output:

Circle-Image
Circle Image Example output

Thumbnail Image

The .img-thumbnail class is used to create a thumbnail (bordered) image. 

Syntax:

<img src="image_source" class="img-thumbnail" ...>

Example: In this example we are using Bootstrap 4's img-thumbnail class to display a thumbnail image, providing a bordered and visually highlighted presentation for the image element.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body style="text-align:center;">
    <div class="container">
        <h2>Thumbnail Image</h2>
        <img class="img-thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
            alt="Responsive image" 
            width="467" 
            height="340" />
    </div>
</body>

</html>

Output:

Thumbnail-Image
Thumbnail Image Example Output

Aligning Image

The .float-left and .float-right class is used to set the left and right alignment of the image.

Syntax:

<img src="image_source" class="float-left/float-right" ...>

Example: In this example we are using Bootstrap 4's float-left and float-right classes to align images to the left and right sides, respectively, within the container.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body style="text-align:center;">
    <div class="container">
        <h2>Aligning Image</h2>
        <!-- Bootstrap float-left class -->
        <img class="float-left" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
            alt="Responsive image" 
            width="250" 
            height="250" />
        <!-- Bootstrap float-right class -->
        <img class="float-right" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
            alt="Responsive image" 
            width="250" 
            height="250" />
    </div>
</body>

</html>

Output:

Aligning-Image
Aligning Image Example Output

Centered Image

The .mx-auto (margin:auto) and .d-block (display:block) classes are used to set the image into center.

Syntax:

<img src="image_source" class="mx-auto d-block" ...>

Example: In this example we are using Bootstrap 4's mx-auto and d-block classes to horizontally center an image within the container.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h2 style="text-align:center;">Centered Image</h2>
        <img class="mx-auto d-block" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240611123517/image.png"
            alt="Responsive image" 
            />
    </div>
</body>

</html>

Output:

Centered-Image
Centered Image Example Output

Next Article
Bootstrap 4 | Tables

D
dharmendra_kumar
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox