src/scss/bootstrap-4.0.0-alpha.6/docs/components/badge.md

   1 ---
   2 layout: docs
   3 title: Badges
   4 description: Documentation and examples for badges, our small count and labelling component.
   5 group: components
   6 ---
   7
   8 Small and adaptive tag for adding context to just about any content.
   9
  10 ## Contents
  11
  12 * Will be replaced with the ToC, excluding the "Contents" header
  13 {:toc}
  14
  15 ## Example
  16
  17 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
  18
  19 {% example html %}
  20 <h1>Example heading <span class="badge badge-default">New</span></h1>
  21 <h2>Example heading <span class="badge badge-default">New</span></h2>
  22 <h3>Example heading <span class="badge badge-default">New</span></h3>
  23 <h4>Example heading <span class="badge badge-default">New</span></h4>
  24 <h5>Example heading <span class="badge badge-default">New</span></h5>
  25 <h6>Example heading <span class="badge badge-default">New</span></h6>
  26 {% endexample %}
  27
  28 ## Contextual variations
  29
  30 Add any of the below mentioned modifier classes to change the appearance of a badge.
  31
  32 {% example html %}
  33 <span class="badge badge-default">Default</span>
  34 <span class="badge badge-primary">Primary</span>
  35 <span class="badge badge-success">Success</span>
  36 <span class="badge badge-info">Info</span>
  37 <span class="badge badge-warning">Warning</span>
  38 <span class="badge badge-danger">Danger</span>
  39 {% endexample %}
  40
  41 {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
  42 {{ callout-include | markdownify }}
  43
  44 ## Pill badges
  45
  46 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
  47
  48 {% example html %}
  49 <span class="badge badge-pill badge-default">Default</span>
  50 <span class="badge badge-pill badge-primary">Primary</span>
  51 <span class="badge badge-pill badge-success">Success</span>
  52 <span class="badge badge-pill badge-info">Info</span>
  53 <span class="badge badge-pill badge-warning">Warning</span>
  54 <span class="badge badge-pill badge-danger">Danger</span>
  55 {% endexample %}