Table of contents
1.
Introduction
2.
Basic Card
3.
Header and Footer in Bootstrap 5 Cards
4.
Title and Links in Bootstrap 5 Cards
5.
Images in Bootstrap 5 Cards
5.1.
Example of an Image in the Button on Bootstrap 5 Cards
5.2.
Image Overlays in Bootstrap 5 Cards
6.
Card Groups in Bootstrap 5
7.
List Groups in Bootstrap 5 Cards
8.
Kitchen Sink in Bootstrap 5 Cards
9.
Navigation in Bootstrap 5 Cards
10.
Text Alignment in Bootstrap 5 Cards
11.
Horizontal Card in Bootstrap 5
12.
Changing the Color of the Card in Bootstrap 5
13.
Adding Borders to Cards in Bootstrap 5
14.
Frequently Asked Questions
14.1.
What is Bootstrap 5 card?
14.2.
Is card deck removed from Bootstrap 5?
14.3.
What is Bootstrap 5 used for?
15.
Conclusion
Last Updated: Dec 1, 2024
Easy

Bootstrap 5 Cards

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Bootstrap 5, the latest iteration of the popular front-end framework, introduces a variety of components designed to simplify web design and development. Among these components, the Card is a versatile and essential element. Bootstrap Cards are containers with flexible and extensible content. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 

Bootstrap 5 cards

In this article, we'll explore the different aspects of Bootstrap 5 Cards, covering their syntax, parameters, and providing practical examples for each use case. This comprehensive guide aims to equip you with the knowledge to effectively utilize Bootstrap 5 Cards in your web projects.

Basic Card

A Basic Card in Bootstrap 5 is a fundamental component used to display content and actions on a single subject. It acts as a container for text, links, images, and buttons, among other elements.

Syntax:

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>


Example:

<div class="card" style="width: 18rem;">
  <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>


In this example, we have a card with a width of 18rem. Inside the card, there is a body that contains a title, some text, and a link styled as a button.

Header and Footer in Bootstrap 5 Cards

Bootstrap 5 Cards can be enhanced with headers and footers to encapsulate additional information or actions related to the card content. This feature is particularly useful for categorizing content or providing contextual actions to the card.

Syntax:

<div class="card">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">
    <p class="card-text">Card content.</p>
  </div>
  <div class="card-footer">
    Footer
  </div>
</div>


Example:

<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>


In this example, the card is structured with a header labeled 'Featured', a body containing a title, some text, and a button, and a footer indicating a time stamp. The card-header and card-footer classes are used to designate these areas within the card structure. The footer in this example also uses the text-muted class to give a subdued appearance to the timestamp.

Title and Links in Bootstrap 5 Cards

Titles and links within Bootstrap 5 Cards provide a clear hierarchy and navigational functionality. They are essential for guiding users and emphasizing key information.

Syntax:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
    <p class="card-text">Some quick 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>


Example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Bootstrap Card</h5>
    <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6>
    <p class="card-text">Detailed information about Bootstrap 5 card components.</p>
    <a href="#" class="card-link">More Info</a>
    <a href="#" class="card-link">Another Resource</a>
  </div>
</div>


In this example, the card includes a title and a subtitle at the top, followed by some descriptive text. The card-title and card-subtitle classes define these textual elements. Two links are provided at the bottom of the card body, styled with the card-link class, offering additional information or related resources.

Images in Bootstrap 5 Cards

Images play a crucial role in enhancing the visual appeal and conveying information quickly in Bootstrap 5 Cards. They can be used at the top of the card, within the card body, or as full-card backgrounds.

Syntax:

<div class="card">
  <img src="image-source.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card content.</p>
  </div>
</div>


Example:

<div class="card" style="width: 18rem;">
  <img src="placeholder-image.jpg" class="card-img-top" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This is an example of a card with an image on top. The image enhances the card's visual impact and relevance.</p>
  </div>
</div>


In this example, an image is placed at the top of the card using the card-img-top class. This class ensures that the image fits well within the card layout. The src attribute of the <img> tag should point to the image's location. The card also contains a body with a title and text, providing context and additional information about the image.

Example of an Image in the Button on Bootstrap 5 Cards

Incorporating images into buttons on Bootstrap 5 Cards adds a visual element to the actions, making them more engaging and intuitive. This can be particularly effective for social media links, shopping carts, or any other interactive features.

Syntax:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <p class="card-text">Card content here.</p>
    <button class="btn btn-primary">
      <img src="icon-image.jpg" alt="Icon" style="width: 20px; height: 20px;">
      Button with Image
    </button>
  </div>
</div>


