Bootstrap - Badges Demo

Ethan D. - June 1, 2024

Creating Basic Badges

Bootstrap lets you create simple badges. By default, badges are small, rectangular elements with a background color and contrasting text color. To create a badge, add the .badge class to an inline element, such as a <span>.

Bootstrap has several badge styles that can show different states or categories. These styles include .badge-primary, .badge-secondary, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-light, and .badge-dark. Each of these classes adds a specific background and text color to the badge, making it easy to convey meaning.

Bootstrap also has pill badges. Pill badges have rounded corners and can be created by adding the .badge-pill class to a badge element. This style is often used for tags or labels that need to stand out.

Example

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

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

By using these badge styles and classes, you can quickly add badges to your Bootstrap projects.

Customizing Badge Styles

Bootstrap badges are easy to customize. You can change the colors, padding, margins, and font styles to match your project's design.

Example: Custom background color and text color

.badge-custom {
  background-color: #6c757d;
  color: #fff;
}

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

You can also adjust the padding and margins of badges using CSS. The default padding for badges is .25em horizontally and .4em vertically.

Example: Change padding and margin

.badge {
  padding: .5em 1em;
  margin-right: .5em;
}

Lastly, you can customize the font styles of badges. By default, badges use bold font weight and uppercase text.

Example: Modify font weight and text transform

.badge {
  font-weight: normal;
  text-transform: lowercase;
}

Tip: Use custom class names

When customizing badge styles, it's a good practice to use a custom class name to avoid overwriting Bootstrap's default styles unintentionally.

Badges inside Other Elements

Badges can be used inside other elements like buttons, list items, and headings to add extra information or visual indicators.

Example: Badge inside a Button

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>

Example: Badges in List Items

<ul class="list-group">
  <li class="list-group-item">
    Inbox <span class="badge badge-primary">12</span>
  </li>
  <li class="list-group-item">
    Sent <span class="badge badge-success">5</span>
  </li>
  <li class="list-group-item">
    Drafts <span class="badge badge-secondary">2</span>
  </li>
</ul>

Example: Badge in a Heading

<h2>
  Tasks <span class="badge badge-secondary">3 remaining</span>
</h2>

Tip: Adding Extra Information with Badges

By using badges inside other elements, you can add extra information and visual cues without disrupting the overall design of your components.

Badges with Links

Badges can be clickable links by wrapping them inside an <a> element. This allows users to go to different pages or sections of your website.

To create a clickable badge, place the badge inside an <a> element and add the link URL to the href attribute.

Example Clickable Badge

<a href="#" class="badge badge-primary">Click me</a>

When styling linked badges, you can use the same customization techniques as regular badges. But, you may want to add more styles to make the badge look more like a clickable link.

Example: Styling Clickable Badge

a.badge {
  text-decoration: none;
  cursor: pointer;
}

a.badge:hover {
  background-color: #0056b3;
}

Example: Accessible Clickable Badge

<a href="#" class="badge badge-primary" role="button">
  Click me
</a>

a.badge {
  text-decoration: none;
  cursor: pointer;
  padding: .5em 1em;
  font-size: 1em;
}

a.badge:hover,
a.badge:focus {
  background-color: #0056b3;
  outline: none;
}

Animating Badges

Badges can be animated to draw attention or add visual interest. You can add hover effects, create animations with CSS, and combine animations with contextual styles.

To add hover effects to badges, use the :hover pseudo-class in your CSS. This lets you change the badge's appearance when the user hovers over it.

Example: Hover effects on badges

.badge:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

You can create more complex animations using CSS keyframes. Define the animation using @keyframes and apply it to the badge using the animation property.

Example: Complex animations using CSS keyframes

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.badge-animated {
  animation: pulse 1s infinite;
}

<span class="badge badge-primary badge-animated">Animated</span>

You can also combine animations with contextual badge styles. This allows you to create different animations for different badge types.

Example: Combining animations with contextual badge styles

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.badge-success.badge-animated {
  animation: bounce 1s infinite;
}

.badge-danger.badge-animated {
  animation: pulse 1s infinite;
}

<span class="badge badge-success badge-animated">Success</span>
<span class="badge badge-danger badge-animated">Danger</span>

Tip: Considerations when adding animations to badges

Use animations sparingly to avoid overwhelming users
Make sure animations don't interfere with readability
Consider accessibility for users with motion sensitivities

Responsive Badge Design

When designing badges for your website or application, consider how they will look and function on different screen sizes. Responsive badge design makes your badges readable and visually appealing across various devices.

One way to make badges responsive is by adjusting their sizes for different screen sizes. You can use CSS to change the font size, padding, and other dimensions of the badge based on the viewport width.

Example: Adjusting badge size for different screen sizes

.badge {
  font-size: 1rem;
  padding: .5em 1em;
}

@media (max-width: 768px) {
  .badge {
    font-size: 0.8rem;
    padding: .3em .8em;
  }
}

@media (max-width: 576px) {
  .badge {
    font-size: 0.7rem;
    padding: .2em .6em;
  }
}

Another way to make badges responsive is by modifying their styles using media queries. You can change colors, backgrounds, and other CSS properties based on the screen size.

Example: Modifying badge styles using media queries

.badge {
  background-color: #007bff;
  color: #fff;
}

@media (max-width: 768px) {
  .badge {
    background-color: #6c757d;
    color: #fff;
  }
}

@media (max-width: 576px) {
  .badge {
    background-color: #28a745;
    color: #fff;
  }
}

Make sure the text inside the badge is legible and has enough contrast with the background color when designing responsive badges.

Example: Ensuring badge readability on smaller screens

.badge {
  font-size: 1rem;
  padding: .5em 1em;
  background-color: #007bff;
  color: #fff;
}

@media (max-width: 576px) {
  .badge {
    font-size: 0.8rem;
    padding: .3em .8em;
    background-color: #007bff;
    color: #fff;
  }
}