--- layout: page title: Labels --- Small and adaptive tag for adding context to just about any content. ### Example Labels scale to match the size of the immediate parent element by using relative font sizing and `em` units. {% example html %}

Example heading New

{% endexample %} ### Contextual variations Add any of the below mentioned modifier classes to change the appearance of a label. {% example html %} Default Primary Success Info Warning Danger {% endexample %}

Have tons of labels?

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.