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

Responsive 3 cards – transparent pricing table using only html and css is an attractive design solution that improves the navigation.
| | |

3 Cards Responsive Transparent Pricing Table Using HTML and CSS (Free Source Code)

To develop an attractive and efficient professional pricing table is crucial while marketing services or products. Responsive 3 cards – transparent pricing table using only html and css is an attractive design solution that improves the navigation. Here in this tutorial, I will offer you the free source code that you can use to create…

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

Interactive Media Control Checkbox (Free Source Codes)
| | |

Interactive Media Control Checkbox Using HTML and CSS (Free Source Code)

The Interactive Media Control Checkbox converts ordinary checkboxes into dynamic UI elements which users prefer to use. This checkbox serves juniors for coding tasks because it creates media control interfaces from only HTML and CSS elements. The released code operates as an open-source, featuring good programming design for enhancing web component libraries and UI library…

The Modern 3D Biometric Toggle Switch Using HTML and CSS presents an attention-grabbing advanced user interface component that supplies futuristic visual appeal to your website.
| | | |

Modern 3D Biometric Toggle Switch Using HTML and CSS (Free Source Code)

The Modern 3D Biometric Toggle Switch Using HTML and CSS presents an attention-grabbing advanced user interface component that supplies futuristic visual appeal to your website. The interface displays biometric functionality through its 3D effect and smooth transition animations. You can easily integrate this project feature through free source code that meets programming best practices from…

Dropdown Sidebar Menu
| | |

Dropdown Sidebar Menu in HTML, CSS and JavaScript

A dropdown sidebar menu is a wonderful and elegantly looking implementation that facilitates comfortable navigation through several sections using a single menu. Dropdowns allow the user to click on a menu item and opt to see more links beyond the main areas without complicating its appearance. Today, I’ve written and shared the full length source…

Leave a Reply

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