j1-template 2020.0.20 → 2021.0.0

data/lib/starter_web/pages/public/previewer/{000_includes → _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-stacked-lg mb-5"]
+[cols="2,1,9a", options="header", role="rtable mb-5"]
 |===============================================================================
 |Class |Result |Code
 

data/lib/starter_web/pages/public/previewer/{000_includes → _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-stacked-lg mb-5"]
+[cols="2,1,9a", options="header", role="rtable mb-5"]
 |===============================================================================
 |Class |Result |Code
 

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

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

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

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

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

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

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

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

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

@@ -1,18 +1,13 @@
 ---
 title:                                  Theme previewer
 tagline:                                common components
-description:                            Themes Previewer for common components of a selected theme.
+date:                                   2020-11-08 12:00:00
+description: >
+                                        Themes Previewer for common components of a selected theme.
+                                        Find base Bootstrap features and styles for the current
+                                        theme selected.
 
 tags:                                   [ App, Previewer ]
-index:                                  [
-                                          Bootstrap, Theme, Preview, Common,
-                                          Component, Navbars, Buttons, Typography,
-                                          Tables, Forms, Navs, Pills, Breadcrumbs,
-                                          Pagination, Indicators, Alerts, Badges,
-                                          Progress, Container, Jumbotron, List,
-                                          Groups, Cards, Dialogs, Modals,
-                                          Popovers, Tooltips
-                                        ]
 categories:                             [ pages ]
 
 flowtext:                               false
@@ -20,7 +15,7 @@ flowtext:                               false
 permalink:                              /pages/public/previewer/theme/
 regenerate:                             false
 
-resources:                              [ rouge ]
+resources:                              [ rouge, fam ]
 resource_options:
   - attic:
       padding_top:                      400
@@ -35,34 +30,30 @@ resource_options:
             href:                       https://unsplash.com/@clemono
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-//
 :page-liquid:
 
-// Set other global page attributes here
-// -------------------------------------------------------------------
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+//:my-asciidoc-attribute:
+// :scrollbars:
 
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-{% comment %} Liquid procedures
---------------------------------------------------------------- {% endcomment %}
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
 
 
-// NOTE: Initialize entry document paths
-//
-{% include {{set_env_entry_document}} init_folders=all %}
-
-// Load tags and urls
-//
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-
-// Additional ASCIIDOC attributes goes here
-//
-
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ++++
   <!-- Prepend H1 tag here -->
-  <div id="h1_theme_name" class="row mb-3">
+  <div id="h1_theme_name" class="row ml-0 mb-3">
 
     <!-- Load the previously selected theme from the (user state) cookie -->
     <script>
@@ -98,2156 +89,2385 @@ include::{includedir}/attributes.asciidoc[tag=urls]
   </div>
 ++++
 
-== Navbars
-
-See examples for Bootstrap’s powerful, responsive navigation header, the
-navbar. Includes support for branding, navigation, and more, including
-support for the collapse plugin.
-
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
+== Bootstrap Material Design
 
-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.
+lorem:sentences[5]
 
-++++
-<div class="doc-example mb-3">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
-    <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>
+=== MD Color Palette
 
-    <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>
-  </nav>
+The MD color palette comprises primary and accent colors that can be used for
+illustration or to develop your brand colors. They’ve been designed to work
+harmoniously with each other.
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
-    <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>
+The color palette starts with primary colors and fills in the spectrum to
+create a complete and usable palette for Android, Web, and iOS. Google
+suggests using the 500 colors as the primary colors in your app and the
+other colors as accents colors.
 
-    <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>
+=== Red and Pink
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
+        <li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
+        <li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
+        <li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
+        <li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
+        <li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
+        <li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
+        <li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
+        <li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
+        <li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
+        <li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
+        <li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
+        <li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
+        <li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
+        <li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </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>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
+        <li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
+        <li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
+        <li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
+        <li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
+        <li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
+        <li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
+        <li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
+        <li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
+        <li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
+        <li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
+        <li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
+        <li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
+        <li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
+        <li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </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>
 </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
-more with support for multiple sizes, states, and more. Bootstrap includes
-several predefined button styles, each serving its own semantic purpose,
-with a few extras thrown in for more control.
-
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></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.
+=== Purple and Deep Purple
 ++++
-<div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised">Primary</button>
-  <button type="button" class="btn btn-primary 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 class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
+        <li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
+        <li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
+        <li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
+        <li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
+        <li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
+        <li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
+        <li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
+        <li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
+        <li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
+        <li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
+        <li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
+        <li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
+        <li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
+        <li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
+        <li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
+        <li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
+        <li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
+        <li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
+        <li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
+        <li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
+        <li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
+        <li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
+        <li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
+        <li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
+        <li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
+        <li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
+        <li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
+        <li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
 ++++
 
-[source, html, role="noclip"]
-----
-<button type="button" class="btn btn-primary btn-raised">Primary</button>
-<button type="button" class="btn btn-primary 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>
-----
-
-
-=== 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-primary 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>
+=== Indigo and Blue
 ++++
-
-[source, html, role="noclip"]
-----
-<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
-<button type="button" class="btn btn-primary 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>
-----
-
-=== 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 class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
+        <li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
+        <li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
+        <li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
+        <li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
+        <li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
+        <li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
+        <li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
+        <li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
+        <li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
+        <li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
+        <li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
+        <li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
+        <li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
+        <li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
+        <li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
+        <li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
+        <li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
+        <li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
+        <li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
+        <li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
+        <li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
+        <li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
+        <li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
+        <li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
+        <li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
+        <li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
+        <li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
+        <li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
 ++++
 
-[source, html, role="noclip"]
-----
-<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>
-----
-
-=== Button sizes
-
-Beside the default size, small and large buttons are available.
-
+=== Light Blue and Cyan
 ++++
-<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 class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
+        <li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
+        <li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
+        <li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
+        <li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
+        <li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
+        <li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
+        <li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
+        <li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
+        <li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
+        <li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
+        <li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
+        <li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
+        <li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
+        <li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
+        <li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
+        <li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
+        <li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
+        <li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
+        <li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
+        <li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
+        <li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
+        <li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
+        <li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
+        <li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
+        <li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
+        <li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
+        <li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
+        <li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
 ++++
 
-[source, html, role="noclip"]
-----
-<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>
-----
-=== Block level button
-
-Create block level buttons—those that span the full width of a parent—by
-adding .btn-block.
-
+=== Teal and Green
 ++++
-<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 class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
+        <li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
+        <li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
+        <li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
+        <li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
+        <li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
+        <li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
+        <li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
+        <li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
+        <li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
+        <li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
+        <li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
+        <li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
+        <li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
+        <li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
+        <li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
+        <li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
+        <li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
+        <li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
+        <li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
+        <li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
+        <li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
+        <li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
+        <li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
+        <li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
+        <li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
+        <li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
+        <li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
+        <li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
 ++++
 
-[source, html, role="noclip"]
-----
-<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>
-----
-
-=== Toggle button
-
+=== Light Green and Lime
 ++++
-<div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
-    Single toggle
-  </button>
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
+        <li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
+        <li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
+        <li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
+        <li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
+        <li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
+        <li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
+        <li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
+        <li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
+        <li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
+        <li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
+        <li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
+        <li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
+        <li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
+        <li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
+        <li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
+        <li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
+        <li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
+        <li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
+        <li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
+        <li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
+        <li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
+        <li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
+        <li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
+        <li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
+        <li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
+        <li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
+        <li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
+        <li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
 ++++
 
-[source, html, role="noclip"]
-----
-<button type="button" class="btn btn-primary btn-raised"
-  data-toggle="button" aria-pressed="false" autocomplete="off">
-    Single toggle
-</button>
-----
-
-=== Checkboxes 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.
-
+=== Yellow and Amber
 ++++
-<div class="doc-example mb-3">
-  <div class="btn-group btn-group-toggle" data-toggle="buttons">
-    <label class="btn btn-primary btn-raised btn-flex active">
-      <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
-    </label>
-    <label class="btn btn-primary btn-raised btn-flex">
-      <input type="radio" name="options" id="option2" autocomplete="off"> Radio
-    </label>
-    <label class="btn btn-primary btn-raised btn-flex">
-      <input type="radio" name="options" id="option3" autocomplete="off"> Radio
-    </label>
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
+        <li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
+        <li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
+        <li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
+        <li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
+        <li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
+        <li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
+        <li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
+        <li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
+        <li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
+        <li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
+        <li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
+        <li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
+        <li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
+        <li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
+        <li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
+        <li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
+        <li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
+        <li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
+        <li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
+        <li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
+        <li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
+        <li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
+        <li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
+        <li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
+        <li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
+        <li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
+        <li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
+        <li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
+      </ul>
+    </div>
   </div>
 </div>
 ++++
 
-[source, html, role="noclip"]
-----
-<div class="btn-group btn-group-toggle" data-toggle="buttons">
-  <label class="btn btn-primary btn-raised btn-flex active">
-    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
-  </label>
-  <label class="btn btn-primary btn-raised btn-flex">
-    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
-  </label>
-  <label class="btn btn-primary btn-raised btn-flex">
-    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
-  </label>
+=== Orange and Deep Orange
+++++
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
+        <li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
+        <li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
+        <li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
+        <li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
+        <li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
+        <li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
+        <li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
+        <li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
+        <li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
+        <li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
+        <li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
+        <li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
+        <li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
+        <li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
+      </ul>
+    </div>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
+        <li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
+        <li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
+        <li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
+        <li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
+        <li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
+        <li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
+        <li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
+        <li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
+        <li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
+        <li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
+        <li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
+        <li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
+        <li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
+        <li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
+      </ul>
+    </div>
+  </div>
 </div>
-----
-
-== Typography
-
-Bootstrap sets basic global display, typography, and link styles. When more
-control is needed, check out the textual utility classes.
-
-For a more inclusive and accessible type scale, it is assuemed that
-the browser default root font-size (typically 16px) so visitors can
-customize their browser defaults as needed.
-
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
-
-=== Headings
+++++
 
+=== Brown and Grey
 ++++
-<div class="doc-example mb-3">
-  <div class="row mb-5">
-  <div class="col-md-4">
-      <h1 class="notoc">Heading 1</h1>
-      <h2 class="notoc">Heading 2</h2>
-      <h3 class="notoc">Heading 3</h3>
-      <h4 class="notoc">Heading 4</h4>
-      <h5 class="notoc">Heading 5</h5>
-      <h6 class="notoc">Heading 6</h6>
-      <h3 class="notoc">
-        Heading 3
-        <small class="text-muted">with muted text</small>
-      </h3>
-      <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-    </div>
-    <div class="col-md-4">
-      <h3 class="notoc">Example body text</h2>
-      <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>
-      <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
+        <li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
+        <li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
+        <li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
+        <li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
+        <li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
+        <li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
+        <li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
+        <li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
+        <li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
+        <li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
+      </ul>
     </div>
-    <div class="col-md-4">
-      <h3 class="notoc">Emphasis classes</h2>
-      <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-      <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
-      <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-      <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
+        <li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
+        <li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
+        <li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
+        <li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
+        <li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
+        <li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
+        <li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
+        <li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
+        <li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
+        <li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
+      </ul>
     </div>
   </div>
 </div>
 ++++
 
-=== Blockquotes
-
+=== Blue Grey and BW
 ++++
-<div class="doc-example mb-3">
-  <div class="row">
-    <div class="col-md-6">
-      <blockquote class="blockquote">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-      </blockquote>
+<div class="row col-list">
+  <div class="color-palette col-lg-12">
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
+        <li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
+        <li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
+        <li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
+        <li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
+        <li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
+        <li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
+        <li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
+        <li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
+        <li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
+        <li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
+      </ul>
     </div>
-    <div class="col-md-6">
-      <blockquote class="blockquote blockquote-reverse">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-      </blockquote>
+    <div class="color-group col-lg-6">
+      <ul>
+        <li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
+        <li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
+      </ul>
     </div>
   </div>
 </div>
 ++++
 
-== Tables
-
-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
-included modifier classes.
+== Navbars
 
-Using the most basic table markup, here’s how .table-based tables look in
-Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
-tables will be styled in the same manner as the parent.
+See examples for Bootstrap’s powerful, responsive navigation header, the
+navbar. Includes support for branding, navigation, and more, including
+support for the collapse plugin.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_navbar}[Bootstrap Docs {middot} Navbar, {browser-window--new}]
 
+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.
 
 ++++
 <div class="doc-example mb-3">
-  <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>
-++++
-
-== Forms
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
+    <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>
 
-Bootstrap’s form controls expand on our Rebooted form styles with classes.
-Use these classes to opt into their customized displays for a more consistent
-rendering across browsers and devices.
+    <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>
+  </nav>
 
-Be sure to use an appropriate type attribute on all inputs (e.g., email
-for email address or number for numerical information) to take advantage
-of newer input controls like email verification, number selection, and more.
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
+    <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>
 
-Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
-for documentation on required classes, form layout, and more.
+    <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>
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
+  <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="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 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>
-    <button type="submit" class="btn btn-primary btn-raised">Submit</button>
-  </form>
+  </nav>
 </div>
 ++++
 
-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.
+[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
+more with support for multiple sizes, states, and more. Bootstrap includes
+several predefined button styles, each serving its own semantic purpose,
+with a few extras thrown in for more control.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_buttons}[Bootstrap Docs {middot} Buttons, {browser-window--new}]
 
+=== Active buttons
+
+Buttons will appear pressed (with a darker background, darker border, and
+inset shadow) when active.
 ++++
 <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="exampleFormControlInput1">
-    </div>
-    <div class="form-group">
-      <label for="exampleFormControlSelect1" class="bmd-label-floating">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" class="bmd-label-floating">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" class="bmd-label-floating">Example textarea</label>
-      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
-    </div>
-  </form>
+  <button type="button" class="btn btn-primary btn-raised">Primary</button>
+  <button type="button" class="btn btn-primary 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>
 ++++
 
-For file inputs, swap the .form-control for .form-control-file.
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised">Primary</button>
+<button type="button" class="btn btn-primary 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>
+----
+
+
+=== Disabled buttons
 
+Buttons look inactive by adding the disabled boolean attribute to any
+<button> element.
 ++++
 <div class="doc-example mb-3">
-  <form>
-    <div class="form-group">
-      <label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
-      <input type="file" class="form-control-file" id="exampleFormControlFile1">
-    </div>
-  </form>
+  <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
+  <button type="button" class="btn btn-primary 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>
 ++++
 
-== Navs
-
-Navigation available in Bootstrap share general markup and styles, from the
-base .nav class to the active and disabled states. Swap modifier classes to
-switch between each style.
-
-The base .nav component is built with flexbox and provide a strong foundation
-for building all types of navigation components. It includes some style
-overrides (for working with lists), some link padding for larger hit areas,
-and basic disabled styling.
-
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_navs}[Bootstrap Docs, window="_blank"].
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
+<button type="button" class="btn btn-primary 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>
+----
 
