Badges and Labels

In Bootstrap 5.3, a badge is a small visual element used to highlight or indicate additional information within a user interface. Badges are typically used to display counts, notifications, status indicators, or labels. They are commonly seen in navigation menus, buttons, cards, and other UI components.

Bootstrap provides a built-in class called "badge" that can be applied to various HTML elements to create badges. By default, badges have a rounded shape and a background color that contrasts with the surrounding content. The text inside the badge is usually a number or a short label.

Here's an example of a basic badge in Bootstrap 5.3:

Heading Tags New

Heading Tags New

Heading Tags New

Heading Tags New

Heading Tags New

Heading Tags New

Buttons With Notification

To create badge buttons with notifications in Bootstrap 5.3, you can combine the button and badge components. Here's an example of how you can achieve this:

class="badge text-bg-secondary" this applies the Bootstrap classes "badge" and "text-bg-secondary" to the span element. The "badge" class styles the span element as a badge, and "text-bg-secondary" sets the text color to white and the background color to a secondary color (usually gray) for the badge.

So, the code creates a button with the text "Notification" and a badge indicating a count of 5. The badge has a gray background color and white text color. The button itself has a green color style applied to it. You can customize the classes, colors, and content according to your design needs.

Positioned Notification

To create a container <div> element with the class position-relative. This class allows the child elements to be positioned relative to this container.

Background colors

In Bootstrap 5.3, you can apply different background colors to badges using the contextual classes provided by the framework. These classes allow you to easily style badges with various background colors to convey different meanings or visual indicators.

Here are the available background color classes for badges in Bootstrap 5.3:

• bg-primary: Applies the primary color as the background color for the badge.
• bg-secondary: Applies a secondary color as the background color for the badge.
• bg-success: Sets a success color as the background color for the badge.
• bg-danger: Sets a danger color as the background color for the badge.
• bg-warning: Applies a warning color as the background color for the badge.
• bg-info: Sets an informative color as the background color for the badge.
• bg-light: Applies a light color as the background color for the badge.
• bg-dark: Sets a dark color as the background color for the badge.

Positioned Notification

In Bootstrap 5.3, pill badges are a variation of badges that have rounded corners, giving them a pill-like appearance. Pill badges are often used to display counts or labels in a more visually prominent and stylish way.

Progress Bars

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

• progress-bar (default)
• progress-bar-striped

Add class active to animate the progress bar

• progress-bar-default
• progress-bar-primary
• progress-bar-success
• progress-bar-info
• progress-bar-warning
• progress-bar-danger

Progress bars can also be stacked.

Breadcrumb

In Bootstrap 5.3, a breadcrumb is a navigation component that helps users understand their current location within a website or application's navigational hierarchy. It displays a trail of links that represents the path from the homepage to the current page.

Bootstrap provides a built-in breadcrumb component that you can easily implement in your web development projects. The breadcrumb component consists of an ordered list (<ol>) with individual list items (<li>) representing each segment of the breadcrumb trail.

You can customize the breadcrumb component by adding additional list items, changing the text or URLs of the anchor elements, or applying different styles to the breadcrumb component using custom CSS or Bootstrap classes.

Bootstrap 5.3 also provides various utility classes and customization options to modify the appearance and behavior of the breadcrumb component. You can refer to the Bootstrap documentation for further details on advanced customization options.

• <nav>: This element represents a navigation section in HTML and is used to wrap the breadcrumb component.
• <ol class="breadcrumb">: This is an ordered list element with the class "breadcrumb". It serves as the container for the breadcrumb items.
• <li class="breadcrumb-item active" aria-current="page"> Home</li>: This is a list item element representing the breadcrumb segment. It has the class "breadcrumb-item" applied to it, indicating that it is part of the breadcrumb.
• class="breadcrumb-item active": The "breadcrumb-item" class is added to style the list item as a breadcrumb segment. The "active" class is also applied to signify that it represents the current page or location in the breadcrumb trail.
• aria-current="page": This attribute is added for accessibility purposes, specifying that the current page is represented by this breadcrumb item.
• Home: This is the text content displayed within the breadcrumb item, indicating the name of the segment (in this case, "Home").

Modify Breadcrumb Dividers

In Bootstrap 5.3, you can modify the dividers used in the breadcrumb component by customizing the CSS or by using the available classes provided by Bootstrap. The dividers are the visual separators between the breadcrumb segments.

By default, Bootstrap 5.3 uses the forward slash ("/") as the divider between the breadcrumb items. However, you have the flexibility to change this divider or customize its appearance to match your design needs.

To modify the breadcrumb dividers in Bootstrap 5.3, you can use the following classes:

breadcrumb-divider: This class can be applied to any HTML element within the breadcrumb component to act as the divider. By default, it uses the forward slash ("/") as the divider.