→ Juan Antonio González Hernández
→ Cart Hero Pro

Cart Hero Pro

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

Tags: Card Hero

Author Juan Antonio González Hernández

1.1k

v.5.3

Fork Fullscreen

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
<div class="container py-5">

<div class="row">

<div class="col-md-6">

<div class="card border-0 shadow-sm">

<div class="image-viewer">

<img id="mainImage" src="https://images.unsplash.com/photo-1444881421460-d838c3b98f95?q=80&w=1080"
            data-bs-toggle="modal" data-bs-target="#zoomModal">

</div>

<div class="card-body">

<div class="row g-2">

<div class="col-3">
              <img src="https://images.unsplash.com/photo-1444881421460-d838c3b98f95?q=80&w=1080"
                class="img-thumbnail thumbnail">
            </div>

<div class="col-3">
              <img src="https://images.unsplash.com/photo-1434056886845-dac89ffe9b56?q=80&w=1080"
                class="img-thumbnail thumbnail">
            </div>

<div class="col-3">
              <img src="https://images.unsplash.com/photo-1495857000853-fe46c8aefc30?q=80&w=1080"
                class="img-thumbnail thumbnail">
            </div>

<div class="col-3">
              <img src="https://images.unsplash.com/photo-1451859757691-f318d641ab4d?q=80&w=1080"
                class="img-thumbnail thumbnail">
            </div>

</div>

</div>

</div>

</div>

<div class="col-md-6">
      <p>
        
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Logo_da_Rolex.png/1280px-Logo_da_Rolex.png"
          alt="Rolex" width="74" class="me-2">
      <h5>Por: Rolex</h5>
      </p>
      <h1 class="h2 mb-3">Reloj elegante edición clásica</h1>

<div class="mb-3">

<span class="h4 me-2">$299.99</span>
        <span class="text-muted text-decoration-line-through">$399.99</span>
        <span class="badge bg-danger ms-2">25% OFF</span>

</div>

<div class="mb-3 d-flex align-items-center">

<div class="text-warning rating me-2">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star-half-alt"></i>
        </div>

</div>

<p class="mb-4">
        La elegancia atemporal se combina con la funcionalidad moderna en este reloj clásico.
        Materiales premium, resistencia al agua y diseño sofisticado.
      </p>

<div class="mb-4">

<h6 class="mb-3">Color</h6>

<div class="d-flex gap-3">

<label>
            <input type="radio" name="color" class="color-input d-none" checked>
            <div class="color-option" style="background:silver"></div>
          </label>

<label>
            <input type="radio" name="color" class="color-input d-none">
            <div class="color-option" style="background:gold"></div>
          </label>

<label>
            <input type="radio" name="color" class="color-input d-none">
            <div class="color-option" style="background:black"></div>
          </label>

</div>

</div>

<div class="mb-4 d-flex align-items-center">

<label class="me-2">Cantidad:</label>

<select class="form-select w-auto">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>

</div>

<div class="d-grid gap-2">

<button class="btn btn-primary">
          <i class="fas fa-shopping-cart"></i> Agregar al carrito
        </button>

<button class="btn btn-outline-secondary">
          <i class="fas fa-balance-scale-right"></i> Comparar
        </button>

</div>

<div class="mt-4">

<div class="d-flex align-items-center mb-2">
          <i class="fas fa-truck text-primary me-2"></i>
          <span>Envío gratuito en pedidos superiores a $50</span>
        </div>

<div class="d-flex align-items-center mb-2">
          <i class="fas fa-undo text-primary me-2"></i>
          <span>30 días devolución</span>
        </div>

<div class="d-flex align-items-center">
          <i class="fas fa-shield-alt text-primary me-2"></i>
          <span>2 años de garantía</span>
        </div>

</div>

</div>

</div>

</div>

<div class="modal fade" id="zoomModal">

<div class="modal-dialog modal-lg modal-dialog-centered">

<div class="modal-content border-0">

<div class="modal-body p-0">

<img id="modalImage" style="width:100%;border-radius:10px">

</div>

</div>

</div>

</div>

More Examples

Personal Portfolio About Section

Author:
Creative Araf

4 months ago

501

v.5.3
Personal Portfolio --Portfolio Section

Author:
Creative Araf

4 months ago

468

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

4 months ago

431

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

3 months ago

927

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 months ago

662

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

7 months ago

3.3k

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

2.2k

v.4.6
Hero section with an image

Author:
Ankit khedkar

2 years ago

15.9k

v.5.3
Kategori Produk

Author:
java stories story

1 year ago

2.1k

v.5.3
Featured Product Card

Author:
Prajwal Hallale

2 years ago

4.1k

v.5.3
Category Tab

Author:
java stories story

1 year ago

1.8k

v.5.3
E-com Cart Page

Author:
Creative Araf

3 months ago

216

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2026 BootstrapExamples. All Rights Reserved.

v1.3