-=== Tabs
+=== Outline buttons
 
-Tabs takes the basic nav from above and adds the .nav-tabs class to generate
-a tabbed interface. Use them to create tabbable regions with our tab
-JavaScript plugin.
+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">
-  <ul class="nav nav-tabs">
-    <li class="nav-item">
-      <a class="nav-link" 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>
+  <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>
 ++++
 
+[source, html, role="noclip"]
+----
+<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>
+----
 
-=== Pills
+=== Flat buttons
 
-Take that same HTML as Tabs, but use .nav-pills class instead.
+Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
+or inline. They do not lift, but fill with color on press.
 
 ++++
-<div class="doc-example mb-3">
-  <div class="row mb-5">
-
-    <div class="col-md-6">
-      <h5 class="notoc">Standard Pills</h5>
-      <ul class="nav nav-pills">
-        <li class="nav-item mr-1">
-          <a class="nav-link active" href="javascript:(void)">Active</a>
-        </li>
-        <li class="nav-item dropdown mr-1">
-          <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 mr-1">
-          <a class="nav-link" href="javascript:(void)">Link</a>
-        </li>
-        <li class="nav-item mr-1">
-          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
-        </li>
-      </ul>
-    </div>
-    <div class="col-md-6">
-      <h5 class="notoc">Stacked Pills (vertical)</h5>
-      <ul class="nav nav-pills flex-column">
-        <li class="nav-item mb-1">
-          <a class="nav-link active" href="javascript:(void)">Active</a>
-        </li>
-        <li class="nav-item dropdown mb-1">
-          <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 mb-1">
-          <a class="nav-link" href="javascript:(void)">Link</a>
-        </li>
-        <li class="nav-item mb-1">
-          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
-        </li>
-      </ul>
-    </div>
-  </div>
+<div class="doc-example">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
 </div>
 ++++
 
