Bootstrap 5 Cards

Using the Bootstrap Cards

A flexible and expandable content container is the bootstrap card. It offers options for headers and footers, a range of information, background colors that are appropriate for the context, and strong display options. Panel, well, and thumbnail components are replaced by cards in the older Bootstrap 3 version.

You can see what you can do with the card component in the following section.

Basic Card

The card markup is rather simple to understand. While information can be contained inside the .card-body element, the outer wrapper needs the base class .card. The example that follows will demonstrate how to make a card with a photo, some text, and a button.

The output of the above example will look something like this:

In the context of web development, a "Bootstrap 5 basic card" refers to a fundamental building block provided by the Bootstrap framework, specifically version 5, for creating visually appealing and responsive cards on a webpage. Bootstrap is a popular front-end framework that simplifies the process of designing and structuring websites or web applications. It provides a set of pre-designed components and styles, including cards, which are used for organizing and presenting content in a structured and visually pleasing manner.

1. Header: A card usually starts with a header section at the top. This can contain a title, image, or any other content that you want to emphasize.
2. Content: The main content of the card goes below the header. This can include text, images, links, buttons, or any other elements that convey information to the user.
3. Footer: Optionally, you can add a footer to the card, typically containing additional information or actions related to the card's content.
4. Styling and Responsiveness: Bootstrap ensures that cards are styled in a clean and modern way by default, and they are responsive, meaning they adapt to different screen sizes, making them suitable for mobile devices as well.

Why is bootstrap card used?

1. Ease of Use: Bootstrap simplifies web development by providing pre-designed components like cards that are easy to implement. Developers can use predefined classes and HTML structure to create attractive and responsive cards without the need for extensive custom CSS.
2. Consistency: Bootstrap's design principles ensure that the cards look consistent and professional across different browsers and devices. This consistency is essential for creating a unified user experience.
3. Community and Support: Bootstrap is widely adopted and has a large and active community of developers. This means you can find plenty of resources, documentation, and third-party extensions to enhance and customize your cards.
4. Responsive Design: Cards in Bootstrap are designed to be responsive by default, making it easier to create web pages that work well on various screen sizes, from desktops to mobile devices.
5. Customization: While Bootstrap provides a default style for cards, they are highly customizable. Developers can easily apply their own styles and layouts to cards to match the specific design requirements of their projects.

Header and Footer

Using the .card-header and .card-footer classes, you may also include a header and footer inside of your cards. Let's look at the following example:

The output of the above example will look something like this:

Contextual Cards

To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light).

Titles, Text, and Links

To add card titles to any heading element, use the .card-title property. If a

element is the final child of .card-body or the only child, the bottom margins are removed using the.card-text class. Any link added with the .card-link class receives a blue color and a hover effect.

List Groups

The list groups are a very practical and adaptable component for visually displaying lists of components. A list group is, in its most basic form, just an unordered list with the class .list-group, with the list items class being .list-group-item.

Tip: List groups are 100% wide by default. To set their width explicitly you can either use the Bootstrap's width utility classes (e.g. w-25, w-50, etc.) or place them inside grid columns.

Kitchen Sink

In Bootstrap, a "kitchen sink" typically refers to a webpage or component that demonstrates and showcases a wide variety of Bootstrap features and components in one place. It's often used as a reference or learning tool. Here's a small code snippet for creating a simple Bootstrap kitchen sink page:

This code snippet creates a simple Bootstrap kitchen sink page with examples of typography, buttons, alerts, and forms. It's a starting point for showcasing various Bootstrap components and styles in one place, making it easier to learn and experiment with Bootstrap's capabilities.

Sizing

Bootstrap provides several sizing utilities to control the width, height, and spacing of elements. Here's a small code snippet demonstrating the use of sizing utilities in Bootstrap:

In this code snippet, we've used Bootstrap sizing utilities like w-25 (width), h-100 (height), mw-50 (max-width), min-vw-50 (min-width based on viewport width), and combinations of these utilities to control the sizing of elements. These utilities help ensure responsive design and consistent spacing across different screen sizes.

Using Utilities

Numerous utility/helper classes in Bootstrap 5 allow you to easily customize items without writing any CSS code. Bootstrap provides a wide range of utility classes to quickly style and adjust elements in your HTML without writing custom CSS. Here's a small code snippet demonstrating the use of some Bootstrap utility classes:

In this code snippet, we've used various Bootstrap utility classes like mt-5 (margin-top), text-primary (text color), btn, alert, p-3 (padding), text-center (text alignment), and d-flex (display utility) to style and format different elements in the HTML document. These utility classes help streamline the styling process and ensure a consistent look and feel throughout the web application.

Using custom cc

In Bootstrap, you can customize the CSS by creating your own custom CSS (Cascading Style Sheets) to override or extend the default Bootstrap styles. Here's a small code snippet demonstrating how to use custom CSS with Bootstrap:

