Do you need a clean and stylish image gallery for your website? You will find a Bootstrap Responsive Filterable Image Gallery Using HTML, CSS, and JavaScript in this post.

Bootstrap Responsive Filterable Image Gallery Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Do you need a clean and stylish image gallery for your website? You will find a Bootstrap Responsive Filterable Image Gallery Using HTML, CSS, and JavaScript in this post.

You can find the entire source code free of charge, and developers followed best programming practices during its creation. The gallery serves users from beginner coding levels up through junior developers with its simple functionality.

GitHub Source: Bootstrap Responsive Filterable Image Gallery

Features of Bootstrap Responsive Filterable Image Gallery

  • Custom styling: Modify colors and effects easily.
  • Dynamic filtering: Switch categories with a single click.
  • Filter Buttons: You can filter images by category using simple buttons.
  • Mobile-friendly layout: Works on all screen sizes.
  • Easy setup: No complex coding needed.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • Bootstrap (5.3.3)
  • JS (JavaScript)

Recommended for You

Video Preview

Video thumbnail Watch on YouTube

Steps to Build a Bootstrap Image Gallery

The implementation of this project requires HTML, CSS, JavaScript, and Bootstrap as technologies. The provided code is ready for direct transfer to your current project files. Start working on the code either through VS Code or any available code editor. First adjust the content and then swap the images before restyling according to needs. It’s simple and beginner-friendly.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <!-- Developed by Shokat Javed at JVCodes.com -->
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap Responsive Filterable Image Gallery - JV Codes</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <!-- Images Filter Buttons Section -->
      <div class="row mt-5" id="filter-buttons">
        <div class="col-12">
          <button class="btn mb-2 me-1 active" data-filter="all">Show all</button>
          <button class="btn mb-2 mx-1" data-filter="nature">Nature</button>
          <button class="btn mb-2 mx-1" data-filter="cars">Vehicles</button>
          <button class="btn mb-2 mx-1" data-filter="people">People</button>
        </div>
      </div>

      <!-- Filterable Images / Cards Section -->
      <div class="row px-2 mt-4 gap-3" id="filterable-cards">
        <div class="card p-0" data-name="nature">
          <img src="images/nature-1.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Mountains</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="nature">
          <img src="images/nature-2.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Lights</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="nature">
          <img src="images/nature-3.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Nature</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="cars">
          <img src="images/car-1.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Retro</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="cars">
          <img src="images/car-2.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Fast</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="cars">
          <img src="images/car-3.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Classic</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="people">
          <img src="images/people-1.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Men</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="people">
          <img src="images/people-2.jpg" alt="img" />
          <div class="card-body">
            <h6 class="card-title">Girl</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

Here is the complete code for style.css file to style the Bootstrap image gallery:

/* Developed by Shokat Javed at JVCodes.com */

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: #f1f1f1 !important;
}

body .container {
  max-width: 1100px;
}

#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards .card {
  width: 15rem;
  border: 2px solid transparent;
}

#filterable-cards .card.hide {
  display: none;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}

JavaScript

Here is the complete code for script.js file to function Bootstrap image gallery:

// Developed by Shokat Javed at JVCodes.com
// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");

// Function to filter cards based on filter buttons
const filterCards = (e) => {
    document.querySelector("#filter-buttons .active").classList.remove("active");
    e.target.classList.add("active");

    filterableCards.forEach(card => {
        // show the card if it matches the clicked filter or show all cards if "all" filter is clicked
        if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
            return card.classList.replace("hide", "show");
        }
        card.classList.add("hide");
    });
}

filterButtons.forEach(button => button.addEventListener("click", filterCards));

Download Source Code

The complete source code for download exists below the button. You can access this code for free because it is open-source without any copyright complications.

Download Source Code

Conclusion

Implementation of the Bootstrap Responsive Filterable Image Gallery Using HTML, CSS, and JavaScript, add an interactive feature to your website while making it simpler for users to navigate. This feature makes an excellent supplement for personal use and professional work.

Choose this project for your portfolio, while you should credit JV Source Codes by implementing a linkback. The YouTube channel offers additional content available for subscribers. Feel free to contact me through comments whenever you encounter issues, and I will provide support.

Download JV Source Codes

Review our additional Material UI elements, including forms, cards, galleries, and footers accompanied by menus and hero sections.

The development of skills becomes easier through programming tasks such as agency websites, travel websites, food websites, calculators, converters, and basic HTML games.

Similar Posts

Do you need an eye-catching and professional Modern Marketing Agency Website Template that will perfectly work on any device?
| | | | | | |

Modern Marketing Agency Website Template Using HTML, CSS, and JavaScript (Free Source Code)

Do you need an eye-catching and professional Modern Marketing Agency Website Template that will perfectly work on any device? Here is a free source code that I have written and complies with the recommended standards. This marketing agency template is designed using HTML, CSS, and JavaScript which makes it perfect for the digital agencies, startups…

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 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,…

Smooth Image Slider JV Source Codes
| | | | | | | |

Smooth Image Slider in HTML, CSS and JavaScript

Website design plays a crucial role in ensuring that people pay attention to the site and remain on the page. One of the features that can help beautify any website is a smooth image slider. Well In this article, I’m going to share with you free source codes to build the Smooth Image Slider in…

In this article, I am going to share free source codes with you to develop Tic Tac Toe Game Using HTML, CSS, and JavaScript.
| | | | | | |

Tic Tac Toe Game Using HTML, CSS, and JavaScript (Free Source Code)

Tic Tac Toe is perhaps one of the most common two players’ game. Playful but not simple; that is the extent of the complexity in undertaking this project for web development. In this article, I am going to share free source codes with you to develop Tic Tac Toe Game Using HTML, CSS, and JavaScript….

Using a JavaScript cheat sheet serves as a useful tool for both learning and coding purposes.

JavaScript Cheat Sheet

JavaScript serves as a vital language for establishing responsive online web interfaces. Dynamic websites become possible through JavaScript since it enables a response to user-triggered actions. Using a JavaScript cheat sheet is beneficial for learning and coding. The main concepts find their way to easy access in one location. As a first-timer or professional developer,…

2 Comments

  1. I was recommended this website by my cousin. I’m not sure whether this
    post is written by him as nobody else know such detailed about my problem.
    You’re incredible! Thanks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *