Carrousel banner product

It's a carousel; clicking on its categories opens a banner with the product.

This bootstrap css example is contributed by Juan Antonio González Hernández, on 13-Mar-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Card Banner Carousel

Author Juan Antonio González Hernández

322

v.5.3

Fork Fullscreen

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#panaderia">
                  <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff">
                  <div class="category-title">Panadería</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#cafeteria">
                  <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085">
                  <div class="category-title">Cafetería</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#carniceria">
                  <img src="https://images.unsplash.com/photo-1607623814075-e51df1bdc82f">
                  <div class="category-title">Carnicería</div>
                </div>
              </div>

</div>
          </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#refrigeracion">
                  <img src="https://images.unsplash.com/photo-1586201375761-83865001e31c">
                  <div class="category-title">Refrigeración</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#supermercado">
                  <img src="https://images.unsplash.com/photo-1542838132-92c53300491e">
                  <div class="category-title">Supermercado</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#coccion">
                  <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba">
                  <div class="category-title">Cocción</div>
                </div>
              </div>

</div>
          </div>

</div>

</div>

</section>

<h2 class="banner-title mb-3">
                Equipos para Panadería
              </h2>

<p class="banner-text">
                Descubre hornos industriales, amasadoras y vitrinas diseñadas para mejorar
                la producción y calidad en tu panadería.
              </p>

</div>

<h5 class="fw-bold mb-3">
                    Horno de convección Digitop 10 bandejas
                  </h5>

<p class="text-muted mb-3">
                    Que la experiencia del panadero se refleje en cada pan. El horno de convección Digitop 10 bandejas
                    ofrece una cocción uniforme y eficiente, ideal para panaderías que buscan calidad y productividad.
                  </p>

<button class="btn btn-custom px-4 py-2 rounded-pill">
                      Ver producto
                    </button>

</div>

<h2 class="banner-title mb-3">
                Equipos para Cafetería
              </h2>

<p class="banner-text">
                Descubre maquinaria especializada para preparar el mejor café, desde molinillos hasta sistemas de
                servido profesional.
              </p>

</div>

<h5 class="fw-bold mb-3">
                    Cafetera automática Delecta La San Marco
                  </h5>

<p class="text-muted mb-3">
                    Que la experiencia del barista se refleje en cada taza. La cafetera automática Delecta La San Marco
                    ofrece una preparación de café de alta calidad, ideal para cafeterías que buscan impresionar a sus
                    clientes con cada servicio.
                  </p>

<button class="btn btn-custom px-4 py-2 rounded-pill">
                      Ver producto
                    </button>

</div>

<h2 class="banner-title mb-3">
                Equipos para Carnicería
              </h2>

<p class="banner-text">
                Descubre maquinaria especializada para preparar el mejor carne, desde cortadoras hasta sistemas de
                procesamiento profesional.
              </p>

</div>

<h5 class="fw-bold mb-3">
                    Rebanadora Kacier RK-300
                  </h5>

<p class="text-muted mb-3">
                    Que la experiencia del carnicero se refleje en cada corte. La rebanadora Kacier RK-300 ofrece un
                    corte preciso y eficiente, ideal para carnicerías que buscan calidad y productividad en su servicio.
                  </p>

<button class="btn btn-custom px-4 py-2 rounded-pill">
                      Ver producto
                    </button>

</div>

</div>
  </div>

More Examples

scroll animation image with title

Author:
Juan Antonio González Hernández

2 months ago

426

v.4.6
Hero slider

Author:
Juan Antonio González Hernández

1 month ago

700

v.5.3
Caraousel testimoni

Author:
java stories story

7 months ago

952

v.5.3
Product Card with Modal

Author:
java stories story

8 months ago

2.1k

v.5.3
Interactive image carousel using Bootstrap 5
Full-width carousel with automatically sliding images

Author:
Prajwal Hallale

2 years ago

3.6k

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

1 year ago

1.7k

v.4.6
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

4k

v.5.3
User Profile Card with Social Icons using Bootstrap 5

Author:
Anonymous

1 year ago

7.7k

v.5.3
Music speakers status

Author:
Jonathan

1 year ago

993

v.5.3
Bootstrap 5 Example : Hero Section + 3 Columns
Bootstrap is the world's most famous free CSS framework.

Author:
ARAFAT

1 week ago

61

v.4.6
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

3k

v.4.6
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

2 years ago

6.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent