Open In App

Bootstrap 5 Images

Last Updated : 10 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
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/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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:

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/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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:


Previous Article
Next Article

Similar Reads

Bootstrap 5 Images Aligning Images
Bootstrap 5 Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images. We can use the .mx-auto margin utility class to center the block-level images. Aligning Images used Classes: .float-start: This class is used to set the position of an element to left..float-end: This c
3 min read
Bootstrap 5 Images Responsive images
Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio. Responsive images used Class: .img-fluid: This class is use
2 min read
Bootstrap 4 | Images
Bootstrap offers different classes for images to make their appearance better and also to make them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without los
3 min read
How to display multiple horizontal images in Bootstrap card ?
Pre-requisite: Bootstrap Cards Bootstrap cards provide a flexible and extensible content container with multiple variants and options such as styling the Tables, stacking multiple images horizontally/vertically, making the stacked contents responsive, etc. Cards include so many options for customizing their backgrounds, borders, Header, footer, col
2 min read
How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
By default, Bootstrap 4 has various form features for radio buttons with images inline. Here HTML 5 has default validation features, However, for custom validation, we must use JavaScript or jQuery. The following approaches would help in the display validation message for radio buttons with images inline. Approach 1: First wrap the Radio buttons an
5 min read
Why card images use data-src (not src) for image in Bootstrap 4 ?
Bootstrap 4 card images use src in image tags to providing the location to be loaded in the given image tag and data-src to provide additional information that can be used by JavaScript for improving the users' experience. For data-src and src tag we can conclude as follows: src: If you want to load and display a particular image, then use .src to
3 min read
How to use grid for images in bootstrap card ?
Images can be added to the Bootstrap card by simply using an img tag. But we cannot use the same method directly to place an Image Grid into the Bootstrap Card as it will be lead to a misaligned design. Therefore, to get a per-flow to place image Grid into Bootstrap Card. The perfectly aligned grid we need to add some CSS to our HTML code. Approach
2 min read
How to put images in a box without space using Bootstrap?
Bootstrap 4 is a CSS a library for frontend web development developed by Twitter which helps the developer to beautify the way the webpage looks. The bootstrap library has pre-defined CSS classes that are easy to use and it helps the developer to provide an artistic look to the website with minimal effort. The following line shows the syntax for in
3 min read
How to make div that contains images to have fixed size using Bootstrap ?
In this article, we will see how we can make a div that will contain images having a fixed size. This can be very helpful when designing a webpage for displaying a certain type of product. We will use bootstrap to implement the solution for the above problem. Bootstrap CDN link: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.c
1 min read
How to align images in Bootstrap 4 ?
We know that adding images to a website makes it more attractive and presentable. Sometimes, we need to align the images either at the right or to the left. Most of the time, we place an image at the center. With traditional CSS, we had to write a bunch of code to accomplish this specific task. Bootstrap offers different classes for images to make
4 min read