Bootstrap Images

Bootstrap images are normal HTML images enhanced with Bootstrap utility classes.

<img src="image.jpg"
alt="Example Image">

Bootstrap does not require a special image element. Instead, you add Bootstrap classes to the normal HTML <img> element.

Before using Bootstrap image utilities, remember the basic HTML image syntax.

<img src="photo.jpg"
alt="Student Photo">

The src attribute specifies the image location and the alt attribute provides alternative text.

The .img-fluid class makes an image responsive.

<img src="image.jpg"
class="img-fluid"
alt="Responsive Image">

A responsive image automatically scales down when the available width becomes smaller.

.img-fluid {
    max-width: 100%;
    height: auto;
}

A large fixed-size image can cause horizontal scrolling on smaller screens.

Responsive images help the image fit inside its available container.

<div class="container">

    <img src="course.jpg"
    class="img-fluid"
    alt="Course">

</div>

This is especially useful for mobile-friendly websites.

The following example demonstrates a responsive image.

<img src="student.jpg"
class="img-fluid"
alt="Student">

Resize the browser window to see how the image adapts to the available width.

The .rounded class adds rounded corners to an image.

<img src="image.jpg"
class="rounded"
alt="Rounded Image">

Rounded corners can make images look softer and more polished.

The .rounded-circle class makes a square image appear circular.

<img src="profile.jpg"
class="rounded-circle"
alt="Profile Photo">

This is commonly used for profile pictures and user avatars.

The .img-thumbnail class gives an image a bordered thumbnail appearance.

<img src="image.jpg"
class="img-thumbnail"
alt="Thumbnail">

Thumbnails are useful when you want an image to look like a small preview.

You can combine multiple Bootstrap classes on the same image.

<img src="image.jpg"
class="img-fluid rounded"
alt="Responsive Rounded Image">

Here, img-fluid makes the image responsive and rounded adds rounded corners.

You can combine .img-fluid and .img-thumbnail.

<img src="image.jpg"
class="img-fluid img-thumbnail"
alt="Responsive Thumbnail">

This provides a responsive image with thumbnail styling.

Bootstrap text alignment utilities can be used to position images inside suitable containers.

<div class="text-start">

    <img src="image.jpg"
    class="img-fluid"
    alt="Image">

</div>

Use .d-block together with .mx-auto to center a block-level image.

<img src="image.jpg"
class="img-fluid d-block mx-auto"
alt="Centered Image">

The mx-auto utility applies automatic horizontal margins.

Bootstrap provides .float-start and .float-end utilities for floating elements.

<img src="image.jpg"
class="img-fluid float-start me-3"
alt="Image">

Floating can be useful for wrapping text around an image, although modern layouts often use Flexbox or Grid for more predictable layouts.

The .float-end utility moves an image toward the end side of its container.

<img src="image.jpg"
class="img-fluid float-end ms-3"
alt="Image">

Use this technique carefully and test the result on smaller screens.

Images are frequently used at the top of Bootstrap cards.

<div class="card">

    <img src="course.jpg"
    class="card-img-top"
    alt="Course Image">

    <div class="card-body">

        <h5 class="card-title">
        Web Development
        </h5>

        <p class="card-text">
        Learn web development.
        </p>

    </div>

</div>

Web Development

Learn web development.

You can place an image below the card content using .card-img-bottom.

<div class="card">

    <div class="card-body">

        <h5 class="card-title">
        Course
        </h5>

        <p class="card-text">
        Course description.
        </p>

    </div>

    <img src="course.jpg"
    class="card-img-bottom"
    alt="Course">

</div>

Images can be placed inside Bootstrap grid columns.

<div class="row">

    <div class="col-md-6">

        <img src="image.jpg"
        class="img-fluid"
        alt="Image">

    </div>

    <div class="col-md-6">

        <p>
        Image description.
        </p>

    </div>

</div>

On smaller screens, the columns can stack according to the Bootstrap grid breakpoint used.

Bootstrap width utilities can be used to control the width of an image relative to its container.

<img src="image.jpg"
class="w-100"
alt="Full Width Image">

The w-100 utility sets the element width to 100%.

