How to create image gallery in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create an Image Gallery in Bootstrap Quickly

To create an image gallery in Bootstrap, use the container with row and col classes to arrange images in a grid. Wrap images inside card components or use img-fluid class for responsive images. This setup ensures a neat, responsive gallery that adjusts to different screen sizes.

📐

Syntax

Use a container to hold the gallery. Inside it, create a row to organize columns. Each image goes inside a col with a size like col-md-4 to make three images per row on medium screens. Use img-fluid on images to make them scale nicely.

container: wraps the whole gallery
row: creates a horizontal group of columns
col-md-4: sets column width for medium screens (3 per row)
img-fluid: makes images responsive

html

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="image1.jpg" class="img-fluid" alt="Image 1">
    </div>
    <div class="col-md-4">
      <img src="image2.jpg" class="img-fluid" alt="Image 2">
    </div>
    <div class="col-md-4">
      <img src="image3.jpg" class="img-fluid" alt="Image 3">
    </div>
  </div>
</div>

Output

A row with three images side by side, each scaling to fit the column width.

💻

Example

This example shows a simple responsive image gallery with six images arranged in two rows of three. Each image is inside a card for a neat border and shadow effect.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Image Gallery</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-4">
    <h1 class="mb-4">Image Gallery</h1>
    <div class="row g-3">
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/600x400?text=Image+1" class="card-img-top img-fluid" alt="Image 1">
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/600x400?text=Image+2" class="card-img-top img-fluid" alt="Image 2">
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/600x400?text=Image+3" class="card-img-top img-fluid" alt="Image 3">
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/600x400?text=Image+4" class="card-img-top img-fluid" alt="Image 4">
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/600x400?text=Image+5" class="card-img-top img-fluid" alt="Image 5">
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <img src="https://via.placeholder.com/600x400?text=Image+6" class="card-img-top img-fluid" alt="Image 6">
        </div>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage showing a neat gallery of six images arranged in two rows with three images each, each image inside a card with subtle shadow and spacing.

⚠️

Common Pitfalls

Common mistakes when creating a Bootstrap image gallery include:

Not using img-fluid, causing images to overflow their columns.
Forgetting to wrap images in row and col classes, breaking the grid layout.
Using fixed image sizes instead of responsive classes, which breaks mobile views.
Not adding alt text for accessibility.

Always test your gallery on different screen sizes to ensure responsiveness.

html

<!-- Wrong: Missing img-fluid -->
<div class="col-md-4">
  <img src="image.jpg" alt="Image">
</div>

<!-- Right: With img-fluid -->
<div class="col-md-4">
  <img src="image.jpg" class="img-fluid" alt="Image">
</div>

Output

The first image may overflow or not resize properly; the second image scales nicely within its column.

📊

Quick Reference

Tips for building Bootstrap image galleries:

Use container and row to structure your gallery.
Use col-* classes to control how many images per row.
Always add img-fluid to images for responsiveness.
Wrap images in card components for better styling.
Include alt attributes for accessibility.

✅

Key Takeaways

Use Bootstrap's grid system with container, row, and col classes to arrange images.

Add the img-fluid class to images to make them responsive and fit their columns.

Wrap images in cards for neat borders and shadows to enhance gallery appearance.

Always include alt text on images for accessibility.

Test your gallery on different screen sizes to ensure it looks good everywhere.