sync with BSv4

Gemfile

@@ -3,6 +3,7 @@ source 'https://rubygems.org'
 group :development, :test do
   gem 'jekyll', '~> 3.0.1'
   gem 'jekyll-redirect-from', '~> 0.9.0'
+  gem 'jekyll-seo-tag', '~> 0.1.3'
   gem 'jekyll-sitemap', '~> 0.9.0'
   gem 'sass', '~> 3.4.19'
   gem 'scss_lint', '~> 0.43'

Gemfile.lock

@@ -16,6 +16,8 @@ GEM
       jekyll (>= 2.0)
     jekyll-sass-converter (1.3.0)
       sass (~> 3.2)
+    jekyll-seo-tag (0.1.3)
+      jekyll (>= 2.0)
     jekyll-sitemap (0.9.0)
     jekyll-watch (1.3.0)
       listen (~> 3.0)
@@ -42,6 +44,7 @@ PLATFORMS
 DEPENDENCIES
   jekyll (~> 3.0.1)
   jekyll-redirect-from (~> 0.9.0)
+  jekyll-seo-tag (~> 0.1.3)
   jekyll-sitemap (~> 0.9.0)
   sass (~> 3.4.19)
   scss_lint (~> 0.43)

Gruntfile.js

@@ -47,8 +47,8 @@ module.exports = function (grunt) {
       'Edge >= 12',
       'Explorer >= 9',
       // Out of leniency, we prefix these 1 version further back than the official policy.
-      'iOS >= 7',
+      'iOS >= 8',
-      'Safari >= 7.1',
+      'Safari >= 8',
       // The following remain NOT officially supported, but we're lenient and include their prefixes to avoid severely breaking in them.
       'Android 2.3',
       'Android >= 4',
@@ -327,7 +327,7 @@ module.exports = function (grunt) {
         compatibility: 'ie9',
         keepSpecialComments: '*',
         sourceMap: true,
-        noAdvanced: true
+        advanced: false
       },
       core: {
         files: [
@@ -421,22 +421,36 @@ module.exports = function (grunt) {
         dest: 'docs/components/'
       },
       'bs-docs-content': {
-        options: {
+        //options: {
         //  // https://regex101.com/r/cZ7aO8/2
-          process: function (content, srcpath) {
+        //  process: function (content, srcpath) {
-            return content
+        //    return content
-              // insert docs reference
+        //      // insert docs reference
-              .replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice)
+        //      .replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice)
-              // remove sample text 'display' as this is a particular style and is confusing
+        //      // remove sample text 'display' as this is a particular style and is confusing
-              .replace(/Fancy display heading/, 'Fancy heading');
+        //      .replace(/Fancy display heading/, 'Fancy heading');
-          }
+        //  }
-        },
+        //},
         expand: true,
         cwd: '../bootstrap/docs/content',
         src: [
           '**/*'
         ],
         dest: 'docs/content/'
+      },
+      'bs-docs-examples': {
+        options: {
+          // //https://regex101.com/r/cZ7aO8/2
+          process: function (content, srcpath) {
+            return content.replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice);
+          }
+        },
+        expand: true,
+        cwd: '../bootstrap/docs/examples',
+        src: [
+          '**/*'
+        ],
+        dest: 'docs/examples/'
       }
     },
 
