Labels

A Bootstrap 3 label is a small, color-coded pill of text you use to tag or highlight a piece of content — a status word, a category, a short annotation next to a heading. It comes in the same seven-color palette as buttons, so the meaning of each color stays consistent across the whole framework. We'll go through the base class, every color variant, using labels inline, and finish with a TrailMap "Beginner Friendly" label.

The Base Class: .label

Wrap any short text in a <span class="label"> plus a style class. On its own, .label just gives padding and rounded corners — always pair it with a color variant:

<span class="label label-default">New</span>

Label Color Variants

The same seven meanings as buttons, alerts, and panels:

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

Labels Inline Inside Headings

Because a label is just an inline <span>, you can drop it straight into a heading to annotate it — Bootstrap even nudges the vertical alignment automatically so it sits neatly next to the heading text:

<h3>Trail Report <span class="label label-info">Updated</span></h3>

TrailMap Example: Beginner Friendly Label

On a trail's detail page, TrailMap flags easy, well-marked routes with a green "Beginner Friendly" label right next to the trail name:

<!-- TrailMap: trail detail page heading -->
<h2>Cedar Ridge Loop
  <span class="label label-success">Beginner Friendly</span>
</h2>