Bootstrap 5 Card Component Usage

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.

Navigation Bar

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