Skip to main content

Components

Design patterns that serve as basic building blocks.

Badge

Badges come in four flavors and should be used to indicate “how many” of something there are. Adding the a class of .badge-inverted will remove the badges background color.

Contents

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

<h1>Heading <span class="badge badge-default">New</span></h1>
<h2>Heading <span class="badge badge-default">New</span></h2>
<h3>Heading <span class="badge badge-default">New</span></h3>
<h4>Heading <span class="badge badge-default">New</span></h4>
<h5>Heading <span class="badge badge-default">New</span></h5>
<h6>Heading <span class="badge badge-default">New</span></h6>

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

<span class="badge">Normal</span>
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Pill badges

Use the .badge-pill modifier class to make tags more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

<span class="badge badge-pill">Normal</span>
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>

Inverted badges

<span class="badge badge-inverted">Normal</span>
<span class="badge badge-default badge-inverted">Default</span>
<span class="badge badge-primary badge-inverted">Primary</span>
<span class="badge badge-success badge-inverted">Success</span>
<span class="badge badge-info badge-inverted">Info</span>
<span class="badge badge-warning badge-inverted">Warning</span>
<span class="badge badge-danger badge-inverted">Danger</span>

Outline badges

<span class="badge badge-outline">Normal</span>
<span class="badge badge-default badge-outline">Default</span>
<span class="badge badge-primary badge-outline">Primary</span>
<span class="badge badge-success badge-outline">Success</span>
<span class="badge badge-info badge-outline">Info</span>
<span class="badge badge-warning badge-outline">Warning</span>
<span class="badge badge-danger badge-outline">Danger</span>

Buttons with badges

<button class="btn btn-secondary">
  Badge button
  <span class="badge">1</span>
</button>

<button class="btn btn-primary">
  Badge button
  <span class="badge badge-primary">1</span>
</button>

<button class="btn btn-success">
  Badge button
  <span class="badge badge-success">1</span>
</button>

<button class="btn btn-info">
  Badge button
  <span class="badge badge-info badge-pill">1</span>
</button>

<button class="btn btn-warning">
  Badge button
  <span class="badge badge-warning badge-pill">1</span>
</button>

<button class="btn btn-danger">
  Badge button
  <span class="badge badge-danger badge-pill">1</span>
</button>

Outline buttons with badges

<button class="btn btn-outline-secondary">
  Badge button
  <span class="badge badge-inverted">1</span>
</button>

<button class="btn btn-outline-primary">
  Badge button
  <span class="badge badge-primary badge-inverted">1</span>
</button>

<button class="btn btn-outline-success">
  Badge button
  <span class="badge badge-success badge-inverted">1</span>
</button>

<button class="btn btn-outline-info">
  Badge button
  <span class="badge badge-info badge-inverted">1</span>
</button>

<button class="btn btn-outline-warning">
  Badge button
  <span class="badge badge-warning badge-inverted">1</span>
</button>

<button class="btn btn-outline-danger">
  Badge button
  <span class="badge badge-danger badge-inverted">1</span>
</button>

Block buttons with badges

<button class="btn btn-secondary btn-block">
  Badge button
  <span class="badge">1</span>
</button>

<button class="btn btn-primary btn-block">
  Badge button
  <span class="badge badge-primary">1</span>
</button>

<button class="btn btn-success btn-block">
  Badge button
  <span class="badge badge-success">1</span>
</button>

<button class="btn btn-info btn-block">
  Badge button
  <span class="badge badge-info badge-pill">1</span>
</button>

<button class="btn btn-warning btn-block">
  Badge button
  <span class="badge badge-warning badge-pill">1</span>
</button>

<button class="btn btn-danger btn-block">
  Badge button
  <span class="badge badge-danger badge-pill">1</span>
</button>

<button class="btn btn-outline-primary btn-block">
  Badge button
  <span class="badge badge-primary badge-inverted">1</span>
</button>

Table view with badges

<ul class="table-view">
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge">5</span>
      Item 1
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge badge-pill">5</span>
      Item 2
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge badge-pill badge-default">5</span>
      Item 3
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge badge-pill badge-danger">5</span>
      Item 4
    </a>
  </li>
</ul>