bootstrap
  1. bootstrap-badges
PreviousNext

Bootstrap Badges

  • Badges are small visual indicators that can be used to display small pieces of information such as statuses, counts, and labels.
  • Bootstrap provides a simple and flexible way to create badges that can be used in many different contexts.

Syntax

To create a badge in Bootstrap, you can add the following HTML code:

<span class="badge badge-primary">New</span>

You can replace primary with any of the following classes to change the color of the badge:

  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

Example

Here is an example of how to use a badge in a headings.

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-success">New</span></h2>
<h3>Example heading <span class="badge bg-danger">New</span></h3>
<h4>Example heading <span class="badge bg-warning">New</span></h4>
<h5>Example heading <span class="badge bg-info">New</span></h5>
<h6>Example heading <span class="badge bg-dark">New</span></h6>
Try Playground

Example

Here is an example of how to use a badge in a button.

</button>
  <button type="button" class="btn btn-primary position-relative">
  Notifications <span class="badge badge-light position-absolute bg-danger rounded-circle">3</span>
</button>
Try Playground

Explanation

In the code above, we used the following classes to create the badge:

  • badge: this is the main class that indicates that this is a badge.
  • badge-primary: this sets the color of the badge to primary color.
  • badge-light: this sets the color of the badge to light gray.

Use

Badges can be used in various contexts, such as:

  • Indicating the number of items in a shopping cart.
  • Displaying labels or statuses of items such as "New", "Hot", or "Sale".
  • Indicating the status of a task or process.

Important Points

  • Badges are small visual indicators that can display information in a flexible and easy-to-read way.
  • Bootstrap provides a simple and flexible way to create badges using a few CSS classes.
  • Badges can be used in many different contexts to display information.

Summary

Badges are a simple and useful feature of Bootstrap that can be used to display small pieces of information in a flexible and easy-to-read way. By using the built-in CSS classes, you can easily create badges that fit into your design and provide valuable information to your users.

JumbotronBreadcrumb
Published on: