tons of docs helpers cleanup

dist/css/bootstrap.css

@@ -4576,7 +4576,8 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   cursor: pointer;
   opacity: .5;
 }
-.closebutton {
+
+button.close {
   -webkit-appearance: none; 
   padding: 0;
   cursor: pointer;

docs/assets/scss/docs.scss

@@ -1176,6 +1176,25 @@ body {
   overflow: auto;
 }
 
+// Helpers
+.bs-example > {
+  .center-block {
+    max-width: 200px;
+    padding: .5rem;
+    background-color: #eee;
+  }
+
+  .bg-primary,
+  .bg-success,
+  .bg-info,
+  .bg-warning,
+  .bg-danger {
+    padding: .5rem;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
+}
+
 
 //
 // Code snippets

docs/components/helpers.md

@@ -90,7 +90,7 @@ Float an element to the left or right with a class. `!important` is included to
 Set an element to `display: block;` and center via `margin`. Available as a mixin and class.
 
 {% example html %}
-<div class="center-block">...</div>
+<div class="center-block">Centered block</div>
 {% endexample %}
 
 {% highlight scss %}
@@ -182,9 +182,9 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin
 
 Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
 
-{% example html %}
+{% highlight html %}
 <h1 class="text-hide">Custom heading</h1>
-{% endexample %}
+{% endhighlight %}
 
 {% highlight scss %}
 // Usage as a Mixin

docs/dist/css/bootstrap.css

@@ -4576,7 +4576,8 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   cursor: pointer;
   opacity: .5;
 }
-.closebutton {
+
+button.close {
   -webkit-appearance: none; 
   padding: 0;
   cursor: pointer;