Merge branch 'v4-dev' into colors-redux

.scss-lint.yml

@@ -153,6 +153,7 @@ linters:
       - align-items
       - align-self
       - justify-content
+      - order
       - float
       - width
       - min-width

README.md

@@ -8,7 +8,14 @@
   <p align="center">
     Sleek, intuitive, and powerful front-end framework for faster and easier web development.
     <br>
-    <a href="https://v4-alpha.getbootstrap.com"><strong>Visit Bootstrap &raquo;</strong></a>
+    <a href="https://v4-alpha.getbootstrap.com"><strong>Explore Bootstrap docs &raquo;</strong></a>
+    <br>
+    <br>
+    <a href="https://themes.getbootstrap.com">Bootstrap Themes</a>
+    &middot;
+    <a href="https://jobs.getbootstrap.com">Job Board</a>
+    &middot;
+    <a href="https://blog.getbootstrap.com">Blog</a>
   </p>
 </p>
 

_data/nav.yml

@@ -7,7 +7,7 @@
     - title: JavaScript
     - title: Options
     - title: Build tools
-    - title: Best practices
+    # - title: Best practices # TODO: Write this content
     - title: Webpack
     - title: Accessibility
 

_includes/docs-navbar.html

@@ -1,5 +1,5 @@
-<header class="navbar navbar-inverse navbar-expand-md flex-column flex-md-row bd-navbar">
+<header class="navbar navbar-inverse flex-column flex-md-row bd-navbar">
-  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
     {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
   </a>
 
@@ -43,21 +43,21 @@
     </li>
 
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank">
+      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank" aria-label="GitHub">
         {% include icons/github.svg class="navbar-nav-svg" %}
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" aria-label="Twitter">
         {% include icons/twitter.svg class="navbar-nav-svg" %}
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank">
+      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank" aria-label="Slack">
         {% include icons/slack.svg class="navbar-nav-svg" %}
       </a>
     </li>
   </ul>
 
-  <a class="btn btn-bd-yellow d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
 </header>

_includes/icons/bootstrap.svg

@@ -1 +1 @@
-<svg {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
+<svg {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>

_includes/icons/github.svg

@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>

_includes/icons/menu.svg

@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>

_includes/icons/slack.svg

@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>

_includes/icons/twitter.svg

@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>

_layouts/docs.html

@@ -17,18 +17,19 @@
         <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
           {% include docs-sidebar.html %}
         </div>
-        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">{{ page.title }}</h1>
-          <p class="bd-lead">{{ page.description }}</p>
-          {% include ads.html %}
-          {{ content }}
-        </main>
 
         {% if page.toc %}
           <div class="d-none d-xl-block col-xl-2 bd-toc">
             {{ content | toc_only }}
           </div>
         {% endif %}
+
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+          <h1 class="bd-title" id="content">{{ page.title }}</h1>
+          <p class="bd-lead">{{ page.description }}</p>
+          {% include ads.html %}
+          {{ content }}
+        </main>
       </div>
     </div>
 

assets/scss/_content.scss

@@ -5,6 +5,8 @@
 //
 
 .bd-content {
+  order: 1;
+
   // Hack the sticky header
   > h2[id],
   > h3[id],

assets/scss/_nav.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable VendorPrefix
-
 //
 // Main navbar
 //
@@ -17,7 +15,7 @@
       max-width: 100%;
       height: 2.5rem;
       margin-top: .25rem;
-      overflow-x: hidden;
+      overflow: hidden;
       font-size: .875rem;
 
       .navbar-nav {
@@ -30,10 +28,11 @@
   }
 
   @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
+    @supports (position: sticky) {
-    position: sticky;
+      position: sticky;
-    top: 0;
+      top: 0;
-    z-index: 1071; // over everything in bootstrap
+      z-index: 1071; // over everything in bootstrap
+    }
   }
 
   .navbar-nav {

assets/scss/_sidebar.scss

@@ -10,6 +10,7 @@
     top: 4rem;
     max-height: calc(100vh - 4rem);
   }
+  order: 2;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   overflow-x: visible;
@@ -49,6 +50,7 @@
 //
 
 .bd-sidebar {
+  order: 0;
   background-color: #f5f2f9;
   border-bottom: 1px solid rgba(0,0,0,.1);
 

dist/css/bootstrap.css

@@ -3815,7 +3815,7 @@ tbody.collapse.show {
 }
 
 .nav-pills .nav-link.active,
-.show .nav-pills .nav-link {
+.show > .nav-pills .nav-link {
   color: #fff;
   background-color: #0275d8;
 }
@@ -3930,11 +3930,8 @@ tbody.collapse.show {
 }
 
 .navbar-nav .dropdown-menu {
-  position: static !important;
+  position: static;
   float: none;
-  -webkit-transform: unset !important;
-       -o-transform: unset !important;
-          transform: unset !important;
 }
 
 .navbar-text {
@@ -4004,8 +4001,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-sm .navbar-nav .dropdown-menu {
-    position: absolute !important;
+    position: absolute;
-    top: 100% !important;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-sm .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4059,8 +4059,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-md .navbar-nav .dropdown-menu {
-    position: absolute !important;
+    position: absolute;
-    top: 100% !important;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-md .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4114,8 +4117,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-lg .navbar-nav .dropdown-menu {
-    position: absolute !important;
+    position: absolute;
-    top: 100% !important;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-lg .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4169,8 +4175,11 @@ tbody.collapse.show {
             flex-direction: row;
   }
   .navbar-expand-xl .navbar-nav .dropdown-menu {
-    position: absolute !important;
+    position: absolute;
-    top: 100% !important;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu-right {
+    right: 0;
+    left: auto;
   }
   .navbar-expand-xl .navbar-nav .nav-link {
     padding-right: .5rem;
@@ -4223,8 +4232,12 @@ tbody.collapse.show {
 }
 
 .navbar-expand .navbar-nav .dropdown-menu {
-  position: absolute !important;
+  position: absolute;
-  top: 100% !important;
+}
+
+.navbar-expand .navbar-nav .dropdown-menu-right {
+  right: 0;
+  left: auto;
 }
 
 .navbar-expand .navbar-nav .nav-link {
@@ -6067,27 +6080,27 @@ a.bg-inverse:focus, a.bg-inverse:hover {
 }
 
 .rounded {
-  border-radius: 0.25rem;
+  border-radius: 0.25rem !important;
 }
 
 .rounded-top {
-  border-top-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem !important;
-  border-top-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem !important;
 }
 
 .rounded-right {
-  border-top-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem !important;
-  border-bottom-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem !important;
 }
 
 .rounded-bottom {
-  border-bottom-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem !important;
-  border-bottom-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
 .rounded-left {
-  border-top-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem !important;
-  border-bottom-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
 .rounded-circle {
@@ -7330,11 +7343,13 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   z-index: 1030;
 }
 
-.sticky-top {
+@supports ((position: -webkit-sticky) or (position: sticky)) {
-  position: -webkit-sticky;
+  .sticky-top {
-  position: sticky;
+    position: -webkit-sticky;
-  top: 0;
+    position: sticky;
-  z-index: 1020;
+    top: 0;
+    z-index: 1020;
+  }
 }
 
 .sr-only {

docs/4.0/components/input-group.md

@@ -8,7 +8,7 @@ toc: true
 
 ## Basic example
 
-Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
 
 {% example html %}
 <div class="input-group">

docs/4.0/examples/index.md

@@ -15,15 +15,15 @@ Examples that focus on implementing uses of built-in components provided by Boot
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/starter-template/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/starter-template.jpg" alt="">
+      <h4>Starter template</h4>
     </a>
-    <h4>Starter template</h4>
     <p>Nothing but the basics: compiled CSS and JavaScript.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/grid.jpg" alt="">
+      <h4>Grids</h4>
     </a>
-    <h4>Grids</h4>
     <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
   </div>
   <div class="clearfix hidden-md-up"></div>
@@ -31,8 +31,8 @@ Examples that focus on implementing uses of built-in components provided by Boot
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/jumbotron/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron.jpg" alt="">
+      <h4>Jumbotron</h4>
     </a>
-    <h4>Jumbotron</h4>
     <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
   </div>
   <div class="col-6 col-md-4">
@@ -52,15 +52,15 @@ Taking the default navbar component and showing how it can be moved, placed, and
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbars/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar.jpg" alt="">
+      <h4>Navbar</h4>
     </a>
-    <h4>Navbar</h4>
     <p>Super basic template that includes the navbar along with some additional content.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-static.jpg" alt="">
+      <h4>Static top navbar</h4>
     </a>
-    <h4>Static top navbar</h4>
     <p>Super basic template with a static top navbar along with some additional content.</p>
   </div>
   <div class="clearfix hidden-md-up"></div>
@@ -68,8 +68,8 @@ Taking the default navbar component and showing how it can be moved, placed, and
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top-fixed/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-fixed.jpg" alt="">
+      <h4>Fixed navbar</h4>
     </a>
-    <h4>Fixed navbar</h4>
     <p>Super basic template with a fixed top navbar along with some additional content.</p>
   </div>
 </div>
@@ -82,15 +82,15 @@ Brand new components and templates to help folks quickly get started with Bootst
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/album/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/album.jpg" alt="">
+      <h4>Album</h4>
     </a>
-    <h4>Album</h4>
     <p>Simple one-page template for photo galleries, portfolios, and more.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/cover/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/cover.jpg" alt="">
+      <h4>Cover</h4>
     </a>
-    <h4>Cover</h4>
     <p>A one-page template for building simple and beautiful home pages.</p>
   </div>
   <div class="clearfix hidden-md-up"></div>
@@ -98,15 +98,15 @@ Brand new components and templates to help folks quickly get started with Bootst
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/carousel/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/carousel.jpg" alt="">
+      <h4>Carousel</h4>
     </a>
-    <h4>Carousel</h4>
     <p>Customize the navbar and carousel, then add some new components.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/blog/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/blog.jpg" alt="">
+      <h4>Blog</h4>
     </a>
-    <h4>Blog</h4>
     <p>Simple two-column blog layout with custom navigation, header, and type.</p>
   </div>
   <div class="clearfix hidden-md-up"></div>
@@ -114,15 +114,15 @@ Brand new components and templates to help folks quickly get started with Bootst
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/dashboard/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/dashboard.jpg" alt="">
+      <h4>Dashboard</h4>
     </a>
-    <h4>Dashboard</h4>
     <p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/signin/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sign-in.jpg" alt="">
+      <h4>Sign-in page</h4>
     </a>
-    <h4>Sign-in page</h4>
     <p>Custom form layout and design for a simple sign in form.</p>
   </div>
   <div class="clearfix hidden-md-up"></div>
@@ -130,15 +130,15 @@ Brand new components and templates to help folks quickly get started with Bootst
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/justified-nav/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/justified-nav.jpg" alt="">
+      <h4>Justified nav</h4>
     </a>
-    <h4>Justified nav</h4>
     <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
   </div>
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer.jpg" alt="">
+      <h4>Sticky footer</h4>
     </a>
-    <h4>Sticky footer</h4>
     <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
   </div>
   <div class="clearfix hidden-md-up"></div>
@@ -146,8 +146,8 @@ Brand new components and templates to help folks quickly get started with Bootst
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer-navbar/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer-navbar.jpg" alt="">
+      <h4>Sticky footer w/ navbar</h4>
     </a>
-    <h4>Sticky footer w/ navbar</h4>
     <p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
   </div>
 </div>
@@ -160,8 +160,8 @@ Examples that focus on future-friendly features or techniques.
   <div class="col-6 col-md-4">
     <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/offcanvas/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/offcanvas.jpg" alt="">
+      <h4>Offcanvas</h4>
     </a>
-    <h4>Offcanvas</h4>
     <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
   </div>
 </div>

docs/4.0/getting-started/download.md

@@ -12,7 +12,7 @@ toc: true
 
 **Current version:** v{{ site.current_version}}
 
-<a href="{{ site.download.dist }}" class="btn btn-lg " onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
+<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
 
 ## Source files
 **Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).

docs/4.0/getting-started/options.md

@@ -1,23 +1,18 @@
 ---
 layout: docs
 title: Customization options
-description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables.
+description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
 group: getting-started
 toc: true
 ---
 
 ## Customizing variables
 
-Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
+Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile.
 
 For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
 
 {% highlight scss %}
-// Bootstrap overrides
-//
-// Copy variables from `_variables.scss` to this file to override default values
-// without modifying source files.
-
 $body-bg:    $gray-dark;
 $body-color: $gray-light;
 {% endhighlight %}

docs/4.0/utilities/position.md

@@ -26,6 +26,8 @@ Position an element at the bottom of the viewport, from edge to edge. Be sure yo
 
 Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
 
+**Microsoft Edge and IE11 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that properly can render it.
+
 {% highlight html %}
 <div class="sticky-top">...</div>
 {% endhighlight %}

js/dist/alert.js

@@ -39,14 +39,14 @@ var Alert = function ($) {
     ALERT: 'alert',
     FADE: 'fade',
     SHOW: 'show'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Alert = function () {
     function Alert(element) {
       _classCallCheck(this, Alert);
@@ -163,7 +163,7 @@ var Alert = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $(document).on(Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()));
+  $(document).on(Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert())
 
   /**
    * ------------------------------------------------------------------------
@@ -171,7 +171,7 @@ var Alert = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Alert._jQueryInterface;
+  );$.fn[NAME] = Alert._jQueryInterface;
   $.fn[NAME].Constructor = Alert;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/button.js

@@ -41,14 +41,14 @@ var Button = function ($) {
   var Event = {
     CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
     FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Button = function () {
     function Button(element) {
       _classCallCheck(this, Button);
@@ -154,7 +154,7 @@ var Button = function ($) {
   }).on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
     var button = $(event.target).closest(Selector.BUTTON)[0];
     $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type));
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -162,7 +162,7 @@ var Button = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Button._jQueryInterface;
+  );$.fn[NAME] = Button._jQueryInterface;
   $.fn[NAME].Constructor = Button;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/carousel.js

@@ -83,14 +83,14 @@ var Carousel = function ($) {
     INDICATORS: '.carousel-indicators',
     DATA_SLIDE: '[data-slide], [data-slide-to]',
     DATA_RIDE: '[data-ride="carousel"]'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Carousel = function () {
     function Carousel(element, config) {
       _classCallCheck(this, Carousel);
@@ -493,7 +493,7 @@ var Carousel = function ($) {
       var $carousel = $(this);
       Carousel._jQueryInterface.call($carousel, $carousel.data());
     });
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -501,7 +501,7 @@ var Carousel = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Carousel._jQueryInterface;
+  );$.fn[NAME] = Carousel._jQueryInterface;
   $.fn[NAME].Constructor = Carousel;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/collapse.js

@@ -60,14 +60,14 @@ var Collapse = function ($) {
   var Selector = {
     ACTIVES: '.show, .collapsing',
     DATA_TOGGLE: '[data-toggle="collapse"]'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Collapse = function () {
     function Collapse(element, config) {
       _classCallCheck(this, Collapse);
@@ -249,8 +249,8 @@ var Collapse = function ($) {
 
     Collapse.prototype._getConfig = function _getConfig(config) {
       config = $.extend({}, Default, config);
-      config.toggle = Boolean(config.toggle); // coerce string values
+      config.toggle = Boolean(config.toggle // coerce string values
-      Util.typeCheckConfig(NAME, config, DefaultType);
+      );Util.typeCheckConfig(NAME, config, DefaultType);
       return config;
     };
 
@@ -347,7 +347,7 @@ var Collapse = function ($) {
       var config = data ? 'toggle' : $trigger.data();
       Collapse._jQueryInterface.call($target, config);
     });
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -355,7 +355,7 @@ var Collapse = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Collapse._jQueryInterface;
+  );$.fn[NAME] = Collapse._jQueryInterface;
   $.fn[NAME].Constructor = Collapse;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/dropdown.js

@@ -85,14 +85,14 @@ var Dropdown = function ($) {
     placement: 'string',
     offset: '(number|string)',
     flip: 'boolean'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Dropdown = function () {
     function Dropdown(element, config) {
       _classCallCheck(this, Dropdown);
@@ -101,6 +101,7 @@ var Dropdown = function ($) {
       this._popper = null;
       this._config = this._getConfig(config);
       this._menu = this._getMenuElement();
+      this._inNavbar = this._detectNavbar();
 
       this._addEventListeners();
     }
@@ -141,17 +142,7 @@ var Dropdown = function ($) {
           element = parent;
         }
       }
-      this._popper = new Popper(element, this._menu, {
+      this._popper = new Popper(element, this._menu, this._getPopperConfig());
-        placement: this._getPlacement(),
-        modifiers: {
-          offset: {
-            offset: this._config.offset
-          },
-          flip: {
-            enabled: this._config.flip
-          }
-        }
-      });
 
       // if this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
@@ -180,6 +171,7 @@ var Dropdown = function ($) {
     };
 
     Dropdown.prototype.update = function update() {
+      this._inNavbar = this._detectNavbar();
       if (this._popper !== null) {
         this._popper.scheduleUpdate();
       }
@@ -228,14 +220,44 @@ var Dropdown = function ($) {
         if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
           placement = AttachmentMap.TOPEND;
         }
-      } else {
+      } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
-        if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
+        placement = AttachmentMap.BOTTOMEND;
-          placement = AttachmentMap.BOTTOMEND;
-        }
       }
       return placement;
     };
 
+    Dropdown.prototype._detectNavbar = function _detectNavbar() {
+      return $(this._element).closest('.navbar').length > 0;
+    };
+
+    Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
+      var _this2 = this;
+
+      var popperConfig = {
+        placement: this._getPlacement(),
+        modifiers: {
+          offset: {
+            offset: this._config.offset
+          },
+          flip: {
+            enabled: this._config.flip
+          }
+        }
+      };
+
+      if (this._inNavbar) {
+        popperConfig.modifiers.AfterApplyStyle = {
+          enabled: true,
+          order: 901, // ApplyStyle order + 1
+          fn: function fn() {
+            // reset Popper styles
+            $(_this2._menu).attr('style', '');
+          }
+        };
+      }
+      return popperConfig;
+    };
+
     // static
 
     Dropdown._jQueryInterface = function _jQueryInterface(config) {
@@ -396,7 +418,7 @@ var Dropdown = function ($) {
     Dropdown._jQueryInterface.call($(this), 'toggle');
   }).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) {
     e.stopPropagation();
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -404,7 +426,7 @@ var Dropdown = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Dropdown._jQueryInterface;
+  );$.fn[NAME] = Dropdown._jQueryInterface;
   $.fn[NAME].Constructor = Dropdown;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/modal.js

@@ -71,14 +71,14 @@ var Modal = function ($) {
     DATA_DISMISS: '[data-dismiss="modal"]',
     FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
     NAVBAR_TOGGLER: '.navbar-toggler'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Modal = function () {
     function Modal(element, config) {
       _classCallCheck(this, Modal);
@@ -270,8 +270,8 @@ var Modal = function ($) {
     Modal.prototype._enforceFocus = function _enforceFocus() {
       var _this4 = this;
 
-      $(document).off(Event.FOCUSIN) // guard against infinite focus loop
+      $(document).off(Event.FOCUSIN // guard against infinite focus loop
-      .on(Event.FOCUSIN, function (event) {
+      ).on(Event.FOCUSIN, function (event) {
         if (document !== event.target && _this4._element !== event.target && !$(_this4._element).has(event.target).length) {
           _this4._element.focus();
         }
@@ -433,17 +433,17 @@ var Modal = function ($) {
           var actualPadding = $(element)[0].style.paddingRight;
           var calculatedPadding = $(element).css('padding-right');
           $(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this9._scrollbarWidth + 'px');
-        });
+        }
 
         // Adjust navbar-toggler margin
-        $(Selector.NAVBAR_TOGGLER).each(function (index, element) {
+        );$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
           var actualMargin = $(element)[0].style.marginRight;
           var calculatedMargin = $(element).css('margin-right');
           $(element).data('margin-right', actualMargin).css('margin-right', parseFloat(calculatedMargin) + _this9._scrollbarWidth + 'px');
-        });
+        }
 
         // Adjust body padding
-        var actualPadding = document.body.style.paddingRight;
+        );var actualPadding = document.body.style.paddingRight;
         var calculatedPadding = $('body').css('padding-right');
         $('body').data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + this._scrollbarWidth + 'px');
       }
@@ -456,18 +456,18 @@ var Modal = function ($) {
         if (typeof padding !== 'undefined') {
           $(element).css('padding-right', padding).removeData('padding-right');
         }
-      });
+      }
 
       // Restore navbar-toggler margin
-      $(Selector.NAVBAR_TOGGLER).each(function (index, element) {
+      );$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
         var margin = $(element).data('margin-right');
         if (typeof margin !== 'undefined') {
           $(element).css('margin-right', margin).removeData('margin-right');
         }
-      });
+      }
 
       // Restore body padding
-      var padding = $('body').data('padding-right');
+      );var padding = $('body').data('padding-right');
       if (typeof padding !== 'undefined') {
         $('body').css('padding-right', padding).removeData('padding-right');
       }
@@ -557,7 +557,7 @@ var Modal = function ($) {
     });
 
     Modal._jQueryInterface.call($(target), config, this);
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -565,7 +565,7 @@ var Modal = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Modal._jQueryInterface;
+  );$.fn[NAME] = Modal._jQueryInterface;
   $.fn[NAME].Constructor = Modal;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/popover.js

@@ -63,14 +63,14 @@ var Popover = function ($) {
     FOCUSOUT: 'focusout' + EVENT_KEY,
     MOUSEENTER: 'mouseenter' + EVENT_KEY,
     MOUSELEAVE: 'mouseleave' + EVENT_KEY
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Popover = function (_Tooltip) {
     _inherits(Popover, _Tooltip);
 
@@ -95,10 +95,10 @@ var Popover = function ($) {
     };
 
     Popover.prototype.setContent = function setContent() {
-      var $tip = $(this.getTipElement());
+      var $tip = $(this.getTipElement()
 
       // we use append for html objects to maintain js events
-      this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
+      );this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
       this.setElementContent($tip.find(Selector.CONTENT), this._getContent());
 
       $tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);

js/dist/scrollspy.js

@@ -64,14 +64,14 @@ var ScrollSpy = function ($) {
   var OffsetMethod = {
     OFFSET: 'offset',
     POSITION: 'position'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var ScrollSpy = function () {
     function ScrollSpy(element, config) {
       var _this = this;
@@ -236,10 +236,10 @@ var ScrollSpy = function ($) {
         $link.addClass(ClassName.ACTIVE);
       } else {
         // Set triggered link as active
-        $link.addClass(ClassName.ACTIVE);
+        $link.addClass(ClassName.ACTIVE
         // Set triggered links parents as active
         // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
-        $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ', ' + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE);
+        );$link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ', ' + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE);
       }
 
       $(this._scrollElement).trigger(Event.ACTIVATE, {
@@ -300,7 +300,7 @@ var ScrollSpy = function ($) {
       var $spy = $(scrollSpys[i]);
       ScrollSpy._jQueryInterface.call($spy, $spy.data());
     }
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -308,7 +308,7 @@ var ScrollSpy = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = ScrollSpy._jQueryInterface;
+  );$.fn[NAME] = ScrollSpy._jQueryInterface;
   $.fn[NAME].Constructor = ScrollSpy;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/tab.js

@@ -48,14 +48,14 @@ var Tab = function ($) {
     DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
     DROPDOWN_TOGGLE: '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Tab = function () {
     function Tab(element) {
       _classCallCheck(this, Tab);
@@ -234,7 +234,7 @@ var Tab = function ($) {
   $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
     event.preventDefault();
     Tab._jQueryInterface.call($(this), 'show');
-  });
+  }
 
   /**
    * ------------------------------------------------------------------------
@@ -242,7 +242,7 @@ var Tab = function ($) {
    * ------------------------------------------------------------------------
    */
 
-  $.fn[NAME] = Tab._jQueryInterface;
+  );$.fn[NAME] = Tab._jQueryInterface;
   $.fn[NAME].Constructor = Tab;
   $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT;

js/dist/tooltip.js

@@ -106,14 +106,14 @@ var Tooltip = function ($) {
     FOCUS: 'focus',
     CLICK: 'click',
     MANUAL: 'manual'
+
+    /**
+     * ------------------------------------------------------------------------
+     * Class Definition
+     * ------------------------------------------------------------------------
+     */
+
   };
-
-  /**
-   * ------------------------------------------------------------------------
-   * Class Definition
-   * ------------------------------------------------------------------------
-   */
-
   var Tooltip = function () {
     function Tooltip(element, config) {
       _classCallCheck(this, Tooltip);
@@ -270,13 +270,13 @@ var Tooltip = function ($) {
           }
         });
 
-        $(tip).addClass(ClassName.SHOW);
+        $(tip).addClass(ClassName.SHOW
 
         // if this is a touch-enabled device we add extra
         // empty mouseover listeners to the body's immediate children;
         // only needed because of broken event delegation on iOS
         // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-        if ('ontouchstart' in document.documentElement) {
+        );if ('ontouchstart' in document.documentElement) {
           $('body').children().on('mouseover', null, $.noop);
         }
 
@@ -330,11 +330,11 @@ var Tooltip = function ($) {
         return;
       }
 
-      $(tip).removeClass(ClassName.SHOW);
+      $(tip).removeClass(ClassName.SHOW
 
       // if this is a touch-enabled device we remove the extra
       // empty mouseover listeners we added for iOS support
-      if ('ontouchstart' in document.documentElement) {
+      );if ('ontouchstart' in document.documentElement) {
         $('body').children().off('mouseover', null, $.noop);
       }
 

js/dist/util.js

@@ -22,10 +22,9 @@ var Util = function ($) {
     MozTransition: 'transitionend',
     OTransition: 'oTransitionEnd otransitionend',
     transition: 'transitionend'
-  };
 
-  // shoutout AngusCroll (https://goo.gl/pxwQGp)
+    // shoutout AngusCroll (https://goo.gl/pxwQGp)
-  function toType(obj) {
+  };function toType(obj) {
     return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
   }
 
@@ -39,7 +38,8 @@ var Util = function ($) {
       delegateType: transition.end,
       handle: function handle(event) {
         if ($(event.target).is(this)) {
-          return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
+          return event.handleObj.handler.apply(this, arguments // eslint-disable-line prefer-rest-params
+          );
         }
         return undefined;
       }

js/src/dropdown.js

@@ -96,10 +96,11 @@ const Dropdown = (($) => {
   class Dropdown {
 
     constructor(element, config) {
-      this._element = element
+      this._element  = element
-      this._popper  = null
+      this._popper   = null
-      this._config = this._getConfig(config)
+      this._config   = this._getConfig(config)
-      this._menu = this._getMenuElement()
+      this._menu     = this._getMenuElement()
+      this._inNavbar = this._detectNavbar()
 
       this._addEventListeners()
     }
@@ -153,17 +154,7 @@ const Dropdown = (($) => {
           element = parent
         }
       }
-      this._popper = new Popper(element, this._menu, {
+      this._popper = new Popper(element, this._menu, this._getPopperConfig())
-        placement : this._getPlacement(),
-        modifiers : {
-          offset : {
-            offset : this._config.offset
-          },
-          flip : {
-            enabled : this._config.flip
-          }
-        }
-      })
 
       // if this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
@@ -195,6 +186,7 @@ const Dropdown = (($) => {
     }
 
     update() {
+      this._inNavbar = this._detectNavbar()
       if (this._popper !== null) {
         this._popper.scheduleUpdate()
       }
@@ -250,15 +242,42 @@ const Dropdown = (($) => {
         if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
           placement = AttachmentMap.TOPEND
         }
-      }
+      } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
-      else {
+        placement = AttachmentMap.BOTTOMEND
-        if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
-          placement = AttachmentMap.BOTTOMEND
-        }
       }
       return placement
     }
 
+    _detectNavbar() {
+      return $(this._element).closest('.navbar').length > 0
+    }
+
+    _getPopperConfig() {
+      const popperConfig = {
+        placement : this._getPlacement(),
+        modifiers : {
+          offset : {
+            offset : this._config.offset
+          },
+          flip : {
+            enabled : this._config.flip
+          }
+        }
+      }
+
+      if (this._inNavbar) {
+        popperConfig.modifiers.AfterApplyStyle = {
+          enabled: true,
+          order: 901, // ApplyStyle order + 1
+          fn: () => {
+            // reset Popper styles
+            $(this._menu).attr('style', '')
+          }
+        }
+      }
+      return popperConfig
+    }
+
     // static
 
     static _jQueryInterface(config) {

package.json

@@ -28,7 +28,7 @@
     "css-prefix-docs": "postcss --config build/ --no-map --replace assets/css/docs.min.css",
     "css-minify": "cleancss --level 1 --source-map --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
     "css-minify-docs": "cleancss --level 1 --source-map --output assets/css/docs.min.css assets/css/docs.min.css",
-    "js": "npm-run-all js-compile js-minify",
+    "js": "npm-run-all js-lint js-compile js-minify",
     "js-docs": "npm-run-all js-lint-docs js-minify-docs",
     "js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
     "js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/",
@@ -54,7 +54,7 @@
     "dist": "npm-run-all --parallel css js",
     "test": "npm-run-all dist js-test docs",
     "watch-css": "nodemon --ignore js/ --ignore dist/ -e scss -x \"npm run css && npm run css-docs\"",
-    "watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile\"",
+    "watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile-plugins\"",
     "watch": "npm-run-all --parallel watch-css watch-js"
   },
   "style": "dist/css/bootstrap.css",

scss/_list-group.scss

@@ -19,19 +19,19 @@
 
 .list-group-item-action {
   width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-link-color;
+  color: $list-group-action-color;
   text-align: inherit; // For `<button>`s (anchors inherit)
 
   // Hover state
   @include hover-focus {
-    color: $list-group-link-hover-color;
+    color: $list-group-action-hover-color;
     text-decoration: none;
     background-color: $list-group-hover-bg;
   }
 
   &:active {
-    color: $list-group-link-active-color;
+    color: $list-group-action-active-color;
-    background-color: $list-group-link-active-bg;
+    background-color: $list-group-action-active-bg;
   }
 }
 

scss/_nav.scss

@@ -76,7 +76,7 @@
     @include border-radius($nav-pills-border-radius);
 
     &.active,
-    .show & {
+    .show > & {
       color: $nav-pills-link-active-color;
       background-color: $nav-pills-link-active-bg;
     }

scss/_navbar.scss

@@ -77,9 +77,8 @@
   }
 
   .dropdown-menu {
-    position: static !important;
+    position: static;
     float: none;
-    transform: unset !important;
   }
 }
 
@@ -158,8 +157,12 @@
           flex-direction: row;
 
           .dropdown-menu {
-            position: absolute !important;
+            position: absolute;
-            top: 100% !important;
+          }
+
+          .dropdown-menu-right {
+            right: 0;
+            left: auto; // Reset the default from `.dropdown-menu`
           }
 
           .nav-link {

scss/_variables.scss

@@ -854,11 +854,11 @@ $list-group-active-border-color:      $list-group-active-bg !default;
 $list-group-disabled-color:      $gray-light !default;
 $list-group-disabled-bg:         $list-group-bg !default;
 
-$list-group-link-color:          $gray !default;
+$list-group-action-color:             $gray !default;
-$list-group-link-hover-color:    $list-group-link-color !default;
+$list-group-action-hover-color:       $list-group-action-color !default;
 
-$list-group-link-active-color:   $list-group-color !default;
+$list-group-action-active-color:      $list-group-color !default;
-$list-group-link-active-bg:      $gray-lighter !default;
+$list-group-action-active-bg:         $gray-lighter !default;
 
 
 // Image thumbnails

scss/mixins/_breakpoints.scss

@@ -93,7 +93,13 @@
   $min: breakpoint-min($name, $breakpoints);
   $max: breakpoint-max($name, $breakpoints);
 
-  @media (min-width: $min) and (max-width: $max) {
+  @if $min != null and $max != null {
-    @content;
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name)
+  } @else if $min == null {
+    @include media-breakpoint-down($name)
   }
 }

scss/mixins/_grid-framework.scss

@@ -56,7 +56,7 @@
 
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through ($columns - 1) {
-        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
+        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
           .offset#{$infix}-#{$i} {
             @include make-col-modifier(offset, $i, $columns)
           }

scss/mixins/_pagination.scss

@@ -4,6 +4,7 @@
   .page-link {
     padding: $padding-y $padding-x;
     font-size: $font-size;
+    line-height: $line-height;
   }
 
   .page-item {

scss/utilities/_borders.scss

@@ -13,19 +13,23 @@
 //
 
 .rounded {
-  @include border-radius($border-radius);
+  border-radius: $border-radius !important;
 }
 .rounded-top {
-  @include border-top-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-top-right-radius: $border-radius !important;
 }
 .rounded-right {
-  @include border-right-radius($border-radius);
+  border-top-right-radius: $border-radius !important;
+  border-bottom-right-radius: $border-radius !important;
 }
 .rounded-bottom {
-  @include border-bottom-radius($border-radius);
+  border-bottom-right-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 .rounded-left {
-  @include border-left-radius($border-radius);
+  border-top-left-radius: $border-radius !important;
+  border-bottom-left-radius: $border-radius !important;
 }
 
 .rounded-circle {

scss/utilities/_position.scss

@@ -17,7 +17,9 @@
 }
 
 .sticky-top {
-  position: sticky;
+  @supports (position: sticky) {
-  top: 0;
+    position: sticky;
-  z-index: $zindex-sticky;
+    top: 0;
+    z-index: $zindex-sticky;
+  }
 }