Bootstrap 5 Images with Examples for Beginners

Any website depends heavily on images throughout its design. Your images combined with Bootstrap elements produce high-quality visual content, which improves user engagement. Bootstrap 5 offers quick implementation for image styling, which produces contemporary and elegant presentation results.

The following guide shows you how to decide on image shapes together with border functions, responsive abilities, and gallery development using Bootstrap’s basic classes.

Add Rounded Corners to Images

Want soft, rounded corners on your images? Easy!

Just add the class rounded to your image tag. Bootstrap will do the rest.

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Make Images Perfect Circles

Circle images are popular, especially for user photos or team sections.

Bootstrap’s class rounded-circle helps turn any square image into a perfect circle.

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Use Thumbnail Style

Want your image to look like a photo frame with padding and borders?

Use the class img-thumbnail. It adds a border, padding, and rounded corners automatically.

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Make Your Images Responsive

Responsive images are a must in today’s world. You want your images to scale and adjust on all screen sizes.

Just use img-fluid to make your image responsive.

<img src="img_chania.jpg" class="img-fluid" alt="Chania">

Build a Simple Image Gallery

Want to create a 3-column image gallery? You can do it with Bootstrap’s grid and thumbnail classes.

Here’s a real-world example:

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/images/lights.jpg">
        <img src="/images/lights.jpg" alt="Lights" class="img-fluid">
        <div class="caption">
          <p>Lights in the city</p>
        </div>
      </a>
    </div>
  </div>
  <!-- Add more columns here -->
</div>

Pro Tips for Better Images

1. Speed matters: Compress images with tools like TinyPNG.
2. Alt text: Always add descriptions (e.g., alt="sunset over lake").
3. Center images: Wrap in a text-center div:

<div class="text-center">  
  <img src="logo.jpg" class="rounded">  
</div>  

Bootstrap 5 Images Real World Examples

1. Bootstrap Profile Page

Combine shapes and responsiveness for a clean user profile:

<div class="row">  
  <div class="col-md-3 text-center">  
    <img src="user.jpg" class="rounded-circle img-fluid" alt="Sarah">  
  </div>  
  <div class="col-md-9">  
    <h2>Sarah Johnson</h2>  
    <p>Web Developer</p>  
  </div>  
</div>  

What this does:

• Circular avatar on the left.
• Details on the right.
• Works on all devices.

2. Bootstrap Portfolio Project Preview

Display multiple project screenshots in a clean and responsive grid.

<div class="row g-3">
  <div class="col-sm-6 col-lg-4">
    <img src="project1.jpg" class="img-fluid rounded" alt="Project 1">
  </div>
  <div class="col-sm-6 col-lg-4">
    <img src="project2.jpg" class="img-fluid rounded" alt="Project 2">
  </div>
  <div class="col-sm-6 col-lg-4">
    <img src="project3.jpg" class="img-fluid rounded" alt="Project 3">
  </div>
</div>

Use this for designers, developers, and photographers showcasing their work.

3. Responsive Blog Cover Image

This example shows a full-width blog image that resizes based on screen size.

<img src="blog-cover.jpg" class="img-fluid rounded" alt="Blog Cover">

Use this for blog posts, headers, or hero sections.

4. Product Gallery with Thumbnails

Perfect for eCommerce websites showing products in a clean gallery format.

<div class="row">
  <div class="col-md-4">
    <img src="product1.jpg" class="img-thumbnail" alt="Product 1">
  </div>
  <div class="col-md-4">
    <img src="product2.jpg" class="img-thumbnail" alt="Product 2">
  </div>
  <div class="col-md-4">
    <img src="product3.jpg" class="img-thumbnail" alt="Product 3">
  </div>
</div>

5. Team Member Profile Card (Circle Image)

This layout is great for the “Meet the Team” section on a company website.

<div class="text-center">
  <img src="team-member.jpg" class="rounded-circle img-fluid" alt="Team Member" width="150">
  <h5 class="mt-2">John Doe</h5>
  <p class="text-muted">Web Developer</p>
</div>

Use this for about pages, portfolios, or employee sections.

6. Team Section with Hover Effect

Use case: Company team member display.

<div class="row">  
  <div class="col-md-4 text-center">  
    <img src="team-1.jpg" class="img-fluid rounded-circle shadow mb-2" alt="Sarah Lee" style="width: 200px;">  
    <h3>Sarah Lee</h3>  
    <p class="text-muted">CEO</p>  
  </div>  
  <div class="col-md-4 text-center">  
    <img src="team-2.jpg" class="img-fluid rounded-circle shadow mb-2" alt="Mike Chen" style="width: 200px;">  
    <h3>Mike Chen</h3>  
    <p class="text-muted">CTO</p>  
  </div>  
</div>  

Key features:

• Consistent circular avatar
• shadow class adds depth
• Mobile-first grid layout

Your Turn! Try These

1. Add rounded corners to your blog images.
2. Create a 2-column gallery with thumbnails.
3. Embed a YouTube video with a 16:9 ratio.

Need help? Here’s a code starter for #2:

<div class="row">  
  <div class="col-md-6">  
    <img src="photo1.jpg" class="img-thumbnail" alt="Photo 1">  
  </div>  
  <div class="col-md-6">  
    <img src="photo2.jpg" class="img-thumbnail" alt="Photo 2">  
  </div>  
</div>  

Why This Matters

Good image design keeps visitors on your site longer. Bootstrap does the heavy lifting—you focus on creativity!

Final Thoughts

Through Bootstrap, you can effortlessly design image presentations on your website. A few classes from Bootstrap enable users to create round user photos along with convenient thumbnails and adaptable galleries.

Your site design will automatically be enhanced by adding these Bootstrap classes.

Want to try it out? Select one format from the above options to apply in your future image production.