-=== Breadcrumbs
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-link">Link</button>
+----
 
-Breadcrumbs indicate the current page’s location within a navigational
-hierarchy that automatically adds separators via CSS.
 
-Separators are automatically added in CSS through ::before and content.
+=== Button sizes
+
+Beside the default size, small and large buttons are available.
 
 ++++
 <div class="doc-example mb-3">
-  <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>
+  <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>
 ++++
 
-=== Pagination
+[source, html, role="noclip"]
+----
+<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>
+----
 
-We use a large block of connected links for our pagination, making links
-hard to miss and easily scalable—all while providing large hit areas.
-Pagination is built with list HTML elements so screen readers can announce
-the number of available links. Use a wrapping <nav> element to identify
-it as a navigation section to screen readers and other assistive technologies.
+=== 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">
-  <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>
+  <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>
 ++++
 
-== Indicators
+[source, html, role="noclip"]
+----
+<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>
+----
 
-lorem:sentences[5]
+=== Toggle button
 
-=== Alerts
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
+    Single toggle
+  </button>
+</div>
+++++
 
-Alerts provide contextual feedback messages for typical user actions with the
-handful of available and flexible alert messages.
+[source, html, role="noclip"]
+----
+<button type="button" class="btn btn-primary btn-raised"
+  data-toggle="button" aria-pressed="false" autocomplete="off">
+    Single toggle
+</button>
+----
 
-Alerts are available for any length of text, as well as an optional dismiss
-button. For proper styling, use one of the eight required contextual classes
-(e.g., .alert-success). For inline dismissal, use the alerts
-https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
+=== Checkboxes and Radio buttons
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
+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="row mb-3">
-    <div class="col-md-12">
-      <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="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
-      </div>
-    </div>
-  </div>
-  <div class="row mb-5">
-    <div class="col-md-4">
-      <div class="alert alert-dismissible alert-danger">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
-      </div>
-    </div>
-    <div class="col-md-4">
-      <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="javascript:(void)" class="alert-link">this important alert message</a>.
-      </div>
-    </div>
-    <div class="col-md-4">
-      <div class="alert alert-dismissible alert-info">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <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 class="btn-group btn-group-toggle" data-toggle="buttons">
+    <label class="btn btn-primary btn-raised btn-flex active">
+      <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+    </label>
+    <label class="btn btn-primary btn-raised btn-flex">
+      <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+    </label>
+    <label class="btn btn-primary btn-raised btn-flex">
+      <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+    </label>
   </div>
 </div>
 ++++
 
-=== Badges
+[source, html, role="noclip"]
+----
+<div class="btn-group btn-group-toggle" data-toggle="buttons">
+  <label class="btn btn-primary btn-raised btn-flex active">
+    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+  </label>
+  <label class="btn btn-primary btn-raised btn-flex">
+    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+  </label>
+  <label class="btn btn-primary btn-raised btn-flex">
+    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+  </label>
+</div>
+----
 
-Badges are small count and labeling components. They scale to match the size
-of the immediate parent element by using relative font sizing and em units.
+=== Floating action buttons
 
-Note that depending on how they are used, badges may be confusing for users
-of screen readers and similar assistive technologies. While the styling of
-badges provides a visual cue as to their purpose, these users will simply
-be presented with the content of the badge. Depending on the specific
-situation, these badges may seem like random additional words or numbers
-at the end of a sentence, link, or button.
+A floating action button represents the primary action in an application,
+it is used for a promoted action.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
 
 ++++
-<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 class="doc-example">
+  <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
 </div>
 ++++
 
-== Progress
-
-Bootstrap custom progress bars featuring support for stacked bars, animated
-backgrounds, and text labels. Progress components are built with two HTML
-elements, some CSS to set the width, and a few attributes. We don’t use the
-HTML5 <progress> element, ensuring you can stack progress bars, animate them,
-and place text labels over them.
-
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
+[source, html, role="noclip"]
+----
+  <button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+----
 
-=== Basic
+==== Colors
 
 ++++
-<div class="doc-example mb-3">
-  <div class="progress">
-    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-  </div>
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
 </div>
 ++++
 
-.Basic progressbar
 [source, html, role="noclip"]
 ----
-  <div class="progress">
-    <div  class="progress-bar" role="progressbar"
-          style="width: 25%;"
-          aria-valuenow="25"
-          aria-valuemin="0"
-          aria-valuemax="100">
-    </div>
-  </div>
+  <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  ...
+  <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
+  <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
+    <i class="mdi mdi-plus mdi-2x"></i>
+  </button>
 ----
 
-=== Contextual alternatives
+==== Sizes
+
+A smaller sized, i.e. mini floating action button, is also available.
 
 ++++
-<div class="doc-example mb-3">
-  <div class="progress mb-1">
-    <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 mb-1">
-    <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 mb-1">
-    <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 class="doc-example">
+  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
+    <i class="mdi mdi-plus mdi-sm"></i>
+  </button>
 </div>
 ++++
 
-.Progressbar SUCCESS
 [source, html, role="noclip"]
 ----
-  <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>
+  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
+    <i class="mdi mdi-plus mdi-sm"></i>
+  </button>
 ----
 
-=== Multiple bars
+== Typography
 
-++++
-<div class="doc-example mb-3">
-  <div class="progress">
-    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-    <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-    <div class="progress-bar bg-danger"  role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-  </div>
-</div>
-++++
+Bootstrap sets basic global display, typography, and link styles. When more
+control is needed, check out the textual utility classes.
 