Example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Interactive Card</h5>
    <p class="card-text">Explore more features with a single click.</p>
    <button class="btn btn-success">
      <img src="play-icon.png" alt="Play" style="width: 20px; height: 20px;">
      Play Video
    </button>
  </div>
  </div>


In this example, a button within the card body includes an image (denoted as a play icon). The image is embedded inside the <button> tag, immediately before the button text. The style attribute is used to adjust the image's width and height, ensuring it fits appropriately within the button.

Image Overlays in Bootstrap 5 Cards

Image overlays in Bootstrap 5 Cards allow text or other elements to be placed on top of an image, creating a striking visual effect. This feature is useful for adding captions, descriptions, or calls to action directly over images.

Syntax:

<div class="card bg-dark text-white">
  <img src="image-source.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>


Example:

<div class="card bg-dark text-white">
  <img src="nature-image.jpg" class="card-img" alt="Nature">
  <div class="card-img-overlay">
    <h5 class="card-title">Nature at its Best</h5>
    <p class="card-text">Experience the serenity and beauty of nature through this image.</p>
    <p class="card-text">Captured moments ago</p>
  </div>
</div>


In this example, a nature image is used as the background of the card. The card-img-overlay class is applied to a <div> that holds the text elements, allowing them to appear over the image. The card's background and text colors (bg-dark and text-white) are chosen to ensure readability against the image backdrop.

Card Groups in Bootstrap 5

Card groups in Bootstrap 5 are used to display cards as a single, attached unit with equal width and height columns. This is particularly useful when you want to showcase related content side-by-side for a cohesive visual experience.

Syntax:

<div class="card-group">
  <div class="card">
    <img src="image1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <img src="image2.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Another card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <!-- More cards can be added here -->
</div>


Example:

<div class="card-group">
  <div class="card">
    <img src="nature1.jpg" class="card-img-top" alt="Nature Scene">
    <div class="card-body">
      <h5 class="card-title">Nature Landscape</h5>
      <p class="card-text">Beautiful landscapes to explore.</p>
    </div>
  </div>
  <div class="card">
    <img src="nature2.jpg" class="card-img-top" alt="Wildlife">
    <div class="card-body">
      <h5 class="card-title">Wildlife in Action</h5>
      <p class="card-text">Discover the wonders of wildlife.</p>
    </div>
  </div>
</div>

In this example, two cards are grouped together, each containing an image and some text. The card-group class groups the cards, ensuring they are of equal width and height, providing a unified appearance. This layout is ideal for presenting a series of related items or images.

List Groups in Bootstrap 5 Cards

List groups within Bootstrap 5 Cards allow for the creation of lists as part of the card content. This is useful for displaying a series of related items or actions within a card, providing a clear and organized way to present information.

Syntax:

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>


Example:

<div class="card" style="width: 18rem;">
  <div class="card-header">Features List</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Seamless Integration</li>
    <li class="list-group-item">Customizable Design</li>
    <li class="list-group-item">Responsive Layout</li>
    <li class="list-group-item">Cross-Platform Compatibility</li>
  </ul>
</div>


In this example, a card is created with a header and a list group. The list-group and list-group-flush classes are used to style the list within the card, giving it a cohesive and integrated look. Each list item (<li>) represents a feature, providing a clear and organized presentation.

Kitchen Sink in Bootstrap 5 Cards

The "kitchen sink" in Bootstrap 5 Cards refers to a card that incorporates multiple components and features – like throwing everything but the kitchen sink into the design. This approach demonstrates the versatility and flexibility of cards.

Syntax and Example

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <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>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Feature One</li>
    <li class="list-group-item">Feature Two</li>
    <li class="list-group-item">Feature Three</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>


In this comprehensive example, the card includes an image, a body with a title and text, a list group with multiple items, additional links in the body, and a footer. This showcases how different elements can be combined within a single card to present a rich, multi-faceted content experience.

Navigation in Bootstrap 5 Cards

Navigation in Bootstrap 5 Cards involves adding a navigation bar or tabs within the card. This feature is particularly useful for creating a card with multiple views or content sections that can be easily navigated.

Syntax:

<div class="card" style="width: 18rem;">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </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>
  </div>
</div>


Example:

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Messages</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Navigation Card Example</h5>
    <p class="card-text">Content corresponding to the selected tab will be displayed here.</p>
  </div>
</div>

In this example, the card features a header with navigation tabs, allowing users to switch between different content sections within the card. The nav and nav-tabs classes are used to create the tabbed navigation, and the card-header-tabs class aligns them appropriately within the card header.

Bootstrap 5 also allows for navigation in the form of 'pills', which are rounded, button-like tabs. This style can be applied within cards to create an interactive, tabbed interface with a distinctive look.

Syntax:

<div class="card" style="width: 18rem;">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Pill Navigation</h5>
    <p class="card-text">Content related to the active pill will be displayed here.</p>
  </div>
</div>


Example:




<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Interactive Pills</h5>
    <p class="card-text">Select a pill to view different sections of the card content.</p>
  </div>
</div>


In this example, the card incorporates a pill-style navigation in the header. The nav-pills class is used to give the navigation items a rounded, pill-like appearance, offering an alternative to the traditional tab style. This approach can be more visually appealing and suitable for certain designs.

Text Alignment in Bootstrap 5 Cards

Text alignment in Bootstrap 5 Cards is a simple yet powerful way to control the layout and readability of your card content. By aligning text, you can enhance the visual structure and improve the user's reading experience.

Syntax:

<div class="card">
  <div class="card-body text-start">
    Left aligned text in card body.
  </div>
</div>
<div class="card">
  <div class="card-body text-center">
    Center aligned text in card body.
  </div>
</div>
<div class="card">
  <div class="card-body text-end">
    Right aligned text in card body.
  </div>
</div>


Example:

<div class="card" style="width: 18rem;">
  <div class="card-body text-center">
    <h5 class="card-title">Centered Title</h5>
    <p class="card-text">This text is centered within the card, creating a balanced and focused layout.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>


In this example, the card features a title, text, and a button, all of which are centered using the text-center class. This central alignment creates a symmetrical and aesthetically pleasing layout, drawing the viewer's attention to the middle of the card.

Horizontal Card in Bootstrap 5

Horizontal Cards in Bootstrap 5 offer a different orientation for card components, providing a broader layout that can be especially useful for content-rich applications or when you want to incorporate images alongside text.

Syntax:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>


Example:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="landscape.jpg" class="img-fluid rounded-start" alt="Landscape">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Stunning Landscapes</h5>
        <p class="card-text">Explore the beauty of nature through our collection of breathtaking landscapes.</p>
        <p class="card-text"><small class="text-muted">Updated 1 hour ago</small></p>
      </div>
    </div>
  </div>
</div>


In this example, a horizontal card layout is created using Bootstrap's grid system. The card is divided into two columns: one for the image and the other for the card's text content. The img-fluid rounded-start class ensures that the image is responsive and fits neatly into its column.

Changing the Color of the Card in Bootstrap 5

Customizing the color of Bootstrap 5 Cards is straightforward and can significantly impact the aesthetic and readability of your content. Bootstrap provides various contextual classes to easily change the background and text colors of cards.

Syntax:

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and fill the card's content.</p>
  </div>
</div>


Example:

<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Success Card</div>
  <div class="card-body">
    <h5 class="card-title">Green Card</h5>
    <p class="card-text">This card uses a green background to signify success or a positive message.</p>
  </div>
</div>


In the example, the card uses the bg-success class for a green background and text-white for white text, making it visually distinct and easily readable. Bootstrap offers a range of color classes such as bg-primary, bg-info, bg-warning, and bg-danger, allowing for a wide range of color customizations to suit different contexts and designs.

Adding Borders to Cards in Bootstrap 5

Adding borders to Bootstrap 5 Cards enhances their visual separation and can be used to highlight or distinguish cards from one another. Bootstrap provides utility classes to easily add and customize borders.

Syntax:

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and fill the card's content.</p>
  </div>
</div>


Example:

<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Info Card</div>
  <div class="card-body text-info">
    <h5 class="card-title">Informative Card</h5>
    <p class="card-text">This card has a blue border, emphasizing its informational content and purpose.</p>
  </div>
</div>


In this example, the card is styled with a blue border using the border-info class. Additionally, the text within the card is also styled with the text-info class for color consistency. Bootstrap's border classes, like border-primary, border-secondary, border-success, etc., provide a simple way to apply colored borders to cards.

Frequently Asked Questions

What is Bootstrap 5 card?

A Bootstrap 5 card is a flexible, content container with options for headers, footers, images, and various styles to display information effectively.

Is card deck removed from Bootstrap 5?

Yes, the card-deck class was removed in Bootstrap 5. Instead, row and col classes or the grid system are used for layout control.

What is Bootstrap 5 used for?

Bootstrap 5 is used to create responsive, mobile-first web pages with pre-designed components like grids, buttons, forms, and cards, simplifying front-end development.

Check this out - Bootstrap Accordion

Conclusion

In this blog, we thoroughly discussed about bootstrap 5 cards. We learned about basic cards, images in bootstrap, card group, text-alignment, horizontal and vertical card and much more in this blog. 

You can refer to our guided paths on the Code360. You can check our course to learn more about DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Live masterclass