6 files changed, 48 insertions, 11 deletions

diff --git a/docs/_includes/ads.html b/docs/_includes/ads.html
index ba4775f5e..662b62971 100644
--- a/docs/_includes/ads.html
+++ b/docs/_includes/ads.html
@@ -1 +1 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 51b3cda8b..54bfddf69 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -1,20 +1,23 @@
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
-<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 
 <title>
-  {% if page.layout == "home" %}
-    {{ page.title }}
+  {% if page.title %}
+    {{ page.title }} &middot; {{ site.title }}
   {% else %}
-    {{ page.title }} &middot; Bootstrap
+    {{ site.title }} &middot; {{ site.description }}
   {% endif %}
 </title>
 
+{% include social.html %}
+
 <!-- Bootstrap core CSS -->
 {% if site.github %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
+  {% if page.title == "Flexbox grid system" %}
+    <link href="{{ site.baseurl }}/assets/css/docs-flexbox.min.css" rel="stylesheet">
+  {% endif %}
 {% else %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
 {% endif %}
diff --git a/docs/_includes/nav-docs.html b/docs/_includes/nav-docs.html
index b4f4d1f9e..f9a7554f0 100644
--- a/docs/_includes/nav-docs.html
+++ b/docs/_includes/nav-docs.html
@@ -33,7 +33,7 @@
           {% endif %}
 
           <li class="{{ active }}">
-            <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
+            <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}/">
               {{ doc.title }}
             </a>
 
diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index 0436e2dbe..6dd3723f6 100644
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -1,7 +1,7 @@
 <header class="navbar navbar-light navbar-static-top bd-navbar">
   <div class="container">
     {% comment %}
-    <nav class="nav navbar-nav pull-xs-right">
+    <nav class="nav navbar-nav float-xs-right">
       <div class="nav-item dropdown">
         <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           v{{ site.current_version }}
@@ -27,9 +27,7 @@
 
     <nav>
       <div class="clearfix">
-        <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
-          &#9776;
-        </button>
+        <button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
         <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
           Bootstrap
         </a>
diff --git a/docs/_includes/page-headers.html b/docs/_includes/page-headers.html
index 26f5f95b1..50b59a982 100644
--- a/docs/_includes/page-headers.html
+++ b/docs/_includes/page-headers.html
@@ -18,6 +18,11 @@
   <p class="lead">
     Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.
   </p>
+{% elsif page.group == "utilities" %}
+  <h1>Utilities</h1>
+  <p class="lead">
+    Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations.
+  </p>
 {% elsif page.group == "javascript" %}
   <h1>JavaScript plugins</h1>
   <p class="lead">
diff --git a/docs/_includes/social.html b/docs/_includes/social.html
new file mode 100644
index 000000000..c488ea610
--- /dev/null
+++ b/docs/_includes/social.html
@@ -0,0 +1,31 @@
+<!-- Twitter -->
+<meta name="twitter:site" content="@{{ site.twitter }}">
+<meta name="twitter:creator" content="@{{ site.twitter }}">
+
+{% if page.title %}
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="{{ page.title }}">
+  <meta name="twitter:description" content="{{ page.description }}">
+  <meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
+{% else %}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ site.title }}">
+  <meta name="twitter:description" content="{{ site.description }}">
+  <meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
+{% endif %}
+
+<!-- Facebook -->
+{% if page.title %}
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+  <meta property="og:title" content="{{ page.title }}">
+  <meta property="og:description" content="{{ page.description }}">
+{% else %}
+  <meta property="og:url" content="{{ site.url }}">
+  <meta property="og:title" content="{{ site.title }}">
+  <meta property="og:description" content="{{ site.description }}">
+{% endif %}
+<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
+
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">