container illustrations

dist/css/bootstrap.css

@@ -5981,6 +5981,66 @@ button.close {
   white-space: nowrap;
 }
 
+.text-xs-left {
+  text-align: left;
+}
+
+.text-xs-right {
+  text-align: right;
+}
+
+.text-xs-center {
+  text-align: center;
+}
+
+@media (min-width: 34em) {
+  .text-sm-left {
+    text-align: left;
+  }
+  .text-sm-right {
+    text-align: right;
+  }
+  .text-sm-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 48em) {
+  .text-md-left {
+    text-align: left;
+  }
+  .text-md-right {
+    text-align: right;
+  }
+  .text-md-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 62em) {
+  .text-lg-left {
+    text-align: left;
+  }
+  .text-lg-right {
+    text-align: right;
+  }
+  .text-lg-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 75em) {
+  .text-xl-left {
+    text-align: left;
+  }
+  .text-xl-right {
+    text-align: right;
+  }
+  .text-xl-center {
+    text-align: center;
+  }
+}
+
 .text-lowercase {
   text-transform: lowercase;
 }

docs/assets/scss/_component-examples.scss

@@ -16,6 +16,43 @@
 }
 
 
+//
+// Container illustrations
+//
+
+.bd-example-container {
+  max-width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bd-example-container-header {
+  height: 3rem;
+  margin-bottom: .5rem;
+  background-color: lighten($brand-primary, 50%);
+  border-radius: .25rem;
+}
+
+.bd-example-container-sidebar {
+  float: right;
+  width: 4rem;
+  height: 8rem;
+  background-color: lighten($brand-warning, 25%);
+  border-radius: .25rem;
+}
+
+.bd-example-container-body {
+  height: 8rem;
+  margin-right: 4.5rem;
+  background-color: lighten($bd-purple, 25%);
+  border-radius: .25rem;
+}
+
+.bd-example-container-fluid {
+  max-width: 100%;
+}
+
+
 //
 // Docs examples
 //
@@ -36,7 +73,7 @@
     border-width: .2rem;
   }
 
-  + .highlight,  
+  + .highlight,
   + .zero-clipboard + .highlight {
     margin-top: 0;
   }

docs/dist/css/bootstrap.css

@@ -5981,6 +5981,66 @@ button.close {
   white-space: nowrap;
 }
 
+.text-xs-left {
+  text-align: left;
+}
+
+.text-xs-right {
+  text-align: right;
+}
+
+.text-xs-center {
+  text-align: center;
+}
+
+@media (min-width: 34em) {
+  .text-sm-left {
+    text-align: left;
+  }
+  .text-sm-right {
+    text-align: right;
+  }
+  .text-sm-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 48em) {
+  .text-md-left {
+    text-align: left;
+  }
+  .text-md-right {
+    text-align: right;
+  }
+  .text-md-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 62em) {
+  .text-lg-left {
+    text-align: left;
+  }
+  .text-lg-right {
+    text-align: right;
+  }
+  .text-lg-center {
+    text-align: center;
+  }
+}
+
+@media (min-width: 75em) {
+  .text-xl-left {
+    text-align: left;
+  }
+  .text-xl-right {
+    text-align: right;
+  }
+  .text-xl-center {
+    text-align: center;
+  }
+}
+
 .text-lowercase {
   text-transform: lowercase;
 }

docs/layout/overview.md

@@ -12,6 +12,14 @@ Containers are the most basic layout element in Bootstrap and are **required whe
 
 While containers *can* be nested, most layouts do not require a nested container.
 
+<div class="bd-example">
+  <div class="bd-example-container">
+    <div class="bd-example-container-header"></div>
+    <div class="bd-example-container-sidebar"></div>
+    <div class="bd-example-container-body"></div>
+  </div>
+</div>
+
 {% highlight html %}
 <div class="container">
   <!-- Content here -->
@@ -20,6 +28,14 @@ While containers *can* be nested, most layouts do not require a nested container
 
 Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
 
+<div class="bd-example">
+  <div class="bd-example-container bd-example-container-fluid">
+    <div class="bd-example-container-header"></div>
+    <div class="bd-example-container-sidebar"></div>
+    <div class="bd-example-container-body"></div>
+  </div>
+</div>
+
 {% highlight html %}
 <div class="container-fluid">
   ...