Merge branch 'v4' into scss-lint

Conflicts:
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	scss/_card.scss

docs/_data/nav.yml

@@ -137,11 +137,11 @@
     - title: Sticky footer with navbar
     - title: Offcanvas
 
-# - title: Learn & Extend
-#   pages:
-#     - title: Approach
-#     - title: Icon fonts
-#     - title: Accessibility
+- title: Extend
+  pages:
+    - title: Approach
+    - title: Icon fonts
+    # - title: Accessibility
 
 - title: About
   pages:

docs/assets/scss/docs.scss

@@ -609,12 +609,10 @@ body {
   float: none;
   height: auto;
   padding: 2rem 1.25rem;
-  /*padding: 20px;*/
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
   color: #fff;
-  /*border-bottom: 1px solid rgba(255,255,255,.1);*/
 }
 .bs-docs-sidebar-brand:hover,
 .bs-docs-sidebar-brand:focus {

docs/components/label.md

@@ -30,8 +30,3 @@ Add any of the below mentioned modifier classes to change the appearance of a la
 <span class="label label-warning">Warning</span>
 <span class="label label-danger">Danger</span>
 {% endexample %}
-
-<div class="bs-callout bs-callout-info">
-  <h4>Have tons of labels?</h4>
-  <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
-</div>

docs/dist/css/bootstrap.css

@@ -3759,8 +3759,8 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 }
 
 .label {
-  display: inline;
-  padding: .2em .6em .3em;
+  display: inline-block;
+  padding: .25em .4em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
@@ -3985,7 +3985,6 @@ a.badge:hover, a.badge:focus {
     background-position: 0 0;
   }
 }
-
 @-o-keyframes progress-bar-stripes {
   from {
     background-position: 1 0;
@@ -3995,7 +3994,6 @@ a.badge:hover, a.badge:focus {
     background-position: 0 0;
   }
 }
-
 @keyframes progress-bar-stripes {
   from {
     background-position: 1 0;
@@ -4074,16 +4072,13 @@ a.badge:hover, a.badge:focus {
 
 .progress-striped[value]::-webkit-progress-value {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   -webkit-background-size: 1 1;
           background-size: 1 1;
 }
 
 .progress-striped[value]::-moz-progress-bar {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
   background-size: 1 1;
 }
 
@@ -4862,9 +4857,9 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   opacity: .5;
 }
 .carousel-control.left {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
   background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
   background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); 
   background-repeat: repeat-x;
@@ -4872,9 +4867,9 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
 .carousel-control.right {
   right: 0;
   left: auto;
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
   background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
   background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); 
   background-repeat: repeat-x;

docs/extend/approach.md

@@ -0,0 +1,5 @@
+---
+layout: page
+title: Approach
+---
+

docs/extend/icon-fonts.md

@@ -0,0 +1,5 @@
+---
+layout: page
+title: Icon fonts
+---
+