-=== Striped
+For a more inclusive and accessible type scale, it is assuemed that
+the browser default root font-size (typically 16px) so visitors can
+customize their browser defaults as needed.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_content_typography}[Bootstrap Docs {middot} Typography, {browser-window--new}]
+
+=== Headings
 
 ++++
 <div class="doc-example mb-3">
-  <div class="progress mb-1">
-    <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 mb-1">
-    <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 mb-1">
-    <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 mb-1">
-    <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 class="row mb-5">
+  <div class="col-md-4">
+      <h1 class="notoc">Heading 1</h1>
+      <h2 class="notoc">Heading 2</h2>
+      <h3 class="notoc">Heading 3</h3>
+      <h4 class="notoc">Heading 4</h4>
+      <h5 class="notoc">Heading 5</h5>
+      <h6 class="notoc">Heading 6</h6>
+      <h3 class="notoc">
+        Heading 3
+        <small class="text-muted">with muted text</small>
+      </h3>
+      <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+    </div>
+    <div class="col-md-4">
+      <h3 class="notoc">Example body text</h2>
+      <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>
+      <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+    </div>
+    <div class="col-md-4">
+      <h3 class="notoc">Emphasis classes</h2>
+      <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+      <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+      <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+      <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+      <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    </div>
   </div>
 </div>
 ++++
 
-=== Animated
+=== Blockquotes
 
 ++++
 <div class="doc-example mb-3">
-  <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 class="row">
+    <div class="col-md-6">
+      <blockquote class="blockquote">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+      </blockquote>
+    </div>
+    <div class="col-md-6">
+      <blockquote class="blockquote blockquote-reverse">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+      </blockquote>
+    </div>
   </div>
 </div>
 ++++
 
-== Containers
-
-lorem:sentences[3]
+== Tables
 
-lorem:sentences[2]
+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
+included modifier classes.
 
-=== Jumbotron
+Using the most basic table markup, here’s how .table-based tables look in
+Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
+tables will be styled in the same manner as the parent.
 
-Lightweight, flexible component for showcasing hero unit style content.
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_content_tables}[Bootstrap Docs {middot} Tables, {browser-window--new}]
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
 
 ++++
 <div class="doc-example mb-3">
-  <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>
-++++
-
-=== List groups
-
-List groups are a flexible and powerful component for displaying a series of
-content. Modify and extend them to support just about any content within.
+  <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>
+++++
+
+== Forms
+
+Bootstrap’s form controls expand on our Rebooted form styles with classes.
+Use these classes to opt into their customized displays for a more consistent
+rendering across browsers and devices.
+
+Be sure to use an appropriate type attribute on all inputs (e.g., email
+for email address or number for numerical information) to take advantage
+of newer input controls like email verification, number selection, and more.
+
+Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
+for documentation on required classes, form layout, and more.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_forms}[Bootstrap Docs {middot} Forms, {browser-window--new}]
 
 ++++
 <div class="doc-example mb-3">
-  <div class="row mb-5">
-    <div class="col-md-4">
-      <ul class="list-group">
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          Cras justo odio
-          <span class="badge badge-primary badge-pill">14</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          Dapibus ac facilisis
-          <span class="badge badge-primary badge-pill">2</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          Morbi leo risus
-          <span class="badge badge-primary badge-pill">1</span>
-        </li>
-      </ul>
+  <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="col-md-4">
-      <div class="list-group">
-        <a href="javascript:(void)" class="list-group-item list-group-item-action active">
-          Cras justo odio
-        </a>
-        <a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
-        </a>
-        <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
-        </a>
-      </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>
+++++
 
-    <div class="col-md-4">
-      <div class="list-group">
-        <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>
-          </div>
-          <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="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>
-          </div>
-          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-          <small class="text-muted">Donec id elit non mi porta.</small>
-        </a>
-      </div>
+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 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="exampleFormControlInput1">
+    </div>
+    <div class="form-group">
+      <label for="exampleFormControlSelect1" class="bmd-label-floating">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" class="bmd-label-floating">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" class="bmd-label-floating">Example textarea</label>
+      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
     </div>
+  </form>
+</div>
+++++
 
-  </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" class="bmd-label-floating">Example file input</label>
+      <input type="file" class="form-control-file" id="exampleFormControlFile1">
+    </div>
+  </form>
 </div>
 ++++
 
+== Navs
 
-=== Cards
+Navigation available in Bootstrap share general markup and styles, from the
+base .nav class to the active and disabled states. Swap modifier classes to
+switch between each style.
 
-Bootstrap’s cards provide a flexible and extensible content container with
-multiple variants and options. A card is a flexible and extensible content
-container. It includes options for headers and footers, a wide variety of
-content, contextual background colors, and powerful display options.
+The base .nav component is built with flexbox and provide a strong foundation
+for building all types of navigation components. It includes some style
+overrides (for working with lists), some link padding for larger hit areas,
+and basic disabled styling.
 
-If you’re familiar with Bootstrap 3, cards replace our old panels, wells,
-and thumbnails. Similar functionality to those components is available as
-modifier classes for cards.
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_navs}[Bootstrap Docs {middot} Navs, {browser-window--new}]
 
-Cards are built with as little markup and styles as possible, but still
-manage to deliver a ton of control and customization. Built with flexbox,
-they offer easy alignment and mix well with other Bootstrap components.
-They have no margin by default, so use spacing utilities as needed.
+=== Tabs
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
+Tabs takes the basic nav from above and adds the .nav-tabs class to generate
+a tabbed interface. Use them to create tabbable regions with our tab
+JavaScript plugin.
 
 ++++
 <div class="doc-example mb-3">
-
-  <div class="row">
-    <div class="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-body">
-          <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="javascript:(void)" class="card-link">Card link</a>
-          <a href="javascript:(void)" class="card-link">Another link</a>
-        </div>
+  <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 show" 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="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-body">
-          <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="javascript:(void)" class="card-link">Card link</a>
-          <a href="javascript:(void)" class="card-link">Another link</a>
-        </div>
-      </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="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-body">
-          <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="javascript:(void)" class="card-link">Card link</a>
-          <a href="javascript:(void)" class="card-link">Another link</a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-header text-white bg-primary">
-          <h3 class="notoc">Header</h3>
-        </div>
-        <div class="card-body">
-          <h4 class="card-title notoc">Primary card title</h4>
-          <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>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-header text-white bg-secondary">
-          <h3 class="notoc">Header</h3>
-        </div>
-        <div class="card-body">
-          <h4 class="card-title notoc">Secondary card title</h4>
-          <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>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-header text-white bg-success">
-          <h3 class="notoc">Header</h3>
-        </div>
-        <div class="card-body">
-          <h4 class="card-title notoc">Success card title</h4>
-          <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>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-header text-white bg-info">
-          <h3 class="notoc">Header</h3>
-        </div>
-        <div class="card-body">
-          <h4 class="card-title notoc">Info card title</h4>
-          <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>
-        </div>
-        <div class="card-footer r-text-200">
-          <a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
-             href="javascript:(void)">Action · Footer Link
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-header text-white bg-warning">
-          <h3 class="notoc">Header</h3>
-        </div>
-        <div class="card-body">
-          <h4 class="card-title notoc">Warning card title</h4>
-          <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>
-        </div>
-        <div class="card-footer r-text-200">
-          <a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
-             href="javascript:(void)">Action · Footer Link
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <div class="card-header text-white bg-danger">
-          <h3 class="notoc">Header</h3>
-        </div>
-        <div class="card-body">
-          <h4 class="card-title notoc">Danger card title</h4>
-          <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>
-        </div>
-        <div class="card-footer r-text-200">
-          <a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
-             href="javascript:(void)">Action · Footer Link
-          </a>
-        </div>
-      </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>
-
-  <div class="row">
-    <div class="col-md-4 col-sm-4 col-xs-12">
-      <div class="card mb-3" style="max-width: 20rem;">
-        <h3 class="card-header notoc">Header</h3>
-        <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
-        <div class="card-body">
-          <h5 class="card-title notoc">Special title treatment</h5>
-          <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
-        </div>
-
-        <div class="card-body">
-          <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>
-        </div>
-        <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis</li>
-          <li class="list-group-item">Vestibulum at eros</li>
-        </ul>
-        <div class="card-body">
-          <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
-        </div>
-      </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>
 ++++
 
-== Dialogs
-
-lorem:sentences[5]
-
-=== Modals
-
-Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
-lightboxes, user notifications, or completely custom content. Modals are
-built with HTML, CSS, and JavaScript. They’re positioned over everything
-else in the document and remove scroll from the <body> so that modal
-content scrolls instead.
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
+=== Pills
 
-.Modal types
-[cols="2a,8a,2a", options="header", width="100%", role="table-responsive-stacked-lg"]
-|===============================================================================
-|Type |Description |Launch Example
+Take that same HTML as Tabs, but use .nav-pills class instead.
 
-|*Base*
-|Lauch the modal by clicking the button below. It will slide down and fade in
-from the top of the page.
-|
 ++++
-<div class="ml-0">
-  <!-- Button trigger modal -->
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleSimpleModal">
-    Launch Example
-  </button>
-</div>
+<div class="doc-example mb-3">
+  <div class="row mb-5">
 
-<!-- Modal -->
-<div id="exampleSimpleModal"
-  class="modal fade top"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>Modal body text goes here.</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
-      </div>
+    <div class="col-md-6">
+      <h5 class="notoc">Standard Pills</h5>
+      <ul class="nav nav-pills">
+        <li class="nav-item mr-1 mb-2">
+          <a class="nav-link active" href="javascript:(void)">Active</a>
+        </li>
+        <li class="nav-item dropdown mr-1">
+          <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 mr-1 mb-2">
+          <a class="nav-link" href="javascript:(void)">Link</a>
+        </li>
+        <li class="nav-item mr-1 mb-2">
+          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+        </li>
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <h5 class="notoc">Stacked Pills (vertical)</h5>
+      <ul class="nav nav-pills flex-column mb-4">
+        <li class="nav-item mb-2">
+          <a class="nav-link active" href="javascript:(void)">Active</a>
+        </li>
+        <li class="nav-item dropdown mb-1">
+          <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 mb-2">
+          <a class="nav-link" href="javascript:(void)">Link</a>
+        </li>
+        <li class="nav-item mb-2">
+          <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
 ++++
 
-|*Static backdrop*
-|This model is set to *static* and is will *not* close when clicking outside
-it (the backdrop).
-|
+=== Breadcrumbs
+
+Breadcrumbs indicate the current page’s location within a navigational
+hierarchy that automatically adds separators via CSS.
+
+Separators are automatically added in CSS through ::before and content.
+
 ++++
-<div class="ml-0">
-  <!-- Button trigger modal -->
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleStaticModal">
-    Launch Example
-  </button>
+<div class="doc-example mb-3">
+  <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>
+++++
 
-<!-- Modal -->
-<div id="exampleStaticModal"
-  class="modal fade"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleStaticModalLabel" aria-hidden="true"
-  data-keyboard="false"
-  data-backdrop="static">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>Modal body text goes here.</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
-      </div>
-    </div>
+=== Pagination
+
+We use a large block of connected links for our pagination, making links
+hard to miss and easily scalable—all while providing large hit areas.
+Pagination is built with list HTML elements so screen readers can announce
+the number of available links. Use a wrapping <nav> element to identify
+it as a navigation section to screen readers and other assistive technologies.
+
+++++
+<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>
 ++++
 
-|*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-0">
-  <!-- Button trigger modal -->
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleModalLong">
-    Launch Example
-  </button>
-</div>
+== Indicators
 
-<!-- Modal -->
-<div
-  id="exampleModalLong"
-  class="modal fade"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleModalLongTitle" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+lorem:sentences[5]
+
+=== Alerts
+
+Alerts provide contextual feedback messages for typical user actions with the
+handful of available and flexible alert messages.
+
+Alerts are available for any length of text, as well as an optional dismiss
+button. For proper styling, use one of the eight required contextual classes
+(e.g., .alert-success). For inline dismissal, use the alerts
+https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_alerts}[Bootstrap Docs {middot} Alerts, {browser-window--new}]
+
+++++
+<div class="doc-example mb-3">
+  <div class="row mb-3">
+    <div class="col-md-12">
+      <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="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
       </div>
-      <div class="modal-body">
-        <p>
-          On the other hand, we denounce with righteous indignation and dislike men who
-          are so beguiled and demoralized by the charms of pleasure of the moment, so
-          blinded by desire, that they cannot foresee the pain and trouble that are
-          bound to ensue; and equal blame belongs to those who fail in their duty through
-          weakness of will, which is the same as saying through shrinking from toil and pain.
-        </p>
-        <p>
-          These cases are perfectly simple and easy to distinguish. In a free hour, when
-          our power of choice is untrammelled and when nothing prevents our being able to
-          do what we like best, every pleasure is to be welcomed and every pain avoided.
-          But in certain circumstances and owing to the claims of duty or the obligations
-          of business is will frequently occur that pleasures have to be repudiated and
-          annoyances accepted. The wise man therefore always holds in these matters to
-          this principle of selection: he rejects pleasures to secure other greater
-          pleasures, or else he endures pains to avoid worse pains.
-        </p>
-        <p>
-          On the other hand, we denounce with righteous indignation and dislike men who
-          are so beguiled and demoralized by the charms of pleasure of the moment, so
-          blinded by desire, that they cannot foresee the pain and trouble that are
-          bound to ensue; and equal blame belongs to those who fail in their duty through
-          weakness of will, which is the same as saying through shrinking from toil and pain.
-        </p>
-        <p>
-          These cases are perfectly simple and easy to distinguish. In a free hour, when
-          our power of choice is untrammelled and when nothing prevents our being able to
-          do what we like best, every pleasure is to be welcomed and every pain avoided.
-          But in certain circumstances and owing to the claims of duty or the obligations
-          of business is will frequently occur that pleasures have to be repudiated and
-          annoyances accepted. The wise man therefore always holds in these matters to
-          this principle of selection: he rejects pleasures to secure other greater
-          pleasures, or else he endures pains to avoid worse pains.
-        </p>
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-md-4">
+      <div class="alert alert-dismissible alert-danger">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
       </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+    </div>
+    <div class="col-md-4">
+      <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="javascript:(void)" class="alert-link">this important alert message</a>.
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="alert alert-dismissible alert-info">
+        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <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>
 </div>
 ++++
 
-|*Scrollable long content*
-|It#s also possible to create a scrollable modal that allows scroll the
-modal body. Try the demo and scroll the content.
-|
+=== Badges
+
+Badges are small count and labeling components. They scale to match the size
+of the immediate parent element by using relative font sizing and em units.
+
+Note that depending on how they are used, badges may be confusing for users
+of screen readers and similar assistive technologies. While the styling of
+badges provides a visual cue as to their purpose, these users will simply
+be presented with the content of the badge. Depending on the specific
+situation, these badges may seem like random additional words or numbers
+at the end of a sentence, link, or button.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_badges}[Bootstrap Docs {middot} Badge, {browser-window--new}]
+
 ++++
-<div class="ml-0">
-  <!-- Button trigger modal -->
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleModalLongScrollable">
-    Launch Example
-  </button>
+<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>
+++++
 
-<!-- Modal -->
-<div
-  id="exampleModalLongScrollable"
-  class="modal fade"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-scrollable">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>
-          On the other hand, we denounce with righteous indignation and dislike men who
-          are so beguiled and demoralized by the charms of pleasure of the moment, so
-          blinded by desire, that they cannot foresee the pain and trouble that are
-          bound to ensue; and equal blame belongs to those who fail in their duty through
-          weakness of will, which is the same as saying through shrinking from toil and pain.
-        </p>
-        <p>
-          These cases are perfectly simple and easy to distinguish. In a free hour, when
-          our power of choice is untrammelled and when nothing prevents our being able to
-          do what we like best, every pleasure is to be welcomed and every pain avoided.
-          But in certain circumstances and owing to the claims of duty or the obligations
-          of business is will frequently occur that pleasures have to be repudiated and
-          annoyances accepted. The wise man therefore always holds in these matters to
-          this principle of selection: he rejects pleasures to secure other greater
-          pleasures, or else he endures pains to avoid worse pains.
-        </p>
-        <p>
-          On the other hand, we denounce with righteous indignation and dislike men who
-          are so beguiled and demoralized by the charms of pleasure of the moment, so
-          blinded by desire, that they cannot foresee the pain and trouble that are
-          bound to ensue; and equal blame belongs to those who fail in their duty through
-          weakness of will, which is the same as saying through shrinking from toil and pain.
-        </p>
-        <p>
-          These cases are perfectly simple and easy to distinguish. In a free hour, when
-          our power of choice is untrammelled and when nothing prevents our being able to
-          do what we like best, every pleasure is to be welcomed and every pain avoided.
-          But in certain circumstances and owing to the claims of duty or the obligations
-          of business is will frequently occur that pleasures have to be repudiated and
-          annoyances accepted. The wise man therefore always holds in these matters to
-          this principle of selection: he rejects pleasures to secure other greater
-          pleasures, or else he endures pains to avoid worse pains.
-        </p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
-      </div>
+ifdef::scrollbars[]
+=== Scrollbars
+
+// https://codepen.io/devstreak/pen/dMYgeO
+
+Chrome, Edge, Safari and Opera support the non-standard `::-webkit-scrollbar`
+pseudo element, which allows to modify the look of the browser's scrollbar.
+
+NOTE: Custom scrollbars are not supported in Firefox or in Edge, prior
+version 79 (Chromium based).
+
+.Default scrollbar J1 Template
+[source, css, role="noclip"]
+----
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0,3);
+	background-color: #E0E0E0;
+}
+
+::-webkit-scrollbar {
+	width: 3px;
+	background-color: #2196F3;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: #2196F3;
+}
+----
+
+For J1 Template, following flavours are implemented.
+
+[subs="attributes"]
+++++
+<div>
+  <div class="row">
+    <div class="scrollbar" id="style-default">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-1">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-2">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-3">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-4">
+      <div class="force-overflow"></div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="scrollbar scroller-5">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-6">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-7">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-8">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-9">
+      <div class="force-overflow"></div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="scrollbar scroller-10">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-11">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-13">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-14">
+      <div class="force-overflow"></div>
+    </div>
+
+    <div class="scrollbar scroller-15">
+      <div class="force-overflow"></div>
     </div>
   </div>
 </div>
+
+<!-- script>
+NOTE: $.browser.webkit does NOT exists !!!
+if (!$.browser.webkit) {
+  $('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
+}
+</script -->
 ++++
+endif::[]
+
+== Progress
+
+Bootstrap custom progress bars featuring support for stacked bars, animated
+backgrounds, and text labels. Progress components are built with two HTML
+elements, some CSS to set the width, and a few attributes. We don’t use the
+HTML5 <progress> element, ensuring you can stack progress bars, animate them,
+and place text labels over them.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_progress}[Bootstrap Docs {middot} Progress, {browser-window--new}]
+
+=== Basic
 
-|*Vertically centered*
-|For important messages, center the modal.
-|
 ++++
-<div class="ml-0">
-  <!-- Button trigger modal -->
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal" data-target="#exampleModalVerticalCenter">
-    Launch Example
-  </button>
+<div class="doc-example mb-3">
+  <div class="progress">
+    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
 </div>
+++++
 
-<!-- Modal -->
-<div id="exampleModalVerticalCenter"
-  class="modal fade"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
-      </div>
+.Basic progressbar
+[source, html, role="noclip"]
+----
+  <div class="progress">
+    <div  class="progress-bar" role="progressbar"
+          style="width: 25%;"
+          aria-valuenow="25"
+          aria-valuemin="0"
+          aria-valuemax="100">
     </div>
   </div>
+----
+
+=== Contextual alternatives
+
+++++
+<div class="doc-example mb-3">
+  <div class="progress mb-1">
+    <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 mb-1">
+    <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 mb-1">
+    <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>
 ++++
 
-|*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.
-|
+.Progressbar SUCCESS
+[source, html, role="noclip"]
+----
+  <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>
+----
+
+=== Multiple bars
+
 ++++
-<div class="ml-0">
-  <!-- Button trigger modal -->
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleModalTooltip">
-    Launch Example
-  </button>
+<div class="doc-example mb-3">
+  <div class="progress">
+    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress-bar bg-danger"  role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+  </div>
 </div>
+++++
 
-<!-- Modal -->
-<div id="exampleModalTooltip"
-  class="modal fade"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <h5 class="notoc">Popover in a modal</h5>
-        <p>This <a href="#" role="button" class="btn btn-primary 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 hover or click.</p>
-        <hr>
-        <h5 class="notoc">Tooltips in a modal</h5>
-        <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-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
-      </div>
-    </div>
+=== Striped
+
+++++
+<div class="doc-example mb-3">
+  <div class="progress mb-1">
+    <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 mb-1">
+    <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 mb-1">
+    <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 mb-1">
+    <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>
 ++++
-|===============================================================================
 
-.Base Modal example
-[source, html, role="noclip"]
-----
-<!-- Trigger Button (modal) -->
-<div class="ml-0">
-  <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleSimpleModal">
-    Launch Example
-  </button>
+=== Animated
+
+++++
+<div class="doc-example mb-3">
+  <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>
+++++
 
-<!-- Modal -->
-<div id="exampleSimpleModal"
-  class="modal fade top"
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="exampleSimpleModalLabel"
-  aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>Modal body text goes here.</p>
+== Containers
+
+lorem:sentences[3]
+
+lorem:sentences[2]
+
+=== Jumbotron
+
+Lightweight, flexible component for showcasing hero unit style content.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_jumbotron}[Bootstrap Docs {middot} Jumbotron, {browser-window--new}]
+
+++++
+<div class="doc-example mb-3">
+  <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>
+++++
+
+=== List groups
+
+List groups are a flexible and powerful component for displaying a series of
+content. Modify and extend them to support just about any content within.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_list_group}[Bootstrap Docs {middot} List group, {browser-window--new}]
+
+++++
+<div class="doc-example mb-3">
+  <div class="row mb-5">
+    <div class="col-md-4">
+      <ul class="list-group">
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          Cras justo odio
+          <span class="badge badge-primary badge-pill">14</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          Dapibus ac facilisis
+          <span class="badge badge-primary badge-pill">2</span>
+        </li>
+        <li class="list-group-item d-flex justify-content-between align-items-center">
+          Morbi leo risus
+          <span class="badge badge-primary badge-pill">1</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-md-4">
+      <div class="list-group">
+        <a href="javascript:(void)" class="list-group-item list-group-item-action active">
+          Cras justo odio
+        </a>
+        <a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
+        </a>
+        <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
+        </a>
       </div>
-      <div class="modal-footer">
-        <button type="button"
-          class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
-        </button>
-        <button
-          type="button"
-          class="btn btn-secondary btn-flex btn-raised"
-          data-dismiss="modal"> Close
-        </button>
+    </div>
+
+    <div class="col-md-4">
+      <div class="list-group">
+        <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>
+          </div>
+          <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="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>
+          </div>
+          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+          <small class="text-muted">Donec id elit non mi porta.</small>
+        </a>
       </div>
     </div>
+
   </div>
 </div>
-----
+++++
 
-=== Popovers and Tooltips
 
-Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
-To make them properly positioned, the Javascript library `popper.min.js` has to
-be included before `bootstrap.js` in order to make popovers and tooltips to work.
+=== Cards
 
-pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
-Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
+Bootstrap’s cards provide a flexible and extensible content container with
+multiple variants and options. A card is a flexible and extensible content
+container. It includes options for headers and footers, a wide variety of
+content, contextual background colors, and powerful display options.
 
-NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
+If you’re familiar with Bootstrap 3, cards replace our old panels, wells,
+and thumbnails. Similar functionality to those components is available as
+modifier classes for cards.
+
+Cards are built with as little markup and styles as possible, but still
+manage to deliver a ton of control and customization. Built with flexbox,
+they offer easy alignment and mix well with other Bootstrap components.
+They have no margin by default, so use spacing utilities as needed.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_cards}[Bootstrap Docs {middot} Card, {browser-window--new}]
 
 ++++
 <div class="doc-example mb-3">
-  <div class="row mb-5">
-    <div class="col-md-6">
-      <h5 class="mb-5 notoc">Popovers</h5>
-      <button type="button" class="btn btn-primary 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-primary 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-primary 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-primary 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 class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-body">
+          <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="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
+        </div>
+      </div>
     </div>
-    <div class="col-md-6">
-      <h5 class="mb-5 notoc">Tooltips</h5>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-body">
+          <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="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-body">
+          <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="javascript:(void)" class="card-link">Card link</a>
+          <a href="javascript:(void)" class="card-link">Another link</a>
+        </div>
+      </div>
     </div>
   </div>
-</div>
-++++
 
-.Example for Popovers and Tooltips
-[source, html, role="noclip"]
-----
-  <div class="row mb-5">
-    <div class="col-md-6">
-      <h5 class="mb-5 notoc">Popovers</h5>
-      <button type="button" class="btn btn-primary 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>
-      ...
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-primary">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Primary card title</h4>
+          <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>
+        </div>
+      </div>
     </div>
-    <div class="col-md-6">
-      <h5 class="mb-5 notoc">Tooltips</h5>
-      <button type="button" class="btn btn-primary btn-raised"
-              data-toggle="tooltip" data-placement="top"
-              title="Tooltip on top">Top
-      </button>
-      ...
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-secondary">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Secondary card title</h4>
+          <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>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-success">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Success card title</h4>
+          <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>
+        </div>
+      </div>
     </div>
   </div>
-----
-
-== Bootstrap Material Design
-
-lorem:sentences[5]
-
-=== MD Color Palette
-
-The MD color palette comprises primary and accent colors that can be used for
-illustration or to develop your brand colors. They’ve been designed to work
-harmoniously with each other.
-
-The color palette starts with primary colors and fills in the spectrum to
-create a complete and usable palette for Android, Web, and iOS. Google
-suggests using the 500 colors as the primary colors in your app and the
-other colors as accents colors.
 
-=== Red and Pink
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
-        <li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
-        <li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
-        <li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
-        <li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
-        <li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
-        <li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
-        <li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
-        <li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
-        <li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
-        <li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
-        <li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
-        <li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
-        <li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
-        <li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
-      </ul>
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-info">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Info card title</h4>
+          <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>
+        </div>
+        <div class="card-footer r-text-200">
+          <a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
+             href="javascript:(void)">Action · Footer Link
+          </a>
+        </div>
+      </div>
     </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
-        <li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
-        <li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
-        <li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
-        <li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
-        <li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
-        <li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
-        <li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
-        <li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
-        <li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
-        <li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
-        <li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
-        <li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
-        <li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
-        <li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
-      </ul>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-warning">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Warning card title</h4>
+          <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>
+        </div>
+        <div class="card-footer r-text-200">
+          <a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
+             href="javascript:(void)">Action · Footer Link
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <div class="card-header text-white bg-danger">
+          <h3 class="notoc">Header</h3>
+        </div>
+        <div class="card-body">
+          <h4 class="card-title notoc">Danger card title</h4>
+          <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>
+        </div>
+        <div class="card-footer r-text-200">
+          <a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
+             href="javascript:(void)">Action · Footer Link
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-4 col-sm-4 col-xs-12">
+      <div class="card mb-3" style="max-width: 20rem;">
+        <h3 class="card-header notoc">Header</h3>
+        <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
+        <div class="card-body">
+          <h5 class="card-title notoc">Special title treatment</h5>
+          <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
+        </div>
+
+        <div class="card-body">
+          <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>
+        </div>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis</li>
+          <li class="list-group-item">Vestibulum at eros</li>
+        </ul>
+        <div class="card-body">
+          <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
+        </div>
+      </div>
     </div>
   </div>
+
 </div>
 ++++
 
+== Dialogs
 
-=== Purple and Deep Purple
+lorem:sentences[5]
+
+=== Modals
+
+Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
+lightboxes, user notifications, or completely custom content. Modals are
+built with HTML, CSS, and JavaScript. They’re positioned over everything
+else in the document and remove scroll from the <body> so that modal
+content scrolls instead.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_modal}[Bootstrap Docs {middot} Modal, {browser-window--new}]
+
+.Modal types
+[cols="2a,8a,2a", options="header", width="100%", role="rtable"]
+|===============================================================================
+|Type |Description |Launch Example
+
+|*Base*
+|Lauch the modal by clicking the button below. It will slide down and fade in
+from the top of the page.
+|
 ++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
-        <li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
-        <li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
-        <li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
-        <li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
-        <li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
-        <li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
-        <li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
-        <li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
-        <li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
-        <li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
-        <li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
-        <li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
-        <li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
-        <li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
-        <li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
-        <li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
-        <li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
-        <li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
-        <li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
-        <li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
-        <li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
-        <li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
-        <li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
-        <li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
-        <li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
-        <li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
-        <li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
-        <li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
-      </ul>
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleSimpleModal">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div id="exampleSimpleModal"
+  class="modal fade top"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 ++++
 
-=== Indigo and Blue
+|*Static backdrop*
+|This model is set to *static* and is will *not* close when clicking outside
+it (the backdrop).
+|
 ++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
