Bootstrap - Badges

Creating Badges

Bootstrap provides a way to create badges in your web projects. Badges are small labels that can highlight important information or show the status of an item. Here, we'll look at the basic syntax for creating badges, how to use contextual badges for different states, and how to create pill badges for a different styling option.

To create a basic badge in Bootstrap, you can use the .badge class on an inline element such as a <span>.

<h1>Example Heading <span class="badge bg-secondary">New</span></h1>

This will create a badge with the text "New" next to the heading. By default, badges have a background color and are made to stand out from the surrounding content.

Bootstrap also offers contextual badges, which allow you to show different states or meanings through color variations. The available contextual classes are:

To create a contextual badge, add the right class to the badge element.

<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Error</span>

In addition to the standard rectangular badges, Bootstrap also provides pill badges. Pill badges have rounded corners and a slightly different visual style. To create a pill badge, add the .rounded-pill class to the badge element along with the .badge class.

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>

Pill badges can be used in the same way as regular badges and support the same contextual color classes.

That's the basic syntax for creating badges in Bootstrap. By using the .badge class and the various contextual and styling options, you can add informative and visually appealing badges to your web pages.

Customizing Badges

Bootstrap badges highlight information in your web pages, but you may want to change their appearance to match your website's design. Let's see how you can change badge colors, adjust font size and padding, and use badges with other elements.

While Bootstrap provides default contextual colors for badges, you can change the badge color to suit your needs. To modify the color, you can override the background color of the badge using custom CSS.

<span class="badge bg-custom">Custom</span>

<style>
  .bg-custom {
    background-color: #ff6f00;
  }
</style>

We define a custom class .bg-custom and set the background-color property to the desired color. You can replace #ff6f00 with any valid color code.

The font size and padding of badges can also be adjusted using CSS. Bootstrap sets a default font size and padding for badges, but you can override these values to make the badges larger or smaller.

<span class="badge bg-primary custom-badge">Custom Size</span>

<style>
  .custom-badge {
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
  }
</style>

We create a custom class .custom-badge and set the font-size and padding properties to the desired values. You can change the values based on your preferences.

Badges can be combined with other elements to create more informative and interactive components. You can add badges inside buttons to show a count or status.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

We place a badge inside a button to show the number of notifications. The badge is positioned inside the button using the <span> element.

You can also use badges in combination with other Bootstrap components, such as list groups or cards, to show additional information or status indicators.

<ul class="list-group">
  <li class="list-group-item">
    Item 1 <span class="badge bg-primary">New</span>
  </li>
  <li class="list-group-item">
    Item 2 <span class="badge bg-success">Completed</span>
  </li>
</ul>

Using Badges in Different Contexts

Badges in Bootstrap can be used in various contexts to highlight information or show the status of elements. Let's see how you can use badges in buttons, headings, and navigation components.

You can add badges inside buttons to display counts, notifications, or additional information related to the button's action. To add a badge inside a button, place the badge element within the button.

<button type="button" class="btn btn-primary">
  Messages <span class="badge bg-secondary">3</span>
</button>

You can also use badges in headings to highlight the status or category of the heading's content. To add a badge to a heading, place the badge element next to the heading text.

<h2>Latest News <span class="badge bg-info">Updated</span></h2>

Navigation components, such as navbars or tabs, can also benefit from badges to show counts or notifications. You can add badges to navigation items to draw attention to information.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages <span class="badge bg-danger">5</span></a>
  </li>
</ul>

By using badges in buttons, headings, and navigation components, you can provide context and draw attention to key information in your web pages. Badges help users quickly identify elements and take actions based on the information provided.