j1-template 2020.0.7 → 2020.0.12

data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_table_3_column.asciidoc

@@ -1,6 +1,6 @@
 
 .Selected extended BS modal examples
-[cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
+[cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
 |===============================================================================
 |Postion |Class | Example
 

data/lib/starter_web/pages/public/learn/whats_up.adoc

@@ -9,6 +9,7 @@ categories:                             [ pages ]
 
 permalink:                              /pages/public/learn/whats_up/
 regenerate:                             false
+toc:                                    true
 
 resources:                              [ lightbox ]
 resource_options:

data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc

@@ -1,7 +1,15 @@
 ---
 title:                                  J1 Template
 tagline:                                creating responsive websites
-description:                            Responsive Webs using J1 Template
+description: >
+                                        A good user experience browsing a Web is one of
+                                        the most important features a site has to offer as
+                                        a must. Beside excellent content. Presenting content
+                                        at it’s best on all devices, for all window sizes makes
+                                        an excellent Web brilliant. J1 Template support your Web
+                                        for full responsiveness, for the best user experience on
+                                        all modern devices.
+
 author:                                 J1 Team
 
 tags:                                   [ Jekyll, Template ]
@@ -16,7 +24,7 @@ resource_options:
   - attic:
       padding_top:                      400
       padding_bottom:                   50
-      opacity:                          0.5 
+      opacity:                          0.5
       slides:
         - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.jpg
           alt:                          the-place-1920x1280-bw
@@ -35,13 +43,13 @@ best user experience on all modern devices.
 === Bootstrap 4 Integration
 
 To not sidetrack your audience by irritating user interface (UI) components,
-J1 Template is based on Bootstrap. Bootstrap is one of the most popular 
-frameworks for web development used today. J1 is based on Bootstrap V4, the 
-last current version to support your visitors by common elements for 
+J1 Template is based on Bootstrap. Bootstrap is one of the most popular
+frameworks for web development used today. J1 is based on Bootstrap V4, the
+last current version to support your visitors by common elements for
 navigation, data input, tables and many other components more.
 
 For your development projects, Bootstrap simplifies HTML programming a lot,
-offers excellent JS support for interactive components like navigation 
+offers excellent JS support for interactive components like navigation
 elements, cards, forms etc.
 
 [[current-technology]]
@@ -55,40 +63,40 @@ development, languages and tools.
 
 === HTML5 + CSS3
 
-J1 is using HTML5 for structuring content on the World Wide Web. The current 
-version of the HTML standard offer a lot of new features including detailed 
-processing models to support more interoperable implementations. It extends 
-and improves HTML markups available. HTML5 introduces application 
-programming interfaces (APIs) for more complex web applications. For same 
-reasons, the new HTMLstandard is also a good choice for modern cross-platform 
+J1 is using HTML5 for structuring content on the World Wide Web. The current
+version of the HTML standard offer a lot of new features including detailed
+processing models to support more interoperable implementations. It extends
+and improves HTML markups available. HTML5 introduces application
+programming interfaces (APIs) for more complex web applications. For same
+reasons, the new HTMLstandard is also a good choice for modern cross-platform
 mobile applications, because it includes features designed with mobile devices
 in mind.
 
-Many new features are included with HTML5. To natively support multimedia and 
-graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were 
+Many new features are included with HTML5. To natively support multimedia and
+graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
 added. Beside this, support for scalable vector graphics (SVG) and an API
 called MathML for mathematical formulas are now available.
 
 The new standard allows to use so-called *semantic* markup elements for your
-documents. New structure elements such as `<main>`, `<section>`, `<article>`, 
-`<header>` or `<footer>` (and many more) were added. Better structured HTML 
+documents. New structure elements such as `<main>`, `<section>`, `<article>`,
+`<header>` or `<footer>` (and many more) were added. Better structured HTML
 code can help people having disabilities to read the pages presented better.
 
-CSS is designed to enable the separation of presentation and content. 
-Including layout, colors and fonts for example. This separation improves 
-content accessibility, provide more flexibility and control in the 
+CSS is designed to enable the separation of presentation and content.
+Including layout, colors and fonts for example. This separation improves
+content accessibility, provide more flexibility and control in the
 presentation.
 
 Separation of formatting and content also makes it feasible to present the
-same page in different styles. For example, the themes feature of J1 Template 
+same page in different styles. For example, the themes feature of J1 Template
 make use of this.
 
 CSS3 is divided into several separate components called *modules*. Each module
-adds new capabilities or extends features defined in the former CSS2 standard. 
+adds new capabilities or extends features defined in the former CSS2 standard.
 HTML5 in combination with CSS3 allows to create modern and modular code for web
 pages that can be viewed on all current devices like Mobiles, Tablets or the
 classic Desktop PC. The new HTML5 elements plus CSS3 modules can be used as a
-replacement for *proprietary solutions* like Adobe Flash to build modern 
+replacement for *proprietary solutions* like Adobe Flash to build modern
 webpages based on *open standards*.
 
 === Javascript
@@ -97,8 +105,8 @@ HTML5 and CSS3 can do a lot. Content placement and basic methods for the
 dynamic of elements can be done using pure HTML5 and CSS3. For more
 complex solutions like modules the support of Javascript is needed.
 
-J1 Template has build-in a wide range of JS powered modules to support a 
-website for e.g. the navigation, for presenting image data in galeries, 
+J1 Template has build-in a wide range of JS powered modules to support a
+website for e.g. the navigation, for presenting image data in galeries,
 lightboxes and so on.
 
 
@@ -106,53 +114,51 @@ lightboxes and so on.
 == Start in No Time
 
 The base idea of J1 Template is to give all people a tool set at their hands
-to create a website with no need to start by web development or web design 
-from the beginning. A website based on J1 is using build-in templates and 
-engines. As a result, the process to generate HTML code from your content 
-is done automatically and allows you to concentrate on what truly matters: 
+to create a website with no need to start by web development or web design
+from the beginning. A website based on J1 is using build-in templates and
+engines. As a result, the process to generate HTML code from your content
+is done automatically and allows you to concentrate on what truly matters:
 your content.
 
-Using J1, you can instantly start a web project by creating your content 
+Using J1, you can instantly start a web project by creating your content
 and not by start learning the the deep of web development technologies.
 
 === Create your Web
 
-J1 is highly customizeable. Based on a pure configuration, a website can be 
+J1 is highly customizeable. Based on a pure configuration, a website can be
 created. The template system creates static web pages using Jekyll as
-the base HTML code generator. Static website are fast and secure but simple 
+the base HTML code generator. Static website are fast and secure but simple
 to manage. No complex database systems and PHP interfaces are needed.
 
-To present a static website, only a web server environment is needed. To 
-publish a website on the Internet, many possible platforms can be used like 
+To present a static website, only a web server environment is needed. To
+publish a website on the Internet, many possible platforms can be used like
 Github, Netlify or Heroku for example - for free!
 
 The Internet is not a peaceful place. Every site accessible from the public is
-attacked from the first second if published. Static websites are robust, fast 
-and that's import: intrinsicly secure. That means: *not* changeable. No 
-offender attacking your website is able to break your site. Because it's 
+attacked from the first second if published. Static websites are robust, fast
+and that's import: intrinsicly secure. That means: *not* changeable. No
+offender attacking your website is able to break your site. Because it's
 static or in other words: unchangeable, unbreakable from it's natur.
 
 This makes a static website for the better.
 
 === Modules and Apps
 
-It's predictable what base components are needed for a modern website. For 
-Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge 
-number of modules are available to extend a site by e.g. Apps like image 
+It's predictable what base components are needed for a modern website. For
+Content Management Systems (CMS) like Wordpress, Joomla or Drupal a huge
+number of modules are available to extend a site by e.g. Apps like image
 galleries, video players, calendars etc.
 
 This is a bit different for static webs as they don't have a central
 Management System as CMS do to integrate external code. There no ecosystem,
-no marketplace to get apps and modules from. 
+no marketplace to get apps and modules from.
 
-Luckily, it is not that hard to integrate external components into the world 
-of Jekyll. But one of the objectives of J1 is to give people a ready-to-use 
-toolset without the need to install, to integrate components that expected 
+Luckily, it is not that hard to integrate external components into the world
+of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
+toolset without the need to install, to integrate components that expected
 as a need.
 
-A rich set of modules are already included. The modules support common use 
-cases of a website like a flexible navigation system, a local search, 
-lightboxes to present pictures and videos, little helpers for scrolling or 
+A rich set of modules are already included. The modules support common use
+cases of a website like a flexible navigation system, a local search,
+lightboxes to present pictures and videos, little helpers for scrolling or
 to automatically create TOCs (table of contents) for a page.
-
-

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Fixed (absolute) sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Bootstrap (BS) grid sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Relative sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,^2m,8a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 
@@ -44,44 +44,4 @@
 <i class="mdi mdi-5x mdi-account"></i>
 ----
 
-|`mdi-6x`
-^|pass:[<i class="mdi mdi-6x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-6x mdi-account"></i>
-----
-
-|`mdi-7x`
-^|pass:[<i class="mdi mdi-7x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-7x mdi-account"></i>
-----
-
-|`mdi-8x`
-^|pass:[<i class="mdi mdi-8x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-1x mdi-account"></i>
-----
-
-|`mdi-9x`
-^|pass:[<i class="mdi mdi-9x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-9x mdi-account"></i>
-----
-
-|`mdi-10x`
-^|pass:[<i class="mdi mdi-10x mdi-account"></i>]
-|
-[source, html]
-----
-<i class="mdi mdi-10x mdi-account"></i>
-----
-
 |===============================================================================

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc

@@ -1,6 +1,6 @@
 
 .Rotate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/300_flip.asciidoc

@@ -1,6 +1,6 @@
 
 .Flip icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/400_spin_pulsed.asciidoc

@@ -1,6 +1,6 @@
 
 .Animate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/500_bw_color_palette.asciidoc

@@ -1,6 +1,6 @@
 
 .Black and White color palette
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/510_bs_color_palette.asciidoc

@@ -1,6 +1,6 @@
 
 .Bootstrap (BS) color palette
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/600_md_color_palette.asciidoc

@@ -1,6 +1,6 @@
 
 .Material Design (MD) color palette
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/601_md_color_palette_indigo.asciidoc

@@ -1,6 +1,6 @@
 
 .MD colors - Indigo
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/602_md_color_palette_pink.asciidoc

@@ -1,6 +1,6 @@
 
 .MD colors - Pink
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_bs_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Bootstrap (BS) grid sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_relative_sizes.asciidoc

@@ -1,6 +1,6 @@
 
 .Relative sizes
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/200_rotate.asciidoc

@@ -1,6 +1,6 @@
 
 .Rotate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/300_flip.asciidoc

@@ -1,6 +1,6 @@
 
 .Flip icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/400_spin_pulsed.asciidoc

@@ -1,6 +1,6 @@
 
 .Animate icons
-[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc

@@ -4,8 +4,8 @@ tagline:                                common components
 description:                            Themes Previewer for common components of a selected theme.
 
 tags:                                   [ App, Previewer ]
-index:                                   [ 
-                                          Bootstrap, Theme, Preview, Common, 
+index:                                   [
+                                          Bootstrap, Theme, Preview, Common,
                                           Component, Navbars, Buttons, Typography,
                                           Tables, Forms, Navs, Pills, Breadcrumbs,
                                           Pagination, Indicators, Alerts, Badges,
@@ -60,7 +60,6 @@ include::{includedir}/attributes.asciidoc[tag=urls]
 // Additional ASCIIDOC attributes goes here
 //
 
-
 ++++
   <!-- Prepend H1 tag here -->
   <div id="h1_theme_name" class="row mb-3">
@@ -75,7 +74,7 @@ include::{includedir}/attributes.asciidoc[tag=urls]
       var themeName;
       var themeNameHeadline;
       var user_state_detected;
-      
+
       var dependencies_met_themer = setInterval(function() {
         interval_count += 1;
         if ( j1.adapter.themer.getState() == 'finished' ) {
@@ -110,101 +109,115 @@ support for the collapse plugin.
 pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
 
+Theming the navbar has never been easier thanks to the combination of
+theming classes and background-color utilities. Choose from `.navbar-light`
+for use with light background colors, or '.navbar-dark' for dark background
+colors. Then, customize with `.bg-*` utilities.
+
 ++++
-<!-- Navbar
-============================================================================ -->
-<div class="bs-docs-section clearfix">
-  <div class="row mb-5">
-    <div class="col-md-12">
-      <div class="bs-component mb-2">
-        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-          <a class="navbar-brand" href="#">Navbar</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navbarColor01">
-            <ul class="navbar-nav mr-auto">
-              <li class="nav-item active">
-                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Features</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Pricing</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">About</a>
-              </li>
-            </ul>
-            <form class="form-inline my-2 my-lg-0">
-              <input class="form-control mr-sm-2" type="text" placeholder="Search">
-              <button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
-            </form>
-          </div>
-        </nav>
-      </div>
-      <div class="bs-component mb-2">
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-          <a class="navbar-brand" href="#">Navbar</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navbarColor02">
-            <ul class="navbar-nav mr-auto">
-              <li class="nav-item active">
-                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Features</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Pricing</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">About</a>
-              </li>
-            </ul>
-            <form class="form-inline my-2 my-lg-0">
-              <input class="form-control mr-sm-2" type="text" placeholder="Search">
-              <button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
-            </form>
-          </div>
-        </nav>
-      </div>
-      <div class="bs-component mb-2">
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
-          <a class="navbar-brand" href="#">Navbar</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navbarColor03">
-            <ul class="navbar-nav mr-auto">
-              <li class="nav-item active">
-                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Features</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Pricing</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">About</a>
-              </li>
-            </ul>
-            <form class="form-inline my-2 my-lg-0">
-              <input class="form-control mr-sm-2" type="text" placeholder="Search">
-              <button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
-            </form>
-          </div>
-        </nav>
-      </div>
+<div class="doc-example">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarColor01">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">About</a>
+        </li>
+      </ul>
+      <form class="form-inline">
+        <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
+        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
+      </form>
     </div>
-  </div>
+  </nav>
+
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarColor02">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">About</a>
+        </li>
+      </ul>
+      <form class="form-inline">
+        <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
+        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
+
+  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarColor03">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Features</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">About</a>
+        </li>
+      </ul>
+      <form class="form-inline">
+        <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
+        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
 </div>
 ++++
 
+[source, html, role="noclip"]
+----
+<nav class="navbar navbar-dark bg-dark">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-dark bg-primary">
+  <!-- Navbar content -->
+</nav>
+
+<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+  <!-- Navbar content -->
+</nav>
+----
+
+
 == Buttons
 
 Use Bootstrap’s custom button styles for actions in forms, dialogs, and
@@ -215,169 +228,128 @@ with a few extras thrown in for more control.
 pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
 
+=== Active buttons
+
+Buttons will appear pressed (with a darker background, darker border, and
+inset shadow) when active.
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary btn-raised">Primary</button>
+  <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
+  <button type="button" class="btn btn-success btn-raised">Success</button>
+  <button type="button" class="btn btn-info btn-raised">Info</button>
+  <button type="button" class="btn btn-warning btn-raised">Warning</button>
+  <button type="button" class="btn btn-danger btn-raised">Danger</button>
+  <button type="button" class="btn btn-link btn-raised">Link</button>
+</div>
 ++++
-<!-- Buttons
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-4">
-    <div class="col-md-10">
-      <p class="bs-component">
-        <button type="button" class="btn btn-primary btn-raised">Primary</button>
-        <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
-        <button type="button" class="btn btn-success btn-raised">Success</button>
-        <button type="button" class="btn btn-info btn-raised">Info</button>
-        <button type="button" class="btn btn-warning btn-raised">Warning</button>
-        <button type="button" class="btn btn-danger btn-raised">Danger</button>
-        <button type="button" class="btn btn-link btn-raised">Link</button>
-      </p>
-      <p class="bs-component">
-        <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
-        <button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
-        <button type="button" class="btn btn-success btn-raised disabled">Success</button>
-        <button type="button" class="btn btn-info btn-raised disabled">Info</button>
-        <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
-        <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
-        <button type="button" class="btn btn-link btn-raised disabled">Link</button>
-      </p>
-      <p class="bs-component">
-        <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
-        <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
-        <button type="button" class="btn btn-outline-success btn-raised">Success</button>
-        <button type="button" class="btn btn-outline-info btn-raised">Info</button>
-        <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
-        <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
-      </p>
-      <div class="bs-component">
-        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-          <button type="button" class="btn btn-primary btn-raised">Primary</button>
-          <div class="btn-group" role="group">
-            <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-              <a class="dropdown-item" href="#">Dropdown link</a>
-              <a class="dropdown-item" href="#">Dropdown link</a>
-            </div>
-          </div>
-        </div>
-        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-          <button type="button" class="btn btn-success btn-raised">Success</button>
-          <div class="btn-group" role="group">
-            <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-            <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
-              <a class="dropdown-item" href="#">Dropdown link</a>
-              <a class="dropdown-item" href="#">Dropdown link</a>
-            </div>
-          </div>
-        </div>
-        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-          <button type="button" class="btn btn-info">Info</button>
-          <div class="btn-group" role="group">
-            <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-            <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
-              <a class="dropdown-item" href="#">Dropdown link</a>
-              <a class="dropdown-item" href="#">Dropdown link</a>
-            </div>
-          </div>
-        </div>
-        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-          <button type="button" class="btn btn-danger">Danger</button>
-          <div class="btn-group" role="group">
-            <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-            <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
-              <a class="dropdown-item" href="#">Dropdown link</a>
-              <a class="dropdown-item" href="#">Dropdown link</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="bs-component mt-2">
-        <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
-        <button type="button" class="btn btn-primary btn-raised">Default button</button>
-        <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
-      </div>
-    </div>
-    <div class="col-md-12">
-      <p class="bs-component mt-2">
-        <button type="button" class="btn btn-primary btn-raised btn-lg btn-block">Block level button</button>
-      </p>
-      <div class="bs-component" style="margin-bottom: 15px;">
-        <div class="btn-group" data-toggle="buttons">
-          <label class="btn btn-primary btn-raised active">
-          <input type="checkbox" checked> Checkbox 1
-          </label>
-          <label class="btn btn-primary btn-raised">
-          <input type="checkbox"> Checkbox 2
-          </label>
-          <label class="btn btn-primary btn-raised">
-          <input type="checkbox"> Checkbox 3
-          </label>
-        </div>
-      </div>
-      <div class="bs-component" style="margin-bottom: 15px;">
-        <div class="btn-group" data-toggle="buttons">
-          <label class="btn btn-primary btn-raised active">
-          <input type="radio" name="options" id="option1" checked> Radio 1
-          </label>
-          <label class="btn btn-primary btn-raised">
-          <input type="radio" name="options" id="option2"> Radio 2
-          </label>
-          <label class="btn btn-primary btn-raised">
-          <input type="radio" name="options" id="option3"> Radio 3
-          </label>
-        </div>
-      </div>
 
-      <div class="bs-component">
-        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-            <button type="button" class="btn btn-primary btn-raised">Button</button>
-            <button type="button" class="btn btn-primary btn-raised">Button</button>
-            <button type="button" class="btn btn-primary btn-raised">Button</button>
-            <button type="button" class="btn btn-primary btn-raised">Button</button>
-            <button type="button" class="btn btn-primary btn-raised">Button</button>
-            <button type="button" class="btn btn-primary btn-raised">Button</button>
-        </div>
-      </div>
-<!--
-      <div class="bs-component">
-        <div class="btn-group-vertical" data-toggle="buttons">
-          <button type="button" class="btn btn-primary btn-raised">Button</button>
-          <button type="button" class="btn btn-primary btn-raised">Button</button>
-          <button type="button" class="btn btn-primary btn-raised">Button</button>
-          <button type="button" class="btn btn-primary btn-raised">Button</button>
-          <button type="button" class="btn btn-primary btn-raised">Button</button>
-          <button type="button" class="btn btn-primary btn-raised">Button</button>
-        </div>
-      </div>
--->
-      <div class="bs-component mt-2 mb-2">
-        <div class="btn-group" role="group" aria-label="Basic example">
-          <button type="button" class="btn btn-secondary btn-raised">Left</button>
-          <button type="button" class="btn btn-secondary btn-raised">Middle</button>
-          <button type="button" class="btn btn-secondary btn-raised">Right</button>
-        </div>
-      </div>
-      <div class="bs-component mt-2 mb-2">
-        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
-          <div class="btn-group mr-2" role="group" aria-label="First group">
-            <button type="button" class="btn btn-secondary btn-raised">1</button>
-            <button type="button" class="btn btn-secondary btn-raised">2</button>
-            <button type="button" class="btn btn-secondary btn-raised">3</button>
-            <button type="button" class="btn btn-secondary btn-raised">4</button>
-          </div>
-          <div class="btn-group mr-2" role="group" aria-label="Second group">
-            <button type="button" class="btn btn-secondary btn-raised">5</button>
-            <button type="button" class="btn btn-secondary btn-raised">6</button>
-            <button type="button" class="btn btn-secondary btn-raised">7</button>
-          </div>
-          <div class="btn-group" role="group" aria-label="Third group">
-            <button type="button" class="btn btn-secondary btn-raised">8</button>
-          </div>
-        </div>
-      </div>
-    </div>
+=== Disabled buttons
+
+Buttons look inactive by adding the disabled boolean attribute to any
+<button> element.
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
+  <button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
+  <button type="button" class="btn btn-success btn-raised disabled">Success</button>
+  <button type="button" class="btn btn-info btn-raised disabled">Info</button>
+  <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
+  <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
+  <button type="button" class="btn btn-link btn-raised disabled">Link</button>
+</div>
+++++
+
+=== Outline buttons
+
+In need of a button, but not the hefty background colors they bring? Replace
+the default modifier classes with the `.btn-outline-*` ones to remove all
+background images and colors on any button.
+
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
+  <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
+  <button type="button" class="btn btn-outline-success btn-raised">Success</button>
+  <button type="button" class="btn btn-outline-info btn-raised">Info</button>
+  <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
+  <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
+</div>
+++++
+
+=== Button sizes
+
+Beside the default size, small and large buttons are available.
+
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
+  <button type="button" class="btn btn-primary btn-raised">Default button</button>
+  <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
+</div>
+++++
+
+=== Block level button
+
+Create block level buttons—those that span the full width of a parent—by
+adding .btn-block.
+
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary btn-lg btn-block btn-raised">Block level button</button>
+  <button type="button" class="btn btn-secondary btn-lg btn-block btn-raised">Block level button</button>
+</div>
+++++
+
+=== Toggle button
+
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+    Single toggle
+  </button>
+</div>
+++++
+
+=== Checkbox and radio buttons
+
+Bootstrap’s .button styles can be applied to other elements, such as
+`<label>`, to provide checkbox or radio style button toggling. The checked
+state for these buttons is only updated via click event on the button.
+
+++++
+<div class="doc-example mb-3">
+  <div class="btn-group" data-toggle="buttons">
+    <label class="btn btn-primary btn-raised active">
+      <input type="checkbox" checked> Checkbox 1
+    </label>
+    <label class="btn btn-primary btn-raised">
+      <input type="checkbox"> Checkbox 2
+    </label>
+    <label class="btn btn-primary btn-raised">
+      <input type="checkbox"> Checkbox 3
+    </label>
+  </div>
+</div>
+++++
+
+++++
+<div class="doc-example mb-5">
+  <div class="btn-group btn-group-toggle" data-toggle="buttons">
+    <label class="btn btn-secondary btn-raised active">
+      <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+    </label>
+    <label class="btn btn-secondary btn-raised">
+      <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+    </label>
+    <label class="btn btn-secondary btn-raised">
+      <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+    </label>
   </div>
 </div>
 ++++
 
+
 == Typography
 
 Bootstrap sets basic global display, typography, and link styles. When more
@@ -390,13 +362,10 @@ customize their browser defaults as needed.
 pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
 
+=== Headings
+
 ++++
-<!-- Typography
-============================================================================ -->
-<div class="bs-docs-section">
-  <!-- Typography - Headings
-  ========================================================================== -->
-  <!-- Headings -->
+<div class="doc-example mb-3">
   <div class="row mb-5">
     <div class="col-md-4">
       <div class="bs-component">
@@ -416,7 +385,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
     <div class="col-md-4">
       <div class="bs-component">
         <h3 class="notoc">Example body text</h2>
-        <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+        <p>Nullam quis risus eget <a href="javascript:(void)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
         <p><small>This line of text is meant to be treated as fine print.</small></p>
         <p>The following is <strong>rendered as bold text</strong>.</p>
         <p>The following is <em>rendered as italicized text</em>.</p>
@@ -435,15 +404,14 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
       </div>
     </div>
   </div>
+</div>
+++++
 
-  <!-- Typography - Blockquotes
-  ========================================================================== -->
+=== Blockquotes
+
+++++
+<div class="doc-example mb-3">
   <div class="row">
-    <div class="col-md-12">
-      <h2 id="type-blockquotes" class="notoc">Blockquotes</h3>
-    </div>
-  </div>
-  <div class="row mb-5">
     <div class="col-md-6">
       <div class="bs-component">
         <blockquote class="blockquote">
@@ -468,7 +436,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
 
 Due to the widespread use of tables across third-party widgets like calendars
 and date pickers, we’ve designed our tables to be opt-in. Just add the base
-class .table to any <table>, then extend with custom styles or our various
+class `.table` to any `<table>`, then extend with custom styles or our various
 included modifier classes.
 
 Using the most basic table markup, here’s how .table-based tables look in
@@ -478,71 +446,64 @@ tables will be styled in the same manner as the parent.
 pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
 
-++++
-<!-- Tables
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-12">
 
-      <div class="bs-component">
-        <table class="table table-striped table-hover table-bordered">
-          <thead class="thead-inverse">
-            <tr>
-              <th>#</th>
-              <th>Column heading</th>
-              <th>Column heading</th>
-              <th>Column heading</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-            <tr>
-              <td>2</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-            <tr class="table-info">
-              <td>3</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-            <tr class="table-success">
-              <td>4</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-            <tr class="table-danger">
-              <td>5</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-            <tr class="table-warning">
-              <td>6</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-            <tr class="table-active">
-              <td>7</td>
-              <td>Column content</td>
-              <td>Column content</td>
-              <td>Column content</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <!-- /example -->
-    </div>
+++++
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <table class="table table-striped table-hover table-bordered">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Column heading</th>
+          <th>Column heading</th>
+          <th>Column heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="table-info">
+          <td>3</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="table-success">
+          <td>4</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="table-danger">
+          <td>5</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="table-warning">
+          <td>6</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+        <tr class="table-active">
+          <td>7</td>
+          <td>Column content</td>
+          <td>Column content</td>
+          <td>Column content</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </div>
 ++++
@@ -564,78 +525,75 @@ pass:[]
 Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Forms
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row ml-1 mr-1 mb-5">
+<div class="doc-example mb-3">
+  <form>
+    <div class="form-group">
+      <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
+      <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
+      <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
+      <span class="bmd-help">We'll never share your email with anyone else.</span>
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
+      <input type="password" class="form-control" id="exampleInputPassword1">
+      <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
+    </div>
+    <div class="form-group form-check">
+      <input type="checkbox" class="form-check-input" id="exampleCheck1">
+      <label class="form-check-label" for="exampleCheck1">Check me out</label>
+    </div>
+    <button type="submit" class="btn btn-primary btn-raised">Submit</button>
+  </form>
+</div>
+++++
 
-    <form autocomplete="off">
-      <div class="form-group">
-        <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
-        <span class="bmd-help">We'll never share your email with anyone else.</span>
-      </div>
-      <div class="form-group">
-        <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
-        <input type="password" class="form-control" id="exampleInputPassword1">
-      </div>
-      <div class="form-group">
-        <label for="exampleSelect1" class="bmd-label-floating">Example select</label>
-        <select class="form-control" id="exampleSelect1">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label>
-        <select multiple class="form-control" id="exampleSelect2">
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="exampleTextarea" class="bmd-label-floating">Example textarea</label>
-        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
-      </div>
-      <div class="form-group">
-        <label for="exampleInputFile" class="bmd-label-floating">File input</label>
-        <input type="file" class="form-control-file" id="exampleInputFile">
-        <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
-      </div>
-      <div class="radio">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-          Option one is this and that&mdash;be sure to include why it's great
-        </label>
-      </div>
-      <div class="radio">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-          Option two can be something else and selecting it will deselect option one
-        </label>
-      </div>
-      <div class="radio disabled">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
-          Option three is disabled
-        </label>
-      </div>
-      <div class="checkbox">
-        <label>
-          <input type="checkbox"> Check me out
-        </label>
-      </div>
-      <button class="btn btn-default">Cancel</button>
-      <button type="submit" class="btn btn-primary btn-raised">Submit</button>
-    </form>
+Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with
+the .form-control class. Included are styles for general appearance, focus
+state, sizing, and more.
 
-  </div>
+++++
+<div class="doc-example mb-3">
+  <form>
+    <div class="form-group">
+        <label for="exampleInputEmail1">Email address</label>
+      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+    </div>
+    <div class="form-group">
+      <label for="exampleFormControlSelect1">Example select</label>
+      <select class="form-control" id="exampleFormControlSelect1">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="exampleFormControlSelect2">Example multiple select</label>
+      <select multiple class="form-control" id="exampleFormControlSelect2">
+        <option>option 1</option>
+        <option>option 2</option>
+        <option>option 3</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="exampleFormControlTextarea1">Example textarea</label>
+      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+    </div>
+  </form>
+</div>
+++++
+
+For file inputs, swap the .form-control for .form-control-file.
+
+++++
+<div class="doc-example mb-3">
+  <form>
+    <div class="form-group">
+      <label for="exampleFormControlFile1">Example file input</label>
+      <input type="file" class="form-control-file" id="exampleFormControlFile1">
+    </div>
+  </form>
 </div>
 ++++
 
@@ -660,117 +618,107 @@ a tabbed interface. Use them to create tabbable regions with our tab
 JavaScript plugin.
 
 ++++
-<!-- Navs - Tabs
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-
-    <div class="col-md-10">
-      <div class="bs-component">
-        <ul class="nav nav-tabs">
-          <li class="nav-item">
-            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
-          </li>
-        </ul>
-        <div id="myTabContent" class="tab-content">
-          <div class="tab-pane fade active in" id="home">
-            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
-          </div>
-          <div class="tab-pane fade" id="profile">
-            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
-          </div>
-          <div class="tab-pane fade" id="dropdown1">
-            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
-          </div>
-          <div class="tab-pane fade" id="dropdown2">
-            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
-          </div>
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <ul class="nav nav-tabs">
+      <li class="nav-item">
+        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-toggle="dropdown"
+          href="javascript:(void)"
+          role="button"
+          aria-haspopup="true" aria-expanded="false">
+          Dropdown
+        </a>
+        <div class="dropdown-menu">
+          <a class="dropdown-item" href="javascript:(void)">Action</a>
+          <a class="dropdown-item" href="javascript:(void)">Another action</a>
+          <a class="dropdown-item" href="javascript:(void)">Something else here</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="javascript:(void)">Separated link</a>
         </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+      </li>
+    </ul>
+    <div id="myTabContent" class="tab-content">
+      <div class="tab-pane fade active in" id="home">
+        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+      </div>
+      <div class="tab-pane fade" id="profile">
+        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
+      </div>
+      <div class="tab-pane fade" id="dropdown1">
+        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
+      </div>
+      <div class="tab-pane fade" id="dropdown2">
+        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
       </div>
     </div>
-
   </div>
 </div>
 ++++
 
+
 === Pills
 
-Take that same HTML as Tabs, but use .nav-pills class instead:
+Take that same HTML as Tabs, but use .nav-pills class instead.
 
 ++++
-<!-- Navs - Pills
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-10">
-
-      <h5 class="notoc">Standard Pills</h5>
-      <div class="bs-component">
-        <ul class="nav nav-pills">
-          <li class="nav-item">
-            <a class="nav-link active" href="#">Active</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
-          </li>
-        </ul>
-      </div>
-      <br>
-        <h5 class="notoc">Stacked Pills (vertical)</h5>
-      <div class="bs-component">
-        <ul class="nav nav-pills flex-column">
-          <li class="nav-item">
-            <a class="nav-link active" href="#">Active</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-
+<div class="doc-example mb-3">
+  <h5 class="notoc">Standard Pills</h5>
+  <div class="bs-component">
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <a class="nav-link active" href="javascript:(void)">Active</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+        <div class="dropdown-menu">
+          <a class="dropdown-item" href="javascript:(void)">Action</a>
+          <a class="dropdown-item" href="javascript:(void)">Another action</a>
+          <a class="dropdown-item" href="javascript:(void)">Something else here</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:(void)">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+      </li>
+    </ul>
+  </div>
+  <br>
+    <h5 class="notoc">Stacked Pills (vertical)</h5>
+  <div class="bs-component">
+    <ul class="nav nav-pills flex-column">
+      <li class="nav-item">
+        <a class="nav-link active" href="javascript:(void)">Active</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+        <div class="dropdown-menu">
+          <a class="dropdown-item" href="javascript:(void)">Action</a>
+          <a class="dropdown-item" href="javascript:(void)">Another action</a>
+          <a class="dropdown-item" href="javascript:(void)">Something else here</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="javascript:(void)">Separated link</a>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:(void)">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+      </li>
+    </ul>
   </div>
 </div>
 ++++
@@ -783,28 +731,20 @@ hierarchy that automatically adds separators via CSS.
 Separators are automatically added in CSS through ::before and content.
 
 ++++
-<!-- Navs - Breadcrumbs
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-
-    <div class="col-md-10">
-      <div class="bs-component">
-        <ol class="breadcrumb">
-          <li class="breadcrumb-item active">Home</li>
-        </ol>
-        <ol class="breadcrumb">
-          <li class="breadcrumb-item"><a href="#">Home</a></li>
-          <li class="breadcrumb-item active">Library</li>
-        </ol>
-        <ol class="breadcrumb">
-          <li class="breadcrumb-item"><a href="#">Home</a></li>
-          <li class="breadcrumb-item"><a href="#">Library</a></li>
-          <li class="breadcrumb-item active">Data</li>
-        </ol>
-      </div>
-    </div>
-
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item active">Home</li>
+    </ol>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
+      <li class="breadcrumb-item active">Library</li>
+    </ol>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
+      <li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
+      <li class="breadcrumb-item active">Data</li>
+    </ol>
   </div>
 </div>
 ++++
@@ -818,90 +758,81 @@ the number of available links. Use a wrapping  element to identify
 it as a navigation section to screen readers and other assistive technologies.
 
 ++++
-<!-- Navs - Pagination
-============================================================================ -->
-
-<div class="row mb-5">
-  <div class="col-md-10">
-    <div class="bs-component">
-
-      <div>
-        <ul class="pagination">
-          <li class="page-item disabled">
-            <a class="page-link" href="#">&laquo;</a>
-          </li>
-          <li class="page-item active">
-            <a class="page-link" href="#">1</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">2</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">3</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">4</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">5</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">&raquo;</a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <ul class="pagination pagination-lg">
-          <li class="page-item disabled">
-            <a class="page-link" href="#">&laquo;</a>
-          </li>
-          <li class="page-item active">
-            <a class="page-link" href="#">1</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">2</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">3</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">4</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">5</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">&raquo;</a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <ul class="pagination pagination-sm">
-          <li class="page-item disabled">
-            <a class="page-link" href="#">&laquo;</a>
-          </li>
-          <li class="page-item active">
-            <a class="page-link" href="#">1</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">2</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">3</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">4</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">5</a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="#">&raquo;</a>
-          </li>
-        </ul>
-      </div>
-
-    </div>
+<div class="doc-example mb-3">
+  <div>
+    <ul class="pagination">
+      <li class="page-item disabled">
+        <a class="page-link" href="javascript:(void)">&laquo;</a>
+      </li>
+      <li class="page-item active">
+        <a class="page-link" href="javascript:(void)">1</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">4</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">5</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">&raquo;</a>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <ul class="pagination pagination-lg">
+      <li class="page-item disabled">
+        <a class="page-link" href="javascript:(void)">&laquo;</a>
+      </li>
+      <li class="page-item active">
+        <a class="page-link" href="javascript:(void)">1</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">4</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">5</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">&raquo;</a>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <ul class="pagination pagination-sm">
+      <li class="page-item disabled">
+        <a class="page-link" href="javascript:(void)">&laquo;</a>
+      </li>
+      <li class="page-item active">
+        <a class="page-link" href="javascript:(void)">1</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">4</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">5</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:(void)">&raquo;</a>
+      </li>
+    </ul>
   </div>
 </div>
 ++++
@@ -910,7 +841,6 @@ it as a navigation section to screen readers and other assistive technologies.
 
 lorem:sentences[5]
 
-
 === Alerts
 
 Alerts provide contextual feedback messages for typical user actions with the
@@ -925,16 +855,14 @@ pass:[]
 Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Indicators - Alerts
-============================================================================ -->
-<div class="bs-docs-section">
+<div class="doc-example mb-3">
   <div class="row mb-3">
     <div class="col-md-12">
       <div class="bs-component">
         <div class="alert alert-dismissible alert-warning">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
           <h4 class="alert-heading notoc">Warning!</h4>
-          <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
+          <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
         </div>
       </div>
     </div>
@@ -944,7 +872,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
       <div class="bs-component">
         <div class="alert alert-dismissible alert-danger">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+          <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
         </div>
       </div>
     </div>
@@ -952,7 +880,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
       <div class="bs-component">
         <div class="alert alert-dismissible alert-success">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
+          <strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
         </div>
       </div>
     </div>
@@ -960,7 +888,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
       <div class="bs-component">
         <div class="alert alert-dismissible alert-info">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+          <strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
         </div>
       </div>
     </div>
@@ -984,32 +912,26 @@ pass:[]
 Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Indicators - Badges
-============================================================================ -->
-<div class="bs-docs-section mb-4">
-  <div class="row">
-    <div class="col-md-10">
-      <div class="bs-component mb-3">
-        <span class="badge badge-primary">Primary</span>
-        <span class="badge badge-secondary">Secondary</span>
-        <span class="badge badge-success">Success</span>
-        <span class="badge badge-danger">Danger</span>
-        <span class="badge badge-warning">Warning</span>
-        <span class="badge badge-info">Info</span>
-        <span class="badge badge-light">Light</span>
-        <span class="badge badge-dark">Dark</span>
-      </div>
-      <div class="bs-component mb-4">
-        <span class="badge badge-pill badge-primary">Primary</span>
-        <span class="badge badge-pill badge-secondary">Secondary</span>
-        <span class="badge badge-pill badge-success">Success</span>
-        <span class="badge badge-pill badge-danger">Danger</span>
-        <span class="badge badge-pill badge-warning">Warning</span>
-        <span class="badge badge-pill badge-info">Info</span>
-        <span class="badge badge-pill badge-light">Light</span>
-        <span class="badge badge-pill badge-dark">Dark</span>
-      </div>
-    </div>
+<div class="doc-example mb-3">
+  <div class="bs-component mb-3">
+    <span class="badge badge-primary">Primary</span>
+    <span class="badge badge-secondary">Secondary</span>
+    <span class="badge badge-success">Success</span>
+    <span class="badge badge-danger">Danger</span>
+    <span class="badge badge-warning">Warning</span>
+    <span class="badge badge-info">Info</span>
+    <span class="badge badge-light">Light</span>
+    <span class="badge badge-dark">Dark</span>
+  </div>
+  <div class="bs-component mb-4">
+    <span class="badge badge-pill badge-primary">Primary</span>
+    <span class="badge badge-pill badge-secondary">Secondary</span>
+    <span class="badge badge-pill badge-success">Success</span>
+    <span class="badge badge-pill badge-danger">Danger</span>
+    <span class="badge badge-pill badge-warning">Warning</span>
+    <span class="badge badge-pill badge-info">Info</span>
+    <span class="badge badge-pill badge-light">Light</span>
+    <span class="badge badge-pill badge-dark">Dark</span>
   </div>
 </div>
 ++++
@@ -1028,18 +950,10 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 === Basic
 
 ++++
-<!-- Progress - Basic
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-10">
-
-      <div class="bs-component">
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-      </div>
-
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <div class="progress">
+      <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
   </div>
 </div>
@@ -1048,27 +962,19 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 === Contextual alternatives
 
 ++++
-<!-- Progress - Contextual alternatives
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-10">
-
-      <div class="bs-component">
-        <div class="progress">
-          <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-      </div>
-
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <div class="progress">
+      <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
   </div>
 </div>
@@ -1077,20 +983,12 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 === Multiple bars
 
 ++++
-<!-- Progress - Multiple bars
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-10">
-
-      <div class="bs-component">
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-          <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-          <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-      </div>
-
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <div class="progress">
+      <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+      <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+      <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
   </div>
 </div>
@@ -1099,30 +997,22 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 === Striped
 
 ++++
-<!-- Progress - Striped
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-10">
-
-      <div class="bs-component">
-        <div class="progress">
-          <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress">
-          <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-      </div>
-
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
   </div>
 </div>
@@ -1131,18 +1021,10 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 === Animated
 
 ++++
-<!-- Progress - Animated
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-    <div class="col-md-10">
-
-      <div class="bs-component">
-        <div class="progress">
-          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-        </div>
-      </div>
-
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
     </div>
   </div>
 </div>
@@ -1150,7 +1032,7 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
 
 == Containers
 
-lorem:sentences[5]
+lorem:sentences[3]
 
 lorem:sentences[2]
 
@@ -1162,22 +1044,16 @@ pass:[]
 Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Containers  - Jumbotron
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-3">
-    <div class="col-md-10">
-      <div class="bs-component">
-        <div class="jumbotron">
-          <h1 class="display-3">Hello, world!</h1>
-          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-          <hr class="my-4">
-          <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
-          <p class="lead">
-            <a class="btn btn-primary btn-raised btn-lg" href="#" role="button">Learn more</a>
-          </p>
-        </div>
-      </div>
+<div class="doc-example mb-3">
+  <div class="bs-component">
+    <div class="jumbotron">
+      <h1 class="display-3">Hello, world!</h1>
+      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+      <hr class="my-4">
+      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+      <p class="lead">
+        <a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
+      </p>
     </div>
   </div>
 </div>
@@ -1192,11 +1068,8 @@ pass:[]
 Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Containers  - List groups
-============================================================================ -->
-<div class="bs-docs-section">
+<div class="doc-example mb-3">
   <div class="row mb-5">
-
     <div class="col-md-4">
       <div class="bs-component">
         <ul class="list-group">
@@ -1219,12 +1092,12 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
     <div class="col-md-4">
       <div class="bs-component">
         <div class="list-group">
-          <a href="#" class="list-group-item list-group-item-action active">
+          <a href="javascript:(void)" class="list-group-item list-group-item-action active">
             Cras justo odio
           </a>
-          <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis
+          <a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
           </a>
-          <a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
+          <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
           </a>
         </div>
       </div>
@@ -1233,7 +1106,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
     <div class="col-md-4">
       <div class="bs-component">
         <div class="list-group">
-          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
+          <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
             <div class="d-flex w-100 justify-content-between">
               <h5 class="mb-1 notoc">List group item heading</h5>
               <small>3 days ago</small>
@@ -1241,7 +1114,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
             <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
             <small>Donec id elit non mi porta.</small>
           </a>
-          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+          <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
             <div class="d-flex w-100 justify-content-between">
               <h5 class="mb-1 notoc">List group item heading</h5>
               <small class="text-muted">3 days ago</small>
@@ -1257,6 +1130,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
 </div>
 ++++
 
+
 === Cards
 
 Bootstrap’s cards provide a flexible and extensible content container with
@@ -1277,10 +1151,8 @@ pass:[]
 Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Containers  - Cards
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
+<div class="doc-example mb-3">
+  <div class="row">
 
     <div class="col-md-4">
       <div class="bs-component">
@@ -1422,8 +1294,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
             <li class="list-group-item">Vestibulum at eros</li>
           </ul>
           <div class="card-body">
-            <a href="#" class="card-link">Card link</a>
-            <a href="#" class="card-link">Another link</a>
+            <a href="javascript:(void)" class="card-link">Card link</a>
+            <a href="javascript:(void)" class="card-link">Another link</a>
           </div>
           <div class="card-footer text-muted">
             2 days ago
@@ -1434,8 +1306,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
             <h4 class="card-title notoc">Card title</h4>
             <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-            <a href="#" class="card-link">Card link</a>
-            <a href="#" class="card-link">Another link</a>
+            <a href="javascript:(void)" class="card-link">Card link</a>
+            <a href="javascript:(void)" class="card-link">Another link</a>
           </div>
         </div>
       </div>
@@ -1460,16 +1332,20 @@ content scrolls instead.
 pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
 
-==== Base Modal
+.Modal types
+[cols="3a,7a,2a", options="header", width="100%", role="table-responsive mt-3"]
+|===============================================================================
+|Type |Description |Launch
 
-Toggle a working modal demo by clicking the button below. It will slide
+|*Base*
+|Toggle a working modal demo by clicking the button below. It will slide
 down and fade in from the top of the page.
-
+|
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleSimpleModal">
-    Launch Modal
+    Launch
   </button>
 </div>
 
@@ -1495,16 +1371,16 @@ down and fade in from the top of the page.
 </div>
 ++++
 
-==== Scrolling long content
-
-When modals become too long for the user’s viewport or device, they scroll
-independent of the page itself. Try the demo below to see what we mean.
-
+|*Scrolling long content*
+|When modals become too long for the user’s viewport or device, they scroll
+independent of the page itself. Try the demo and resize your browser for
+the height.
+|
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalLong">
-    Launch Modal
+    Launch
   </button>
 </div>
 
@@ -1547,15 +1423,14 @@ independent of the page itself. Try the demo below to see what we mean.
 </div>
 ++++
 
-==== Vertically centered
-
-Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
-
+|*Vertically centered*
+|For important messages, center the modal.
+|
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalVerticalCenter">
-    Launch Modal
+    Launch
   </button>
 </div>
 
@@ -1584,15 +1459,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 ++++
 
 
-==== Contact Form
-
-Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
-
+|*Form*
+|To save space on forms, dialogs can be part of a modal.
+|
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalContactForm">
-    Launch Modal
+    Launch
   </button>
 </div>
 
@@ -1639,15 +1513,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 </div>
 ++++
 
-==== Fluid Modal
-
-Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
-
+|*Fluid*
+|For e.g larger summaries, a vertical fluid modal can be used for that.
+|
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccess">
-    Launch Modal
+    Launch
   </button>
 </div>
 
@@ -1711,18 +1584,15 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 <!-- Full Height Modal Right Success-->
 ++++
 
-
-
-==== Tooltips and Popovers
-
-Tooltips and popovers can be placed within modals as needed. When modals are
+|*Tooltips and Popovers*
+|Tooltips and popovers can be placed within modals as needed. When modals are
 closed, any tooltips and popovers within are also automatically dismissed.
-
+|
 ++++
 <div class="ml-2 mb-5">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalTooltip">
-    Launch Modal
+    Launch
   </button>
 </div>
 
@@ -1741,7 +1611,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
         <p>This <a href="#" role="button" class="btn btn-secondary btn-round btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
         <hr>
         <h5>Tooltips in a modal</h5>
-        <p><a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
+        <p><a href="javascript:(void)" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
@@ -1752,6 +1622,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
 </div>
 ++++
 
+|===============================================================================
 
 === Popovers
 
@@ -1761,27 +1632,16 @@ bootstrap.bundle.js which contains Popper.js in order for popovers to work.
 
 Note: Popovers require the tooltip plugin as a dependency.
 
-
 pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
 Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Dialogs - Popovers
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-
-    <div class="col-md-8">
-      <div class="bs-component mt-3 mb-4">
-        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
-        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
-          sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
-        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
-        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
-      </div>
-    </div>
-
-  </div>
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
+  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+    sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
+  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
+  <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
 </div>
 ++++
 
@@ -1798,61 +1658,10 @@ pass:[]
 Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
 
 ++++
-<!-- Dialogs - Tooltips
-============================================================================ -->
-<div class="bs-docs-section">
-  <div class="row mb-5">
-
-    <div class="col-md-8">
-      <div class="bs-component mt-3 mb-4">
-        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
-        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
-        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
-        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
-      </div>
-    </div>
-
-  </div>
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
+  <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
 </div>
 ++++
-
-
-/////
-See: https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
-<script>
-  $(document).ready(function () {
-      $('input').attr('autocomplete', 'false');
-  });
-</script>
-
-  (function($) {
-  		$.fn.autoCompleteFix = function(opt) {
-          var ro = 'readonly', settings = $.extend({
-              attribute : 'autocomplete',
-              trigger : {
-                  disable : ["off"],
-              },
-              focus : function() {
-                  $(this).removeAttr(ro);
-              },
-              force : false
-          }, opt);
-
-          $(this).each(function(i, el) {
-              el = $(el);
-
-              if(el.is('form')) {
-                  var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
-                  el.find('input').autoCompleteFix({force:force});
-              } else {
-                  var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
-                  var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
-                  if (settings.force && !enabled || disabled)
-                      el.attr(ro, ro).focus(settings.focus).val("");
-              }
-          });
-      };
-      $('form').autoCompleteFix();
-  })(jQuery);
-
-/////