Bootstrap 5 Quiz: Master Card Component Usage

Study Notes

Bootstrap Classes

The p-* class should be added to a box container to create padding around its content.
The card-img class should be utilized to place an image inside a card background.
The card-img-top class can be used to place an image to span the entire width outside of the card-body.

Alert Boxes

The alert class should be assigned to the container to create an alert box with a light background color.
The alert-link class should be used to add a link inside an alert box in Bootstrap 5.
Contextual classes like .alert-danger and .alert-success are used to change the color of the alert box based on the type of alert (e.g., danger, success, warning, etc.).

Closing Alert Boxes

The correct way to create a closing alert box in Bootstrap 5 is to add the alert-dismissible class and a close button with the data-bs-dismiss attribute.

Pagination

Basic pagination can be achieved in Bootstrap 5 by adding the pagination class to a list of links.
To add pagination to a website with multiple pages, you need to create a list of links with the pagination class and add the page-item class to each list item, and the page-link class to each link.
The .disabled class is used in Bootstrap pagination to disable a pagination link.

A navigation bar can be vertically stacked on extra large screens in Bootstrap by adding the flex-column class to the navigation bar.

Pagination Blocks

The pagination-lg class should be added to create larger blocks in Bootstrap pagination.

Description

Learn about the Bootstrap 5 card component, which is a box container with padding around its content. Explore options such as headers, footers, colors, and how to include images at the top or bottom. Practice creating cards with different elements like headers, content, and footers.