POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/labels.html

   1 <div class="bs-docs-section">
   2   <h1 id="labels" class="page-header">Labels</h1>
   3
   4   <h2>Example</h2>
   5   <div class="bs-example" data-example-id="labels-in-headings">
   6     <h1>Example heading <span class="label label-default">New</span></h1>
   7     <h2>Example heading <span class="label label-default">New</span></h2>
   8     <h3>Example heading <span class="label label-default">New</span></h3>
   9     <h4>Example heading <span class="label label-default">New</span></h4>
  10     <h5>Example heading <span class="label label-default">New</span></h5>
  11     <h6>Example heading <span class="label label-default">New</span></h6>
  12   </div>
  13 {% highlight html %}
  14 <h3>Example heading <span class="label label-default">New</span></h3>
  15 {% endhighlight %}
  16
  17   <h2>Available variations</h2>
  18   <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
  19   <div class="bs-example" data-example-id="label-variants">
  20     <span class="label label-default">Default</span>
  21     <span class="label label-primary">Primary</span>
  22     <span class="label label-success">Success</span>
  23     <span class="label label-info">Info</span>
  24     <span class="label label-warning">Warning</span>
  25     <span class="label label-danger">Danger</span>
  26   </div>
  27 {% highlight html %}
  28 <span class="label label-default">Default</span>
  29 <span class="label label-primary">Primary</span>
  30 <span class="label label-success">Success</span>
  31 <span class="label label-info">Info</span>
  32 <span class="label label-warning">Warning</span>
  33 <span class="label label-danger">Danger</span>
  34 {% endhighlight %}
  35
  36   <div class="bs-callout bs-callout-info" id="callout-labels-inline-block">
  37     <h4>Have tons of labels?</h4>
  38     <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
  39   </div>
  40 </div>