CARD VIEW

BERLIN SHANE AISHWARYA L August 29, 2024

 

Bootstrap 4: Exploring Card View and Carousel

Card View in Bootstrap 4

Definition

The Card component in Bootstrap 4 is a flexible and extensible content container that can include a variety of content types like text, images, links, and more. Cards can be customized with headers, footers, and various content layouts, making them versatile elements for designing user interfaces.


Example Code

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">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</a>
  </div>
</div>

Card Header, Footer, Title, Links

  • Card Header: Adds a header to your card.
  • Card Footer: Adds a footer to your card.
  • Card Title: Highlights the main title within your card.
  • Links and Buttons: Add interactivity to your card.
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Styling Links and Images

  • Card Images: Use .card-img-top or .card-img-bottom to place images within cards.
  • Card Links: Use the .card-link class to add links to cards.
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some example text to build on the card title.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Advanced Card Layouts

Card Deck


A card deck is a group of cards that are aligned in a row with equal width.

<div class="card-deck">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title 1</h5>
      <p class="card-text">This is a longer card with supporting text below.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title 2</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title 3</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
</div>

Card Group


Card groups keep cards together and eliminate the space between them.

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title 1</h5>
      <p class="card-text">This card has some text to showcase its content.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title 2</h5>
      <p class="card-text">This card also has some supporting text.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title 3</h5>
      <p class="card-text">This card has some text to showcase its content.</p>
    </div>
  </div>
</div>

List Group inside Cards

You can use Bootstrap’s List Group inside a card for a structured list of items.

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Kitchen Sink Card

A "kitchen sink" card includes almost all components Bootstrap 4 offers for a card in a single example.

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Navigation Cards

You can use cards to create a navigation interface using card links.

<div class="card text-center">
  <div class="card-header">
    Nav
  </div>
  <div class="card-body">
    <h5 class="card-title">Navigation Card</h5>
    <p class="card-text">Use card links to create a navigation system.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Carousel in Bootstrap 4

Definition

The Carousel component in Bootstrap 4 allows you to create a slideshow that cycles through a series of images, text, or custom content. It’s often used as a homepage hero section or for showcasing multiple items.


Creating a Carousel

To create a carousel, use the .carousel, .carousel-inner, .carousel-item, and .carousel-control classes.

Example Code

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Explanation of Carousel Components

  • .carousel: This class is the main wrapper for the carousel. It controls the entire slideshow and sets up the necessary features.
  • .carousel-inner: This is the inner container for the slides.
  • .carousel-item: Each individual slide is wrapped within this class.
  • .carousel-control-prev & .carousel-control-next: These are the controls for navigating between slides. They include the icons and screen reader text for accessibility.

Styling the Carousel

You can customize the appearance and behavior of the carousel by using various options such as adding captions, changing slide intervals, and adjusting the transition effects.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide Label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second Slide Label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third Slide Label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
BERLIN SHANE AISHWARYA L

Posted by BERLIN SHANE AISHWARYA L

Post a Comment

0 Comments