In this code snippet, we've included a custom CSS file named "custom.css" to override or extend Bootstrap styles. You can define your custom styles in "custom.css" to target specific elements using class names like my-custom-button, my-custom-alert, and my-custom-div. These custom styles will take precedence over the default Bootstrap styles, allowing you to tailor the appearance of your website to your specific design requirements.

Here's an example of what the "custom.css" file might look like:

These custom styles will modify the appearance of the Bootstrap button, alert, and the custom <div> element according to your specifications.

Navigation

If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links:

Images

Add .card-img-top or .card-img-bottom to an img to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width:

Customizing Background and Color

To change a card's appearance, just utilize the utility classes for the background and color. To see how it fundamentally operates, let's use the example below:

Customizing Border and Color

The text and border utility classes allow you to alter the color of any card's border and text. Simply use the following classes on the .card or its child components as shown below:

Creating the Card Groups

Cards can be rendered as a single, associated element with equal columns of width and height using card groups. On extremely small devices, though (viewport width 576px), cards inside a card group are horizontally stacked. Let's use an example to demonstrate how it actually functions:

This HTML code demonstrates the use of Bootstrap's "Card Group" to create a set of cards:

1. Three cards are enclosed within a <div class="card-group">, which is a Bootstrap component for organizing cards together.
2. Each card (<div class="card">) contains an image, a title (<h5 class="card-title">), some text (<p class="card-text">), and a footer section (<div class="card-footer">).
3. The image (<img>) is set to "/examples/images/thumbnail.svg" and serves as a visual element at the top of each card.
4. The title and text provide placeholders for content that can be replaced as needed.
5. The card footer contains a small text element (<small class="text-muted">) indicating the last update time.
6. Bootstrap's CSS and JavaScript files are included via CDN links to ensure the Bootstrap styles and functionality are applied to the cards.

Creating the Card Grids

You may manage how many grid columns (wrapped around your cards) are displayed in each row by using the Bootstrap grid system its .row-cols-* classes. From the medium breakpoint up (i.e. viewport width 768px), you can use the class.row-cols-1 to show one card per row and the class.row-cols-md-2 to show two cards per row.

This HTML code creates a simple webpage with a Bootstrap-based card grid layout:

1. It includes the Bootstrap CSS and JavaScript libraries for styling and functionality.
2. Inside a container (<div class="m-4">), it defines a grid of cards using the Bootstrap grid system (row-cols-1 row-cols-md-2) to arrange cards in a single column on small screens and in two columns on medium screens and larger.
3. There are four identical cards (<div class="col">), each with an image, a title (<h5 class="card-title">), some descriptive text (<p class="card-text">), and a small footer displaying a timestamp (<small class="text-muted">).
4. The image source is set to a placeholder image (<img src="/examples/images/thumbnail.svg">) that you can replace with your own images.
5. The card layout is responsive, adapting to different screen sizes.
6. You can easily duplicate and customize these cards to showcase content or features on your webpage in a neat and organized manner.

Creating Horizontal Cards

The following example shows how to build horizontal cards with image and text information arranged side by side using a combination of grid and utility classes:

This HTML code creates a Bootstrap-based horizontal card:

1. It includes Bootstrap CSS and JavaScript libraries to style and add functionality to the card.
2. Inside a container, a card is defined with a maximum width of 500 pixels.
3. The card is divided into two columns using the "row g-0" class.
4. In the left column, there's a background-colored section with an image (sample.svg).
5. In the right column, there's a card body with a title (Alice Liddel), a short description, and a button (View Profile).
6. The button uses the "stretched-link" class, making the entire card clickable as a link.

Text Alignment inside Card

With the text alignment utility classes, you can simply adjust the text alignment of any card—completely or just a portion of it. To align the text content of the card to the center and the right end, respectively, you can use the classes .text-center and .text-end.

This HTML code is using Bootstrap to create a row of three cards with different text alignments:

1. The first card has left-aligned text.
2. The second card has center-aligned text.
3. The third card has right-aligned text.

Each card contains a title, some content text, and a "Know more" button. This code demonstrates how Bootstrap's text-center and text-end classes can be used to change the text alignment within the cards. It's a simple way to control the layout of your card content.

The row-cols-1 row-cols-md-3 class ensures that the cards stack in a single column on small screens (e.g., mobile) and form a row with three columns on medium and larger screens.

Card with Stretched Link

The class can be added. To make the entire card clickable (i.e., have the entire card behave as a link), apply a stretched-link to a link inside the card. Stretched links do not work well with many links.

To demonstrate how this function works, try out the example below:

Example:

In this example, we've created a card with an image, a title, and some text. The key part is the tag with the stretched-link class inside the card's content (<div class="card-body">).

This class makes the entire card clickable, effectively turning the card into a link. You can replace the href attribute with the URL you want to link to.