Bootstrap Cards and Media Objects
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>
Still have some questions? Let's discuss.
CONTACT US