-        <li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
-        <li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
-        <li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
-        <li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
-        <li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
-        <li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
-        <li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
-        <li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
-        <li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
-        <li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
-        <li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
-        <li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
-        <li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
-        <li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
-        <li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
-        <li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
-        <li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
-        <li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
-        <li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
-        <li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
-        <li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
-        <li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
-        <li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
-        <li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
-        <li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
-        <li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
-        <li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
-        <li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
-      </ul>
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleStaticModal">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div id="exampleStaticModal"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleStaticModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 ++++
 
-=== Light Blue and Cyan
+|*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="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
-        <li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
-        <li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
-        <li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
-        <li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
-        <li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
-        <li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
-        <li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
-        <li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
-        <li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
-        <li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
-        <li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
-        <li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
-        <li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
-        <li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
-        <li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
-        <li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
-        <li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
-        <li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
-        <li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
-        <li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
-        <li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
-        <li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
-        <li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
-        <li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
-        <li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
-        <li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
-        <li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
-        <li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
-      </ul>
-    </div>
-  </div>
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleModalLong">
+    Launch Example
+  </button>
 </div>
-++++
 
-=== Teal and Green
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
-        <li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
-        <li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
-        <li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
-        <li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
-        <li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
-        <li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
-        <li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
-        <li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
-        <li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
-        <li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
-        <li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
-        <li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
-        <li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
-        <li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
-        <li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
-        <li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
-        <li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
-        <li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
-        <li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
-        <li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
-        <li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
-        <li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
-        <li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
-        <li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
-        <li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
-        <li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
-        <li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
-        <li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
-      </ul>
+<!-- Modal -->
+<div
+  id="exampleModalLong"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 ++++
 
-=== Light Green and Lime
+|*Scrollable long content*
+|It#s also possible to create a scrollable modal that allows scroll the
+modal body. Try the demo and scroll the content.
+|
 ++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
-        <li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
-        <li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
-        <li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
-        <li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
-        <li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
-        <li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
-        <li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
-        <li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
-        <li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
-        <li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
-        <li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
-        <li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
-        <li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
-        <li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
-        <li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
-        <li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
-        <li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
-        <li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
-        <li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
-        <li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
-        <li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
-        <li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
-        <li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
-        <li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
-        <li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
-        <li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
-        <li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
-        <li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
-      </ul>
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleModalLongScrollable">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div
+  id="exampleModalLongScrollable"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
+        <p>
+          On the other hand, we denounce with righteous indignation and dislike men who
+          are so beguiled and demoralized by the charms of pleasure of the moment, so
+          blinded by desire, that they cannot foresee the pain and trouble that are
+          bound to ensue; and equal blame belongs to those who fail in their duty through
+          weakness of will, which is the same as saying through shrinking from toil and pain.
+        </p>
+        <p>
+          These cases are perfectly simple and easy to distinguish. In a free hour, when
+          our power of choice is untrammelled and when nothing prevents our being able to
+          do what we like best, every pleasure is to be welcomed and every pain avoided.
+          But in certain circumstances and owing to the claims of duty or the obligations
+          of business is will frequently occur that pleasures have to be repudiated and
+          annoyances accepted. The wise man therefore always holds in these matters to
+          this principle of selection: he rejects pleasures to secure other greater
+          pleasures, or else he endures pains to avoid worse pains.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 ++++
 
-=== Yellow and Amber
+|*Vertically centered*
+|For important messages, center the modal.
+|
 ++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
-        <li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
-        <li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
-        <li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
-        <li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
-        <li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
-        <li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
-        <li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
-        <li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
-        <li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
-        <li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
-        <li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
-        <li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
-        <li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
-        <li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
-        <li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
-        <li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
-        <li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
-        <li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
-        <li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
-        <li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
-        <li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
-        <li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
-        <li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
-        <li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
-        <li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
-        <li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
-        <li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
-        <li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
-      </ul>
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal" data-target="#exampleModalVerticalCenter">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div id="exampleModalVerticalCenter"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 ++++
 
-=== Orange and Deep Orange
+|*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="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
-        <li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
-        <li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
-        <li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
-        <li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
-        <li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
-        <li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
-        <li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
-        <li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
-        <li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
-        <li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
-        <li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
-        <li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
-        <li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
-        <li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
-        <li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
-        <li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
-        <li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
-        <li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
-        <li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
-        <li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
-        <li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
-        <li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
-        <li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
-        <li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
-        <li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
-        <li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
-        <li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
-        <li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
-      </ul>
+<div class="ml-0">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleModalTooltip">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div id="exampleModalTooltip"
+  class="modal fade"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <h5 class="notoc">Popover in a modal</h5>
+        <p>This <a href="#" role="button" class="btn btn-primary 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 hover or click.</p>
+        <hr>
+        <h5 class="notoc">Tooltips in a modal</h5>
+        <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-primary btn-flex btn-raised mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
 ++++
+|===============================================================================
 
-=== Brown and Grey
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
-        <li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
-        <li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
-        <li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
-        <li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
-        <li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
-        <li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
-        <li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
-        <li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
-        <li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
-        <li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
-        <li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
-        <li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
-        <li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
-        <li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
-        <li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
-        <li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
-        <li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
-        <li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
-        <li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
-        <li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
-      </ul>
+.Base Modal example
+[source, html, role="noclip"]
+----
+<!-- Trigger Button (modal) -->
+<div class="ml-0">
+  <button type="button"
+    class="btn btn-primary btn-raised"
+    data-toggle="modal"
+    data-target="#exampleSimpleModal">
+    Launch Example
+  </button>
+</div>
+
+<!-- Modal -->
+<div id="exampleSimpleModal"
+  class="modal fade top"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleSimpleModalLabel"
+  aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button"
+          class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
+        </button>
+        <button
+          type="button"
+          class="btn btn-secondary btn-flex btn-raised"
+          data-dismiss="modal"> Close
+        </button>
+      </div>
     </div>
   </div>
 </div>
-++++
+----
+
+=== Popovers and Tooltips
+
+Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
+To make them properly positioned, the Javascript library `popper.min.js` has to
+be included before `bootstrap.js` in order to make popovers and tooltips to work.
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_popovers}[Bootstrap Docs {middot} Popovers, {browser-window--new}]
+
+pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
+link:{bs_doc_components_tooltips}[Bootstrap Docs {middot} Tooltips, {browser-window--new}]
+
+NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
 
-=== Blue Grey and BW
 ++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
-        <li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
-        <li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
-        <li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
-        <li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
-        <li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
-        <li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
-        <li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
-        <li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
-        <li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
-        <li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
-      </ul>
+<div class="doc-example mb-3">
+  <div class="row mb-5">
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Popovers</h5>
+      <button type="button" class="btn btn-primary 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-primary 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-primary 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-primary 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 class="color-group col-lg-6">
-      <ul>
-        <li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
-        <li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
-      </ul>
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Tooltips</h5>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
+      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
     </div>
   </div>
 </div>
 ++++
 
-== Final words
-
-lorem:sentences[5]
+.Example for Popovers and Tooltips
+[source, html, role="noclip"]
+----
+  <div class="row mb-5">
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Popovers</h5>
+      <button type="button" class="btn btn-primary 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>
+      ...
+    </div>
+    <div class="col-md-6">
+      <h5 class="mb-5 notoc">Tooltips</h5>
+      <button type="button" class="btn btn-primary btn-raised"
+              data-toggle="tooltip" data-placement="top"
+              title="Tooltip on top">Top
+      </button>
+      ...
+    </div>
+  </div>
+----