Open In App

Bootstrap 5 Images

Last Updated : 29 Jul, 2024
Suggest changes
Share
Like Article
Like
Report

Bootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.

Types of Images:

TermDescription
Responsive imagesResize images according to parent element and screen sizes, maintaining aspect ratio.
Image thumbnailsAdd a 1px rounded border around the image. Represents a smaller version of a larger image.
Aligning imagesSet alignment of images using float or text alignment classes. .mx-auto can center block-level images.
Picture<picture> element specifying multiple <source> elements for a specific <img>.

Example 1: In this example, we will create a responsive image.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 5 Images</title>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </head>

    <body>
        <div class="container text-center">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>

            <h2>Bootstrap 5 Images</h2>

            <img
                src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
                class="img-fluid"
                alt="GFG"
            />
        </div>
    </body>
</html>

Output:

Screenshot-2024-07-29-at-10-57-33-42mjjxgwq---HTML---OneCompiler

Example 2: In this example, we will create a thumbnail image.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 5 Images</title>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </head>

    <body>
        <div class="container text-center">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>

            <h2>Bootstrap 5 Images</h2>

            <img
                src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                class="img-thumbnail"
                alt="GFG"
            />
        </div>
    </body>
</html>

Output:


P
ppatelkap
Article Tags :

Explore

Lightbox