<h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th>Labels</th>
- <th>Markup</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <span class="label">Default</span>
- </td>
- <td>
- <code><span class="label">Default</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label label-success">Success</span>
- </td>
- <td>
- <code><span class="label label-success">Success</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label label-warning">Warning</span>
- </td>
- <td>
- <code><span class="label label-warning">Warning</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label label-danger">Danger</span>
- </td>
- <td>
- <code><span class="label label-danger">Danger</span></code>
- </td>
- </tr>
- <tr>
- <td>
- <span class="label label-info">Info</span>
- </td>
- <td>
- <code><span class="label label-info">Info</span></code>
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="bs-docs-example">
+ <span class="label">Default</span>
+ <span class="label label-success">Success</span>
+ <span class="label label-warning">Warning</span>
+ <span class="label label-danger">Danger</span>
+ <span class="label label-info">Info</span>
+ </div>
+{% highlight html linenos %}
+<span class="label">Default</span>
+<span class="label label-success">Success</span>
+<span class="label label-warning">Warning</span>
+<span class="label label-danger">Danger</span>
+<span class="label label-info">Info</span>
+{% endhighlight %}
</div>
font-weight: 500;
color: darken(@state-warning-text, 10%);
}
-}
-// Adjust close link position
-.close {
- position: relative;
- top: -2px;
- right: -21px;
- line-height: @line-height-base;
- color: inherit;
+ // Adjust close link position
+ .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ color: inherit;
+ }
}
// Alternate styles