@@ -654,11 +668,18 @@ module.exports = function (grunt) {
   grunt.registerTask('docs-css', ['sass:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
   grunt.registerTask('docs-js', ['babel:docs', 'uglify:docsJs']);
   grunt.registerTask('lint-docs-js', ['jscs:assets']);
-  grunt.registerTask('docs-copy-bootstrap-docs', ['copy:bs-docs-js-vendor', 'copy:bs-docs-scss', 'copy:bs-docs-components', 'copy:bs-docs-content']);
+  grunt.registerTask('docs-copy-bootstrap-docs', [
+    'copy:bs-docs-js-vendor',
+    'copy:bs-docs-scss',
+    'copy:bs-docs-components',
+    'copy:bs-docs-content',
+    'copy:bs-docs-examples'
+  ]);
 
   grunt.registerTask('docs', ['clean:docs', 'docs-copy-bootstrap-docs', 'docs-css', 'docs-js', 'lint-docs-js', 'copy:docs']);
+  grunt.registerTask('docs-github', ['jekyll:github']);
 
-  grunt.registerTask('prep-release', ['dist', 'docs', 'jekyll:github', 'htmlmin', 'compress']);
+  grunt.registerTask('prep-release', ['dist', 'docs', 'docs-github', 'compress']);
 
   // Publish to GitHub
   grunt.registerTask('publish', ['buildcontrol:pages']);

_config.yml

@@ -27,6 +27,7 @@ exclude:          [assets/scss/]
 
 gems:
   - jekyll-redirect-from
+  - jekyll-seo-tag
   - jekyll-sitemap
 
 # Custom vars
@@ -54,3 +55,13 @@ cdn:
   # VERSION is substituted in variables.rb and these are made available as site.data.cdn.*
   jquery:         https://ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery.min.js
   bootstrap:      https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap.js
+
+
+
+#twitter:
+#  username: getbootstrap
+#
+#social:
+#  type: organization
+#  name: twbs
+#  links: ["https://www.facebook.com/getbootstrap/", "https://twitter.com/getbootstrap"]

docs/_includes/footer.html

@@ -42,7 +42,7 @@
 <script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
 
 {% if page.layout == "docs" %}
-<script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.js"></script>
+<script src="{{ site.baseurl }}/assets/js/vendor/jekyll-search.min.js"></script>
 
 <script>
 SimpleJekyllSearch.init({

docs/_includes/header.html

@@ -28,6 +28,8 @@
 <link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
 <link rel="icon" href="{{ site.baseurl }}/favicon.ico">
 
+{% seo %}
+
 <!--
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

docs/assets/js/vendor/anchor.min.js

@@ -1,6 +1,6 @@
 /*!
- * AnchorJS - v1.2.1 - 2015-07-02
+ * AnchorJS - v2.0.0 - 2015-10-31
  * https://github.com/bryanbraun/anchorjs
  * Copyright (c) 2015 Bryan Braun; Licensed MIT
  */
-function AnchorJS(A){"use strict";this.options=A||{},this._applyRemainingDefaultOptions=function(A){this.options.icon=this.options.hasOwnProperty("icon")?A.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?A.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?A.placement:"right",this.options.class=this.options.hasOwnProperty("class")?A.class:""},this._applyRemainingDefaultOptions(A),this.add=function(A){var e,t,o,n,i,s,a,l,r,h,c,g;if(this._applyRemainingDefaultOptions(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(e=document.querySelectorAll(A),0===e.length)return!1;for(this._addBaselineStyles(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i<e.length;i++){if(e[i].hasAttribute("id"))n=e[i].getAttribute("id");else{s=e[i].textContent,a=s.replace(/[^\w\s-]/gi,"").replace(/\s+/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase(),h=a,r=0;do void 0!==l&&(h=a+"-"+r),l=o.indexOf(h),r+=1;while(-1!==l);l=void 0,o.push(h),e[i].setAttribute("id",h),n=h}c=n.replace(/-/g," "),g=document.createElement("a"),g.className="anchorjs-link "+this.options.class,g.href="#"+n,g.setAttribute("aria-label","Anchor link for: "+c),g.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(g.style.opacity="1"),""===this.options.icon&&(g.style.fontFamily="anchorjs-icons",g.style.fontStyle="normal",g.style.fontVariant="normal",g.style.fontWeight="normal",g.style.lineHeight=1),"left"===this.options.placement?(g.style.position="absolute",g.style.marginLeft="-1em",g.style.paddingRight="0.5em",e[i].insertBefore(g,e[i].firstChild)):(g.style.paddingLeft="0.375em",e[i].appendChild(g))}return this},this.remove=function(A){for(var e,t=document.querySelectorAll(A),o=0;o<t.length;o++)e=t[o].querySelector(".anchorjs-link"),e&&t[o].removeChild(e);return this},this._addBaselineStyles=function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style"),t=" .anchorjs-link {   opacity: 0;   text-decoration: none;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus  {   opacity: 1; }",n=' @font-face {   font-family: "anchorjs-icons";   font-style: normal;   font-weight: normal;   src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after {   content: attr(data-anchorjs-icon); }";e.className="anchorjs",e.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(t,e.sheet.cssRules.length),e.sheet.insertRule(o,e.sheet.cssRules.length),e.sheet.insertRule(i,e.sheet.cssRules.length),e.sheet.insertRule(n,e.sheet.cssRules.length)}}}var anchors=new AnchorJS;
+function AnchorJS(A){"use strict";function t(A){o.options.icon=o.options.hasOwnProperty("icon")?A.icon:"",o.options.visible=o.options.hasOwnProperty("visible")?A.visible:"hover",o.options.placement=o.options.hasOwnProperty("placement")?A.placement:"right",o.options.class=o.options.hasOwnProperty("class")?A.class:"",o.options.truncate=o.options.hasOwnProperty("truncate")?Math.floor(A.truncate):64}function e(){if(null===document.head.querySelector("style.anchorjs")){var A,t=document.createElement("style"),e=" .anchorjs-link {   opacity: 0;   text-decoration: none;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus  {   opacity: 1; }",n=' @font-face {   font-family: "anchorjs-icons";   font-style: normal;   font-weight: normal;   src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after {   content: attr(data-anchorjs-icon); }";t.className="anchorjs",t.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(t):document.head.insertBefore(t,A),t.sheet.insertRule(e,t.sheet.cssRules.length),t.sheet.insertRule(o,t.sheet.cssRules.length),t.sheet.insertRule(i,t.sheet.cssRules.length),t.sheet.insertRule(n,t.sheet.cssRules.length)}}var o=this;this.options=A||{},t(A),this.add=function(A){var o,n,i,s,a,r,l,c,h,g,B,u;if(t(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(o=document.querySelectorAll(A),0===o.length)return!1;for(e(),n=document.querySelectorAll("[id]"),i=[].map.call(n,function(A){return A.id}),a=0;a<o.length;a++){if(o[a].hasAttribute("id"))s=o[a].getAttribute("id");else{r=o[a].textContent,l=this.urlify(r),g=l,h=0;do void 0!==c&&(g=l+"-"+h),c=i.indexOf(g),h+=1;while(-1!==c);c=void 0,i.push(g),o[a].setAttribute("id",g),s=g}B=s.replace(/-/g," "),u=document.createElement("a"),u.className="anchorjs-link "+this.options.class,u.href="#"+s,u.setAttribute("aria-label","Anchor link for: "+B),u.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(u.style.opacity="1"),""===this.options.icon&&(u.style.fontFamily="anchorjs-icons",u.style.fontStyle="normal",u.style.fontVariant="normal",u.style.fontWeight="normal",u.style.lineHeight=1,"left"===this.options.placement&&(u.style.lineHeight="inherit")),"left"===this.options.placement?(u.style.position="absolute",u.style.marginLeft="-1em",u.style.paddingRight="0.5em",o[a].insertBefore(u,o[a].firstChild)):(u.style.paddingLeft="0.375em",o[a].appendChild(u))}return this},this.remove=function(A){for(var t,e=document.querySelectorAll(A),o=0;o<e.length;o++)t=e[o].querySelector(".anchorjs-link"),t&&e[o].removeChild(t);return this},this.urlify=function(A){var e,o=/[& +$,:;=?@"#{}|^~[`%!'\]\.\/\(\)\*\\]/g;return t(this.options),e=A.replace(/\'/gi,"").replace(o,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()}}var anchors=new AnchorJS;

docs/assets/scss/_clipboard-js.scss

@@ -8,6 +8,10 @@
   position: relative;
   display: none;
   float: right;
+
+  + .highlight {
+    margin-top: 0;
+  }
 }
 
 .btn-clipboard {
@@ -22,12 +26,12 @@
   cursor: pointer;
   background-color: transparent;
   border-radius: .25rem;
-}
 
-.btn-clipboard-hover {
+  &:hover {
     color: #fff;
     background-color: #027de7;
   }
+}
 
 @media (min-width: 768px) {
   .bd-clipboard {

docs/assets/scss/_component-examples.scss

@@ -268,6 +268,10 @@
 }
 
 // Tooltips
+.tooltip-demo a {
+  white-space: nowrap;
+}
+
 .bd-example-tooltip-static .tooltip {
   position: relative;
   display: inline-block;

docs/assets/scss/_sidebar.scss

@@ -49,6 +49,7 @@
     padding: .75rem 1rem;
     color: #7a7a7a;
     text-align: center;
+    white-space: normal; // Undo .dropdown-item defaults
   }
 }
 

docs/components/card.md

@@ -62,6 +62,16 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+{% example html %}
+<div class="card">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+</div>
+{% endexample %}
+
 {% example html %}
 <div class="card">
   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">

docs/components/forms.md

@@ -594,7 +594,7 @@ Ensure that an alternative indication of state is also provided. For instance, y
 
 ## Custom forms
 
-For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.
+For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.
 
 ### Checkboxes and radios
 

docs/components/input-group.md

@@ -34,7 +34,7 @@ Place one add-on or button on either side of an input. You may also place one on
 <br>
 <div class="input-group">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
-  <span class="input-group-addon" id="basic-addon2">.00</span>
+  <span class="input-group-addon" id="basic-addon2">@example.com</span>
 </div>
 <br>
 <label for="basic-url">Your vanity URL</label>

docs/components/jumbotron.md

@@ -23,7 +23,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
 <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="m-y-md">
+  <hr class="m-y-2">
   <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-lg" href="#" role="button">Learn more</a>

docs/components/navbar.md

@@ -37,8 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
 
 - `.navbar-brand` for your company, product, or project name
 - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
-- `.navbar-form` for vertically centering default-sized inputs and buttons.
+- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
-- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
 
 Here's an example of all the sub-components included in a default, light navbar:
 
@@ -59,13 +58,65 @@ Here's an example of all the sub-components included in a default, light navbar:
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-  <form class="form-inline navbar-form pull-xs-right">
+  <form class="form-inline pull-xs-right">
     <input class="form-control" type="text" placeholder="Search">
     <button class="btn btn-success-outline" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
 
+### Brand
+
+The `.navbar-brand` can be applied to most elements, but an anchor works best.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Navbar</a>
+</nav>
+
+<nav class="navbar navbar-light bg-faded">
+  <h1 class="navbar-brand">Navbar</h1>
+</nav>
+
+{% endexample %}
+
+### Nav
+
+Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <ul class="nav navbar-nav">
+    <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>
+</nav>
+{% endexample %}
+
+And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <div class="nav navbar-nav">
+    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+    <a class="nav-item nav-link" href="#">Features</a>
+    <a class="nav-item nav-link" href="#">Pricing</a>
+    <a class="nav-item nav-link" href="#">About</a>
+  </div>
+</nav>
+{% endexample %}
+
+
 ## Color schemes
 
 Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
@@ -89,7 +140,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-xs-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-info-outline" type="submit">Search</button>
     </form>
@@ -110,7 +161,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-xs-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-secondary-outline" type="submit">Search</button>
     </form>
@@ -131,7 +182,7 @@ Here are some examples to show what we mean.
         <a class="nav-link" href="#">About</a>
       </li>
     </ul>
-    <form class="form-inline navbar-form pull-xs-right">
+    <form class="form-inline pull-xs-right">
       <input class="form-control" type="text" placeholder="Search">
       <button class="btn btn-primary-outline" type="submit">Search</button>
     </form>
@@ -154,7 +205,7 @@ Here are some examples to show what we mean.
 
 ## Containers
 
-Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
+Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
 
 {% example html %}
 <div class="container">
@@ -201,7 +252,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 
 {% example html %}
 <div class="collapse" id="exCollapsingNavbar">
-  <div class="bg-inverse p-a">
+  <div class="bg-inverse p-a-1">
     <h4>Collapsed content</h4>
     <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>

docs/components/pagination.md

@@ -29,19 +29,19 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li><a href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
-    <li><a href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
-    <li><a href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
-    <li><a href="#">4</a></li>
+    <li class="page-item"><a class="page-link" href="#">4</a></li>
-    <li><a href="#">5</a></li>
+    <li class="page-item"><a class="page-link" href="#">5</a></li>
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
@@ -57,21 +57,21 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="disabled">
+    <li class="page-item disabled">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="active">
+    <li class="page-item active">
-      <a href="#">1 <span class="sr-only">(current)</span></a>
+      <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
     </li>
-    <li><a href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
-    <li><a href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
-    <li><a href="#">4</a></li>
+    <li class="page-item"><a class="page-link" href="#">4</a></li>
-    <li><a href="#">5</a></li>
+    <li class="page-item"><a class="page-link" href="#">5</a></li>
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
@@ -85,13 +85,13 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="disabled">
+    <li class="page-item disabled">
-      <span aria-label="Previous">
+      <span class="page-link" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </span>
     </li>
-    <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
+    <li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
   </ul>
 </nav>
 {% endexample %}
@@ -104,17 +104,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <nav>
   <ul class="pagination pagination-lg">
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li><a href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
-    <li><a href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
-    <li><a href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
@@ -126,17 +126,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <nav>
   <ul class="pagination pagination-sm">
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li><a href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
-    <li><a href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
-    <li><a href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
-    <li>
+    <li class="page-item">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>

docs/components/utilities.md

@@ -26,78 +26,49 @@ Bootstrap includes dozens of utilities—classes with a single purpose. They're
 
 Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
 
-### Margin
+The classes are named using the format: `{property}-{sides}-{size}`
+
+Where *property* is one of:
+* `m` - for classes that set `margin`
+* `p` - for classes that set `padding`
+
+Where *sides* is one of:
+* `t` - for classes that set `margin-top` or `padding-top`
+* `b` - for classes that set `margin-bottom` or `padding-bottom`
+* `l` - for classes that set `margin-left` or `padding-left`
+* `r` - for classes that set `margin-right` or `padding-right`
+* `x` - for classes that set both `*-left` and `*-right`
+* `y` - for classes that set both `*-top` and `*-bottom`
+* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element
+
+Where *size* is one of:
+* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
+* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
+* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
+* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
+
+Here are some representative examples of these classes:
 
 {% highlight scss %}
-.m-a-0 { margin:        0 !important; }
+.m-t-0 {
-.m-t-0 { margin-top:    0 !important; }
+  margin-top: 0 !important;
-.m-r-0 { margin-right:  0 !important; }
+}
-.m-b-0 { margin-bottom: 0 !important; }
-.m-l-0 { margin-left:   0 !important; }
-.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
-.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }
 
-.m-a { margin:        $spacer !important; }
+.m-l-1 {
-.m-t { margin-top:    $spacer-y !important; }
+  margin-left: $spacer-x !important;
-.m-r { margin-right:  $spacer-x !important; }
+}
-.m-b { margin-bottom: $spacer-y !important; }
-.m-l { margin-left:   $spacer-x !important; }
-.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
-.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
-.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
 
-.m-a-md { margin:        ($spacer * 1.5) !important; }
+.p-x-2 {
-.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
+  padding-left: ($spacer-x * 1.5) !important;
-.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
+  padding-right: ($spacer-x * 1.5) !important;
-.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
+}
-.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
-.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
-.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
 
-.m-a-lg { margin:        ($spacer * 3) !important; }
+.p-a-3 {
-.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
+  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
-.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
+}
-.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
-.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
-.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
-.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
 {% endhighlight %}
 
-### Padding
+Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizontal margins to `auto`.
-
-{% highlight scss %}
-.p-a-0 { padding:        0 !important; }
-.p-t-0 { padding-top:    0 !important; }
-.p-r-0 { padding-right:  0 !important; }
-.p-b-0 { padding-bottom: 0 !important; }
-.p-l-0 { padding-left:   0 !important; }
-.p-x-0 { padding-left:   0 !important; padding-right: 0 !important; }
-.p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
-
-.p-a { padding:        $spacer !important; }
-.p-t { padding-top:    $spacer-y !important; }
-.p-r { padding-right:  $spacer-x !important; }
-.p-b { padding-bottom: $spacer-y !important; }
-.p-l { padding-left:   $spacer-x !important; }
-.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }
-.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }
-
-.p-a-md { padding:        ($spacer * 1.5) !important; }
-.p-t-md { padding-top:    ($spacer-y * 1.5) !important; }
-.p-r-md { padding-right:  ($spacer-y * 1.5) !important; }
-.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; }
-.p-l-md { padding-left:   ($spacer-y * 1.5) !important; }
-.p-x-md { padding-right:  ($spacer-x * 1.5) !important; padding-left:   ($spacer-x * 1.5) !important; }
-.p-y-md { padding-top:    ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; }
-
-.p-a-lg { padding:        ($spacer * 3) !important; }
-.p-t-lg { padding-top:    ($spacer-y * 3) !important; }
-.p-r-lg { padding-right:  ($spacer-y * 3) !important; }
-.p-b-lg { padding-bottom: ($spacer-y * 3) !important; }
-.p-l-lg { padding-left:   ($spacer-y * 3) !important; }
-.p-x-lg { padding-right:  ($spacer-x * 3) !important; padding-left:   ($spacer-x * 3) !important; }
-.p-y-lg { padding-top:    ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
-{% endhighlight %}
 
 
 ## Text alignment
@@ -132,6 +103,16 @@ Transform text in components with text capitalization classes.
 <p class="text-capitalize">CapiTaliZed text.</p>
 {% endexample %}
 
+## Font weight and italics
+
+Quickly change the weight (boldness) of text or italicize text.
+
+{% example html %}
+<p class="font-weight-bold">Bold text.</p>
+<p class="font-weight-normal">Normal weight text.</p>
+<p class="font-italic">Italicized text.</p>
+{% endexample %}
+
 ## Contextual colors and backgrounds
 
 Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

docs/content/code.md

@@ -4,17 +4,6 @@ title: Code
 group: content
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
-See addons(TODO: add link) for additional Material Design elements.
-{% endcallout %}
-
-
-
 Styles for inline code snippets and longer, multiline blocks of code.
 
 ## Contents

docs/content/figures.md

@@ -4,17 +4,6 @@ title: Figures
 group: content
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
-See addons(TODO: add link) for additional Material Design elements.
-{% endcallout %}
-
-
-
 Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
 
 Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.

docs/content/images.md

@@ -4,17 +4,6 @@ title: Images
 group: content
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
-See addons(TODO: add link) for additional Material Design elements.
-{% endcallout %}
-
-
-
 Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
 
 ## Contents
@@ -71,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded center-block" style="display: block;" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
+<img src="..." class="img-rounded center-block" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">

docs/content/reboot.md

@@ -5,17 +5,6 @@ group: content
 redirect_from: "/content/"
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
-See addons(TODO: add link) for additional Material Design elements.
-{% endcallout %}
-
-
-
 Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
 
 Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.

docs/content/tables.md

@@ -4,17 +4,6 @@ title: Tables
 group: content
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
-See addons(TODO: add link) for additional Material Design elements.
-{% endcallout %}
-
-
-
 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>`.
 
 ## Contents

docs/content/typography.md

@@ -4,17 +4,6 @@ title: Typography
 group: content
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
-See addons(TODO: add link) for additional Material Design elements.
-{% endcallout %}
-
-
-
 Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
 
 ## Contents
@@ -83,7 +72,7 @@ Use the included utility classes to recreate the small secondary heading text fr
 
 {% example html %}
 <h3>
-  Fancy heading
+  Fancy display heading
   <small class="text-muted">With faded secondary text</small>
 </h3>
 {% endexample %}
@@ -158,22 +147,22 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
 
 ## Blockquotes
 
-For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`.
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
 
 {% example html %}
-<blockquote>
+<blockquote class="blockquote">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
 {% endexample %}
 
 ### Naming a source
 
-Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
+Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
 
 {% example html %}
 <blockquote class="blockquote">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
 
@@ -183,8 +172,8 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
 
 {% example html %}
 <blockquote class="blockquote blockquote-reverse">
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
 
@@ -216,13 +205,13 @@ Remove the default `list-style` and left margin on list items (immediate childre
 
 ### Inline
 
-Place all list items on a single line with `display: inline-block;` and some light padding.
+Place all list items on a single line with `display: inline-block;` and some basic margin between.
 
 {% example html %}
 <ul class="list-inline">
-  <li>Lorem ipsum</li>
+  <li class="list-inline-item">Lorem ipsum</li>
-  <li>Phasellus iaculis</li>
+  <li class="list-inline-item">Phasellus iaculis</li>
-  <li>Nulla volutpat</li>
+  <li class="list-inline-item">Nulla volutpat</li>
 </ul>
 {% endexample %}
 

docs/examples/album/index.html

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <section class="jumbotron text-center">
+    <section class="jumbotron text-xs-center">
       <div class="container">
         <h1 class="jumbotron-heading">Album example</h1>
         <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
@@ -104,7 +104,7 @@
 
     <footer class="text-muted">
       <div class="container">
-        <p class="pull-right">
+        <p class="pull-xs-right">
           <a href="#">Back to top</a>
         </p>
         <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>

docs/examples/carousel/carousel.css

@@ -1,5 +1,16 @@
 /* GLOBAL STYLES
--------------------------------------------------- */
+-------
+
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation** 
+This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
+It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
+See addons(TODO: add link) for additional Material Design elements.
+{% endcallout %}
+
+------------------------------------------- */
 /* Padding below the footer and lighter body text */
 
 body {

docs/examples/carousel/index.html

@@ -51,7 +51,7 @@
         <div class="carousel-item active">
           <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
           <div class="container">
-            <div class="carousel-caption text-left">
+            <div class="carousel-caption text-xs-left">
               <h1>Example headline.</h1>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -71,7 +71,7 @@
         <div class="carousel-item">
           <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
           <div class="container">
-            <div class="carousel-caption text-right">
+            <div class="carousel-caption text-xs-right">
               <h1>One more for good measure.</h1>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
@@ -164,7 +164,7 @@
 
       <!-- FOOTER -->
       <footer>
-        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p class="pull-xs-right"><a href="#">Back to top</a></p>
         <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
       </footer>
 

docs/examples/cover/cover.css

@@ -79,6 +79,11 @@ body {
   border-bottom: .25rem solid transparent;
 }
 
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: rgba(255,255,255,.25);
+}
+
 .nav-masthead .nav-link + .nav-link {
   margin-left: 1rem;
 }

docs/examples/dashboard/index.html

@@ -29,13 +29,13 @@
       </button>
       <a class="navbar-brand" href="#">Project name</a>
       <div id="navbar">
-        <nav class="nav navbar-nav pull-left">
+        <nav class="nav navbar-nav pull-xs-left">
           <a class="nav-item nav-link" href="#">Dashboard</a>
           <a class="nav-item nav-link" href="#">Settings</a>
           <a class="nav-item nav-link" href="#">Profile</a>
           <a class="nav-item nav-link" href="#">Help</a>
         </nav>
-        <form class="navbar-form pull-right">
+        <form class="pull-xs-right">
           <input type="text" class="form-control" placeholder="Search...">
         </form>
       </div>

docs/examples/index.md

@@ -3,7 +3,18 @@ layout: simple
 title: Examples
 ---
 
-[Download the Bootstrap source code]({{ site.data.download.source }}) to snag these examples.
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation** 
+This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
+It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
+See addons(TODO: add link) for additional Material Design elements.
+{% endcallout %}
+
+
+
+[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
 
 ## Framework
 

docs/examples/narrow-jumbotron/index.html

@@ -23,7 +23,7 @@
     <div class="container">
       <div class="header clearfix">
         <nav>
-          <ul class="nav nav-pills pull-right">
+          <ul class="nav nav-pills pull-xs-right">
             <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
             </li>

docs/examples/navbar-top-fixed/index.html

@@ -21,12 +21,12 @@
 
     <div class="pos-f-t">
       <div class="collapse" id="navbar-header">
-        <div class="container-fluid inverse p-a">
+        <div class="container-fluid bg-inverse p-a-1">
           <h3>Collapsed content</h3>
           <p>Toggleable via the navbar brand.</p>
         </div>
       </div>
-      <div class="navbar navbar-default navbar-static-top">
+      <div class="navbar navbar-light bg-faded navbar-static-top">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
           &#9776;
         </button>

docs/examples/navbar-top/index.html

@@ -20,12 +20,12 @@
   <body>
 
     <div class="collapse" id="navbar-header">
-      <div class="container-fluid inverse p-a">
+      <div class="container-fluid bg-inverse p-a-1">
         <h3>Collapsed content</h3>
         <p>Toggleable via the navbar brand.</p>
       </div>
     </div>
-    <div class="navbar navbar-default navbar-static-top">
+    <div class="navbar navbar-light bg-faded navbar-static-top m-b-1">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
         &#9776;
       </button>

docs/examples/navbar/index.html

@@ -41,7 +41,7 @@
               <a class="nav-link" href="#">About</a>
             </li>
           </ul>
-          <form class="form-inline navbar-form pull-right">
+          <form class="form-inline pull-xs-right">
             <input class="form-control" type="text" placeholder="Search">
             <button class="btn btn-success-outline" type="submit">Search</button>
           </form>

docs/examples/offcanvas/index.html

@@ -35,7 +35,7 @@
       <div class="row row-offcanvas row-offcanvas-right">
 
         <div class="col-xs-12 col-sm-9">
-          <p class="pull-right hidden-sm-up">
+          <p class="pull-xs-right hidden-sm-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
           <div class="jumbotron">

docs/examples/offcanvas/offcanvas.css

@@ -1,6 +1,17 @@
 /*
  * Style tweaks
- * --------------------------------------------------
+ * -------
+
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation** 
+This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
+It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
+See addons(TODO: add link) for additional Material Design elements.
+{% endcallout %}
+
+-------------------------------------------
  */
 html,
 body {

docs/examples/sticky-footer-navbar/index.html

@@ -21,42 +21,42 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top">
+    <div class="pos-f-t">
+      <div class="collapse" id="navbar-header">
+        <div class="container bg-inverse p-a-1">
+          <h3>Collapsed content</h3>
+          <p>Toggleable via the navbar brand.</p>
+        </div>
+      </div>
+      <nav class="navbar navbar-light navbar-static-top bg-faded">
         <div class="container">
-        <div class="navbar-header">
+          <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            &#9776;
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#">Project name</a>
+          <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-        </div>
+            <a class="navbar-brand" href="#">Sticky footer</a>
-        <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
+              <li class="nav-item active">
-            <li><a href="#">About</a></li>
+                <a class="nav-link" href="#">Nav item <span class="sr-only">(current)</span></a>
-            <li><a href="#">Contact</a></li>
+              </li>
-            <li class="dropdown">
+              <li class="nav-item">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
+                <a class="nav-link" href="#">Another nav item</a>
-              <div class="dropdown-menu">
+              </li>
-                <a class="dropdown-item" href="#">Action</a>
+              <li class="nav-item">
-                <a class="dropdown-item" href="#">Another action</a>
+                <a class="nav-link" href="#">More nav</a>
-                <a class="dropdown-item" href="#">Something else here</a>
+              </li>
-                <div role="separator" class="dropdown-divider"></div>
+              <li class="nav-item">
-                <h6 class="dropdown-header">Nav header</h6>
+                <a class="nav-link" href="#">Last link</a>
-                <a class="dropdown-item" href="#">Separated link</a>
-                <a class="dropdown-item" href="#">One more separated link</a>
-              </div>
               </li>
             </ul>
-        </div><!--/.nav-collapse -->
+          </div>
         </div>
       </nav>
+    </div>
 
     <!-- Begin page content -->
     <div class="container">
-      <div class="page-header">
+      <div class="page-header m-t-1">
         <h1>Sticky footer with fixed navbar</h1>
       </div>
       <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
@@ -65,7 +65,7 @@
 
     <footer class="footer">
       <div class="container">
-        <p class="text-muted">Place sticky footer content here.</p>
+        <span class="text-muted">Place sticky footer content here.</span>
       </div>
     </footer>
 

docs/examples/sticky-footer-navbar/sticky-footer-navbar.css

@@ -1,5 +1,16 @@
 /* Sticky footer styles
--------------------------------------------------- */
+-------
+
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation** 
+This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
+It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
+See addons(TODO: add link) for additional Material Design elements.
+{% endcallout %}
+
+------------------------------------------- */
 html {
   position: relative;
   min-height: 100%;
@@ -14,6 +25,7 @@ body {
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
+  line-height: 60px; /* Vertically center the text there */
   background-color: #f5f5f5;
 }
 
@@ -25,9 +37,6 @@ body {
 body > .container {
   padding: 60px 15px 0;
 }
-.container .text-muted {
-  margin: 20px 0;
-}
 
 .footer > .container {
   padding-right: 15px;

docs/examples/sticky-footer/index.html

@@ -22,7 +22,7 @@
 
     <!-- Begin page content -->
     <div class="container">
-      <div class="page-header">
+      <div class="page-header m-t-1">
         <h1>Sticky footer</h1>
       </div>
       <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
@@ -31,7 +31,7 @@
 
     <footer class="footer">
       <div class="container">
-        <p class="text-muted">Place sticky footer content here.</p>
+        <span class="text-muted">Place sticky footer content here.</span>
       </div>
     </footer>
 

docs/examples/sticky-footer/sticky-footer.css

@@ -1,5 +1,16 @@
 /* Sticky footer styles
--------------------------------------------------- */
+-------
+
+[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
+
+{% callout info %}
+**Bootstrap Reference Documentation** 
+This is reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
+It is being rendered with Material Design for Bootstrap to demonstrate default styling. 
+See addons(TODO: add link) for additional Material Design elements.
+{% endcallout %}
+
+------------------------------------------- */
 html {
   position: relative;
   min-height: 100%;
@@ -14,6 +25,7 @@ body {
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
+  line-height: 60px; /* Vertically center the text there */
   background-color: #f5f5f5;
 }
 
@@ -27,6 +39,3 @@ body {
   max-width: 680px;
   padding: 0 15px;
 }
-.container .text-muted {
-  margin: 20px 0;
-}

docs/examples/tooltip-viewport/index.html

@@ -20,7 +20,7 @@
 
   <body>
 
-    <button class="btn btn-secondary pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+    <button class="btn btn-secondary pull-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
     <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
     <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
 
@@ -30,7 +30,7 @@
       <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
       <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
 
-      <button class="btn btn-secondary pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
+      <button class="btn btn-secondary pull-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
 
       <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
     </div>

docs/getting-started/options.md

@@ -19,3 +19,83 @@ You can find and customize these variables in our `_variables.scss` file.
 | `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` various components. |
 | `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components.                 |
 | `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                     |
+
+
+## Color palette
+
+Bootstrap's color palette includes a numerical range of shades for each base color, heavily inspired by [Google's color palette](https://www.google.com/design/spec/style/color.html#color-color-palette). Base colors, which utilize Sass color functions to generate each shade, are indicated at the top of each stacked palette.
+
+<div class="row">
+  <div class="col-sm-6 col-md-4 color-palette">
+    <div class="color-slab color-slab-base gray-100">100</div>
+    <div class="color-slab gray-100">100</div>
+    <div class="color-slab gray-200">200</div>
+    <div class="color-slab gray-300">300</div>
+    <div class="color-slab gray-400">400</div>
+    <div class="color-slab gray-500">500</div>
+    <div class="color-slab gray-600">600</div>
+    <div class="color-slab gray-700">700</div>
+    <div class="color-slab gray-800">800</div>
+    <div class="color-slab gray-900">900</div>
+  </div>
+  <div class="col-sm-6 col-md-4 color-palette">
+    <div class="color-slab color-slab-base blue-500">500</div>
+    <div class="color-slab blue-100">100</div>
+    <div class="color-slab blue-200">200</div>
+    <div class="color-slab blue-300">300</div>
+    <div class="color-slab blue-400">400</div>
+    <div class="color-slab blue-500">500</div>
+    <div class="color-slab blue-600">600</div>
+    <div class="color-slab blue-700">700</div>
+    <div class="color-slab blue-800">800</div>
+    <div class="color-slab blue-900">900</div>
+  </div>
+  <div class="col-sm-6 col-md-4 color-palette">
+    <div class="color-slab color-slab-base green-500">500</div>
+    <div class="color-slab green-100">100</div>
+    <div class="color-slab green-200">200</div>
+    <div class="color-slab green-300">300</div>
+    <div class="color-slab green-400">400</div>
+    <div class="color-slab green-500">500</div>
+    <div class="color-slab green-600">600</div>
+    <div class="color-slab green-700">700</div>
+    <div class="color-slab green-800">800</div>
+    <div class="color-slab green-900">900</div>
+  </div>
+  <div class="col-sm-6 col-md-4 color-palette">
+    <div class="color-slab color-slab-base teal-500">500</div>
+    <div class="color-slab teal-100">100</div>
+    <div class="color-slab teal-200">200</div>
+    <div class="color-slab teal-300">300</div>
+    <div class="color-slab teal-400">400</div>
+    <div class="color-slab teal-500">500</div>
+    <div class="color-slab teal-600">600</div>
+    <div class="color-slab teal-700">700</div>
+    <div class="color-slab teal-800">800</div>
+    <div class="color-slab teal-900">900</div>
+  </div>
+  <div class="col-sm-6 col-md-4 color-palette">
+    <div class="color-slab color-slab-base orange-500">500</div>
+    <div class="color-slab orange-100">100</div>
+    <div class="color-slab orange-200">200</div>
+    <div class="color-slab orange-300">300</div>
+    <div class="color-slab orange-400">400</div>
+    <div class="color-slab orange-500">500</div>
+    <div class="color-slab orange-600">600</div>
+    <div class="color-slab orange-700">700</div>
+    <div class="color-slab orange-800">800</div>
+    <div class="color-slab orange-900">900</div>
+  </div>
+  <div class="col-sm-6 col-md-4 color-palette">
+    <div class="color-slab color-slab-base red-500">500</div>
+    <div class="color-slab red-100">100</div>
+    <div class="color-slab red-200">200</div>
+    <div class="color-slab red-300">300</div>
+    <div class="color-slab red-400">400</div>
+    <div class="color-slab red-500">500</div>
+    <div class="color-slab red-600">600</div>
+    <div class="color-slab red-700">700</div>
+    <div class="color-slab red-800">800</div>
+    <div class="color-slab red-900">900</div>
+  </div>
+</div>

docs/layout/grid.md

@@ -150,7 +150,7 @@ $grid-breakpoints: (
   lg: 992px,
   // Extra large screen / wide desktop
   xl: 1200px
-) !default;
+);
 
 
 $grid-columns:      12;

scss/.scss-lint.yml

@@ -381,6 +381,9 @@ linters:
     enabled: true
     extra_properties: []
 
+  PseudoElement:
+    enabled: true
+
   QualifyingElement:
     enabled: false
     allow_element_with_attribute: false

scss/_buttons.scss

@@ -166,11 +166,6 @@
     padding: 5px 20px;
     font-size: $mdb-btn-font-size-sm;
   }
-  &.btn-xs,
-  .btn-group-xs & {
-    padding: 4px 15px;
-    font-size: $mdb-btn-font-size-xs;
-  }
 }
 
 // Disabled buttons and button groups

scss/_forms.scss

@@ -156,25 +156,25 @@
   &:focus,
   .mdb-form-group.is-focused & {
     border: 0;
-    border-bottom: $input-border-width solid $input-border-color;
+    border-bottom: $input-btn-border-width solid $input-border-color;
   }
 
   &[disabled],
   fieldset[disabled] & {
-    border-bottom: $input-border-width dotted $input-border-color;
+    border-bottom: $input-btn-border-width dotted $input-border-color;
   }
 }
 
 // Focus underline animation =================================
 .mdb-form-control-decorator {
   position: relative;
-  top: (-1 * $input-border-width); // move the top up enough to overlay the border from the input
+  top: (-1 * $input-btn-border-width); // move the top up enough to overlay the border from the input
   display: block;
   &::before,
   &::after {
     position: absolute;
     width: 0;
-    height: $input-border-width;
+    height: $input-btn-border-width;
     content: "";
     @include gradient-vertical($brand-primary, $input-border-color);
     transition: 0.3s ease all;

scss/_navbar.scss

@@ -70,9 +70,6 @@
   //}
   //
   //.navbar-collapse,
-  //.navbar-form {
-  //  border-color: rgba(0,0,0,0.1);
-  //}
   //
   //// Dropdowns
   //.navbar-nav {
@@ -153,8 +150,6 @@
   //  }
   //}
   //
-  //.navbar-form {
-  //  margin-top: 16px;
   //  .mdb-form-group {
   //    margin: 0;
   //    padding: 0;
@@ -172,7 +167,6 @@
   //    padding: 0;
   //    margin: 0;
   //  }
-  //}
   //
   //// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
   //@include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary);
@@ -189,9 +183,6 @@
   //    height: 50px;
   //    padding: 10px 15px;
   //  }
-  //  .navbar-form {
-  //    margin-top: 10px;
-  //  }
   //
   //  .navbar-nav > li > a {
   //    padding-top: 15px;

scss/mixins/_variations.scss

@@ -47,8 +47,7 @@
 //  background-color: $variation-color;
 //  color: $variation-color-text;
 //  // deeply defined to override welljumbo class without !impotant need
-//  .navbar-form .mdb-form-group input.form-control,
+//  input.form-control {
-//  .navbar-form input.form-control {
 //    @include material-placeholder {
 //      color: $variation-color-text;
 //    }

scss/variables/_forms.scss

@@ -8,7 +8,7 @@ $input-bg-disabled:              rgba($black, 0) !default; // $gray-lighter !def
 //
 //$input-color:                    $gray !default;
 $input-border-color:             #d2d2d2 !default; // #ccc !default;
-//$input-border-width:             $border-width !default;
+//$input-btn-border-width:         $border-width !default; // For form controls and buttons
 $input-box-shadow:               none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default;
 //
 $input-border-radius:            0 !default; // $border-radius !default;

scss/variables/_type.scss

@@ -56,3 +56,11 @@ $headings-font-weight:       400 !default; // was 500
 //
 //$hr-border-color:             rgba(0,0,0,.1) !default;
 //$hr-border-width:             $border-width !default;
+//
+//$list-inline-padding:         5px !default;
+//
+//$dt-font-weight:              bold !default;
+//
+//$nested-kbd-font-weight:      bold !default;
+
+