Bootstrap Cards and Media Objects

Level : Intermediate
Mentor: Shailendra Chauhan
Duration : 00:05:00

Basic Card:

A basic card in Bootstrap is a versatile container that can hold various types of content. It's perfect for displaying concise information or simple elements like text, images, and links.

Example:

<div class="card">
  <div class="card-body">
    This is a basic card.
  </div>
</div>

Header and Footer:

You can add headers and footers to Bootstrap cards to provide context or additional information. Headers typically contain a title or heading, while footers can include buttons or additional content.

Example:

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-body">
    This is a card with a header and footer.
  </div>
  <div class="card-footer">Card Footer</div>
</div>

Contextual Cards:

Bootstrap allows you to style cards with contextual colors to convey information or status visually.

Example:

<div class="card text-white bg-primary">
  <div class="card-body">
    This is a primary contextual card.
  </div>
</div> 

Titles, Text, and Links:

You can add titles, text, and links within a card's body for content organization.

Example:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some text within the card.</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
</div>

Card Images:

Include images in Bootstrap cards to illustrate the content.

Example:

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    This card has an image.
  </div>
</div>

Stretched Link:

Make the entire card clickable as a link with the "stretched-link" class.

Example:

<div class="card">
  <a href="#" class="stretched-link"></a>
  <div class="card-body">
    Click anywhere on this card to go to a link.
  </div>
</div>

Card Image Overlays:

Add overlays to card images to include additional information or actions.

Example:

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Overlay Text</p>
  </div>
</div> 

Card Columns:

Display cards in a multi-column layout for better organization.

Example:

<div class="card-columns">
  <!-- Multiple cards go here -->
</div>

Card Deck:

Create a deck of cards with equal heights.

Example:

<div class="card-deck">
  <!-- Multiple cards go here -->
</div> 

Card Group:

Group cards together with responsive spacing.

Example:

<div class="card-group">
  <!-- Multiple cards go here -->
</div> 

Media Objects:

Basic Media Object: Combine text and media, like images or videos, in a card for rich content presentation.

Example:

<div class="media">
  <img src="image.jpg" class="mr-3" alt="Media Image">
  <div class="media-body">
    <h5 class="mt-0">Media Heading</h5>
    This is a basic media object in a card.
  </div>
</div> 

Top, Middle, or Bottom Alignment:

Align media objects at the top, middle, or bottom of the card.

Example:

<div class="media">
  <img src="image.jpg" class="align-self-start" alt="Top Aligned Media">
  <div class="media-body">
    Top-aligned media.
  </div>
</div>

Nesting Media Objects:

You can also nest media objects within other media objects for complex layouts.

Example:

<div class="media">
  <img src="image1.jpg" class="mr-3" alt="Media Image 1">
  <div class="media-body">
    <h5 class="mt-0">Media Heading 1</h5>
    This is the first media object.
    <!-- Nested Media Object -->
    <div class="media mt-3">
      <img src="image2.jpg" class="mr-3" alt="Media Image 2">
      <div class="media-body">
        <h5 class="mt-0">Media Heading 2</h5>
        This is a nested media object.
      </div>
    </div>
  </div>
</div>

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this