markdownify label docs

diff --git a/docs/components/label.md b/docs/components/label.md
index 05cf2fe81d49c50591df4a4ae7ca65e614d18176..ae36a8fd454b27b7815ddf75b60c52397f7bc1cc 100644 (file)
--- a/docs/components/label.md
+++ b/docs/components/label.md
@@ -1,40 +1,37 @@
-<div class="bs-docs-section">
-  <h1 id="labels" class="page-header">Labels</h1>
-
-  <h3>Example</h3>
-  <div class="bs-example">
-    <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 %}
+---
+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 %}
+<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>
-{% endhighlight %}
-
-  <h3>Available variations</h3>
-  <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
-  <div class="bs-example">
-    <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 %}
+<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>
+{% endexample %}
+
+### Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a label.
+
+{% example 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 %}
+{% endexample %}
 
-  <div class="bs-callout bs-callout-info">
-    <h4>Have tons of labels?</h4>
-    <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>
-  </div>
+<div class="bs-callout bs-callout-info">
+  <h4>Have tons of labels?</h4>
+  <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>
 </div>