BSKIN 5 - Bootstrap 5 Card Page

loading....

Documentation

Card

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Basic card example

MENS WHITE WATCH

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

      <div class="card shadow">
      <img src="images/card-2.jpg" class="card-img-top img-fluid" alt="...">
      <div class="card-body bg-linear-gradient">
      <h4 class="card-title">MENS WHITE WATCH</h4>
      <p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere <i class="fas fa-long-arrow-alt-right ps-2"></i></a>
      </div>
      </div>

Basic card example

NEW LAPTOP

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

      <div class="card shadow">
      <img src="images/card-2.jpg" class="card-img-top img-fluid" alt="...">
      <div class="card-body">
      <h4 class="card-title">NEW LAPTOP</h4>
      <p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere <i class="fas fa-long-arrow-alt-right ps-2"></i></a>
      </div>
      </div>

Basic card example

MENS WHITE WATCH

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

      <div class="card shadow">
      <div class="curve">
      <img src="images/card-4.jpg" class="card-img-top" alt="...">
      </div>
      <div class="card-body">
      <h4 class="card-title">MENS WHITE WATCH</h4>
      <p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere <i class="fas fa-long-arrow-alt-right ps-2"></i></a>
      </div>
      </div>

Basic card example

NEW LAPTOP

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, pariatur accusantium officiis quaerat laborum, itaque rerum molestiae ea blanditiis

Card link Read More

      <div class="card shadow">
      <div class="curve-2">
      <img src="images/card-4.jpg" class="img-fluid" alt="...">
      </div>
      <div class="card-body">
      <h4 class="card-title">NEW LAPTOP</h4>
      <p class="card-text mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, pariatur accusantium officiis quaerat laborum, itaque rerum molestiae ea blanditiis </p>
      </div>
      <div class="card-footer d-flex justify-content-between">
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Read More</a>
      </div>
      </div>