2014-03-17 03:03:53 +01:00
< div class = "bs-docs-section" >
< h1 id = "labels" class = "page-header" > Labels< / h1 >
2015-02-24 03:35:37 +01:00
< h2 > Example< / h2 >
2014-11-25 02:09:32 +01:00
< div class = "bs-example" data-example-id = "labels-in-headings" >
2014-03-17 03:03:53 +01:00
< h1 > Example heading < span class = "label label-default" > New< / span > < / h1 >
< h2 > Example heading < span class = "label label-default" > New< / span > < / h2 >
< h3 > Example heading < span class = "label label-default" > New< / span > < / h3 >
< h4 > Example heading < span class = "label label-default" > New< / span > < / h4 >
< h5 > Example heading < span class = "label label-default" > New< / span > < / h5 >
< h6 > Example heading < span class = "label label-default" > New< / span > < / h6 >
< / div >
{% highlight html %}
< h3 > Example heading < span class = "label label-default" > New< / span > < / h3 >
{% endhighlight %}
2015-02-24 03:35:37 +01:00
< h2 > Available variations< / h2 >
2014-03-17 03:03:53 +01:00
< p > Add any of the below mentioned modifier classes to change the appearance of a label.< / p >
2014-11-25 02:09:32 +01:00
< div class = "bs-example" data-example-id = "label-variants" >
2014-03-17 03:03:53 +01:00
< 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 >
< / div >
{% highlight html %}
< 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 >
{% endhighlight %}
2014-06-11 07:39:27 +02:00
2014-11-12 05:23:49 +01:00
< div class = "bs-callout bs-callout-info" id = "callout-labels-inline-block" >
2014-06-11 07:39:27 +02:00
< h4 > Have tons of labels?< / h4 >
2014-06-11 08:08:30 +02:00
< 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 >
2014-06-11 07:39:27 +02:00
< / div >
2014-03-17 03:03:53 +01:00
< / div >