Bootstrap also provides height utilities such as h-100. However, setting a fixed height does not automatically make an image look correct because the image's aspect ratio may be affected by the available space.

<div style="height:200px;">

    <img src="image.jpg"
    class="h-100"
    alt="Image">

</div>

When controlling image dimensions, consider the image's aspect ratio and the layout requirements.

When an image must fit into a fixed-size area, CSS object-fit can be useful.

<img src="image.jpg"
style="width:100%; height:200px; object-fit:cover;"
alt="Course Image">

object-fit: cover allows an image to fill the specified area while maintaining its aspect ratio, although some parts of the image may be cropped.

The alt attribute provides alternative text for an image.

<img src="student.jpg"
class="img-fluid"
alt="Student attending a computer class">

If the image cannot be displayed, the alternative text can provide useful information about the image.

If an image is purely decorative and provides no meaningful information, its alternative text can be empty.

<img src="decoration.png"
alt="">

An empty alt value helps assistive technologies treat the image as decorative.

Bootstrap's grid can be used to create a responsive image gallery.

<div class="row g-3">

    <div class="col-6 col-md-4">
        <img src="image1.jpg"
        class="img-fluid rounded"
        alt="Image 1">
    </div>

    <div class="col-6 col-md-4">
        <img src="image2.jpg"
        class="img-fluid rounded"
        alt="Image 2">
    </div>

    <div class="col-6 col-md-4">
        <img src="image3.jpg"
        class="img-fluid rounded"
        alt="Image 3">
    </div>

</div>

A circular responsive image is commonly used for user profile photos.

<img src="profile.jpg"
class="img-fluid rounded-circle"
alt="User Profile"
style="width:150px;height:150px;object-fit:cover;">

Combining responsive images with cards is useful for course and product layouts.

<div class="card">

    <img src="course.jpg"
    class="card-img-top img-fluid"
    alt="Course">

    <div class="card-body">

        <h5 class="card-title">
        Python Course
        </h5>

        <p class="card-text">
        Learn Python programming.
        </p>

        <a href="#"
        class="btn btn-primary">
        Learn More
        </a>

    </div>

</div>

Python Course

Learn Python programming.

Learn More

Some common mistakes when working with images include:

• Using very large images without optimization.
• Forgetting meaningful alt text.
• Using fixed dimensions that cause distortion.
• Ignoring mobile screen sizes.
• Using too many decorative images.
• Stretching images without considering their aspect ratio.

Images should be accessible and meaningful to users of assistive technologies.

• Use descriptive alt text for informative images.
• Use alt="" for purely decorative images when appropriate.
• Do not communicate essential information through an image alone.
• Maintain sufficient contrast around images when needed.
• Do not make text inside images the only source of important information.

Important Bootstrap image-related classes include:

.img-fluid
.img-thumbnail
.rounded
.rounded-circle
.rounded-pill
.float-start
.float-end
.d-block
.mx-auto
.w-100
.card-img-top
.card-img-bottom

These classes can be combined with Bootstrap's grid and utility classes to create responsive image layouts.

Here is a practical course gallery using Bootstrap's responsive grid and image utilities.

<div class="row g-4">

    <div class="col-6 col-md-3">

        <img src="html.jpg"
        class="img-fluid rounded"
        alt="HTML Course">

        <p class="text-center mt-2">
        HTML
        </p>

    </div>

    <div class="col-6 col-md-3">

        <img src="css.jpg"
        class="img-fluid rounded"
        alt="CSS Course">

        <p class="text-center mt-2">
        CSS
        </p>

    </div>

</div>

HTML

CSS

JavaScript

Python

The following example combines a responsive image, rounded corners, badge, card content, and button.

<div class="card" style="max-width:400px;">

    <img src="course.jpg"
    class="card-img-top img-fluid"
    alt="Web Development Course">

    <div class="card-body">

        <span class="badge text-bg-success">
        Popular
        </span>

        <h5 class="card-title mt-2">
        Web Development
        </h5>

        <p class="card-text">
        Learn HTML, CSS, JavaScript and Bootstrap.
        </p>

        <a href="#"
        class="btn btn-primary">
        View Course
        </a>

    </div>

</div>

Popular

Web Development

Learn HTML, CSS, JavaScript and Bootstrap.

View Course