Merge branch 'v4-dev' into v4-navbars

Gruntfile.js

@@ -170,6 +170,7 @@ module.exports = function (grunt) {
         compatibility: 'ie9',
         keepSpecialComments: '*',
         sourceMap: true,
+        sourceMapInlineSources: true,
         advanced: false
       },
       core: {

_config.yml

@@ -14,7 +14,7 @@ destination:      _gh_pages
 host:             0.0.0.0
 port:             9001
 baseurl:          ""
-url:              http://getbootstrap.com
+url:              http://v4-alpha.getbootstrap.com
 encoding:         UTF-8
 exclude:          [assets/scss/]
 
@@ -22,6 +22,14 @@ gems:
   - jekyll-redirect-from
   - jekyll-sitemap
 
+# Social
+title: Bootstrap
+description: The most popular HTML, CSS, and JS framework in the world.
+twitter: getbootstrap
+authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
+social_logo_path: /assets/brand/bootstrap-social-logo.png
+social_image_path: /assets/brand/bootstrap-social.png
+
 # Custom vars
 current_version:  4.0.0-alpha.4
 repo:             https://github.com/twbs/bootstrap

docs/_data/browser-bugs.yml

@@ -1,3 +1,13 @@
+-
+  browser: >
+    Microsoft Edge
+  summary: >
+    Visual artifacts in scrollable modal dialogs
+  upstream_bug: >
+    Edge#9011176
+  origin: >
+    Bootstrap#20755
+
 -
   browser: >
     Microsoft Edge

docs/_includes/header.html

@@ -1,17 +1,17 @@
 <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" %}
+  {% if page.title %}
-    {{ 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">

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 }}">

docs/about/brand.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Brand guidelines
+description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
 group: about
 ---
 

docs/about/history.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: History
+description: A brief overview of the history of Bootstrap.
 group: about
 redirect_from: "/about/"
 ---

docs/about/license.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: License FAQs
+description: Commonly asked questions about Bootstrap's open source license.
 group: about
 ---
 

docs/about/team.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Team
+description: An overview of the founding team and core contributors to Bootstrap.
 group: about
 ---
 

docs/about/translations.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Translations
+description: Links to community-translated Bootstrap documentation sites.
 group: about
 ---
 

docs/assets/scss/_component-examples.scss

@@ -324,7 +324,7 @@
 
 .highlight {
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2);
+  margin: 1rem (-$grid-gutter-width-base / 2);
   background-color: #f7f7f9;
 
   @include media-breakpoint-up(sm) {

docs/assets/scss/_featurettes.scss

@@ -26,10 +26,10 @@
 
   @include media-breakpoint-up(md) {
     .col-sm-6:first-child {
-      padding-right: ($grid-gutter-width * 1.5);
+      padding-right: ($grid-gutter-width-base * 1.5);
     };
     .col-sm-6:last-child {
-      padding-left: ($grid-gutter-width * 1.5);
+      padding-left: ($grid-gutter-width-base * 1.5);
     }
   }
 }

docs/assets/scss/_masthead.scss

@@ -2,7 +2,7 @@
 
 .bd-masthead {
   position: relative;
-  padding: 3rem ($grid-gutter-width / 2) 2rem;
+  padding: 3rem ($grid-gutter-width-base / 2) 2rem;
   color: $bd-purple-light;
   text-align: center;
   background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));

docs/assets/scss/_page-header.scss

@@ -1,7 +1,7 @@
 // scss-lint:disable ImportantRule
 
 .bd-pageheader {
-  padding: 2rem ($grid-gutter-width / 2);
+  padding: 2rem ($grid-gutter-width-base / 2);
   margin-bottom: 1.5rem;
   color: $bd-purple-light;
   text-align: center;

docs/components/alerts.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Alerts
+description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 group: components
 ---
 

docs/components/breadcrumb.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Breadcrumb
+description: Indicate the current page's location within a navigational hierarchy.
 group: components
 ---
 

docs/components/button-group.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Button group
+description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
 group: components
 ---
 

docs/components/buttons.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Buttons
+description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
 group: components
 redirect_from: "/components/"
 ---

docs/components/card.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Cards
+description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
 group: components
 ---
 

docs/components/carousel.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Carousel
+description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
 group: components
 ---
 

docs/components/collapse.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Collapse
+description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
 group: components
 ---
 

docs/components/dropdowns.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Dropdowns
+description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
 group: components
 ---
 

docs/components/forms.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Forms
+description: Examples and usage guidelines for from controls, form layouts, and custom forms.
 group: components
 ---
 

docs/components/input-group.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Input group
+description: Extend form controls with the input group.
 group: components
 ---
 

docs/components/jumbotron.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Jumbotron
+description: Lightweight, flexible component for showcasing hero unit style content.
 group: components
 ---
 

docs/components/list-group.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: List group
+description: Learn about Bootstrap's list group component for rendering series of related content.
 group: components
 ---
 

docs/components/modal.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Modal
+description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
 group: components
 ---
 

docs/components/navbar.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Navbar
+description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
 group: components
 ---
 

docs/components/navs.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Navs
+description: Documentation and examples for how to use Bootstrap's included navigation components.
 group: components
 ---
 

docs/components/pagination.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Pagination
+description: Documentation and examples for showing pagination links.
 group: components
 ---
 

docs/components/popovers.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Popovers
+description: Documentation and examples for adding Bootstrap popovers to your site.
 group: components
 ---
 

docs/components/progress.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Progress
+description: Documentation and examples for using Bootstrap progress bars.
 group: components
 ---
 

docs/components/scrollspy.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Scrollspy
+description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
 group: components
 ---
 

docs/components/tag.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Tags
+description: Documentation and examples for tags, our small label-badge component.
 group: components
 ---
 

docs/components/tooltips.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Tooltips
+description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
 group: components
 ---
 

docs/content/code.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Code
+description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
 group: content
 ---
 

docs/content/figures.md

@@ -1,10 +1,11 @@
 ---
 layout: docs
 title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
 group: content
 ---
 
-Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
+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

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Images
+description: Documentation and examples for styling images with Bootstrap.
 group: content
 ---
 

docs/content/reboot.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Reboot
+description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css.
 group: content
 redirect_from: "/content/"
 ---

docs/content/tables.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Tables
+description: Documentation and examples for styling tables with Bootstrap.
 group: content
 ---
 
@@ -13,7 +14,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
 
 ## Examples
 
-Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
+Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
 
 {% example html %}
 <table class="table">

docs/content/typography.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Typography
+description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more.
 group: content
 ---
 

docs/getting-started/accessibility.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Accessibility
+description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
 group: getting-started
 ---
 

docs/getting-started/best-practices.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Best practices
+description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
 group: getting-started
 ---
 

docs/getting-started/browsers-devices.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Browsers and devices
+description: Learn which browsers and devices are supported by Bootstrap.
 group: getting-started
 ---
 

docs/getting-started/build-tools.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Build tools
+description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
 group: getting-started
 ---
 

docs/getting-started/contents.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Contents
+description: Learn about what's included in Bootstrap's precompiled and source code directories.
 group: getting-started
 ---
 

docs/getting-started/download.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Download
+description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
 group: getting-started
 ---
 

docs/getting-started/flexbox.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Flexbox
+description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
 group: getting-started
 ---
 

docs/getting-started/introduction.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Introduction
+description: Get started with Bootstrap using the Bootstrap CDN and a template starter page.
 group: getting-started
 redirect_from: "/getting-started/"
 ---

docs/getting-started/javascript.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: JavaScript
+description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
 group: getting-started
 ---
 

docs/getting-started/options.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Customization options
+description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
 group: getting-started
 ---
 

docs/index.html

@@ -1,6 +1,5 @@
 ---
 layout: home
-title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
 ---
 
 <main class="bd-masthead" id="content">

docs/layout/flexbox-grid.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Flexbox grid system
+description: Documentation and examples for using Bootstrap's optional flexbox grid system.
 group: layout
 ---
 

docs/layout/grid.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Grid system
+description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system.
 group: layout
 ---
 
@@ -139,7 +140,15 @@ Variables and maps determine the number of columns, the gutter width, and the me
 
 {% highlight scss %}
 $grid-columns:      12;
-$grid-gutter-width: 30px;
+$grid-gutter-width-base: 30px;
+
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base, // 30px
+  sm: $grid-gutter-width-base, // 30px
+  md: $grid-gutter-width-base, // 30px
+  lg: $grid-gutter-width-base, // 30px
+  xl: $grid-gutter-width-base  // 30px
+)
 
 $grid-breakpoints: (
   // Extra small screen / phone
@@ -168,23 +177,27 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 {% highlight scss %}
 // Creates a wrapper for a series of columns
-@mixin make-row($gutter: $grid-gutter-width) {
+@mixin make-row($gutters: $grid-gutter-widths) {
   @if $enable-flex {
     display: flex;
     flex-wrap: wrap;
   } @else {
     @include clearfix();
   }
-  margin-left:  ($gutter / -2);
+
-  margin-right: ($gutter / -2);
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      margin-right: ($gutter / -2);
+      margin-left:  ($gutter / -2);
+    }
+  }
 }
 
 // Make the element grid-ready (applying everything but the width)
-@mixin make-col-ready($gutter: $grid-gutter-width) {
+@mixin make-col-ready($gutters: $grid-gutter-widths) {
   position: relative;
   min-height: 1px; // Prevent collapsing
-  padding-right: ($gutter / 2);
-  padding-left:  ($gutter / 2);
 
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
@@ -192,6 +205,14 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
   @if $enable-flex {
     width: 100%;
   }
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
+  }
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
@@ -463,11 +484,18 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
 
 ### Columns and gutters
 
-The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters.
+The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
 
 {% highlight scss %}
-$grid-columns: 12;
+$grid-columns:               12 !default;
-$grid-gutter-width: 30px;
+$grid-gutter-width-base:     30px !default;
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base,
+  sm: $grid-gutter-width-base,
+  md: $grid-gutter-width-base,
+  lg: $grid-gutter-width-base,
+  xl: $grid-gutter-width-base
+) !default;
 {% endhighlight %}
 
 ### Grid tiers

docs/layout/media-object.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Media object
+description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
 group: layout
 ---
 

docs/layout/overview.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Overview
+description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
 group: layout
 redirect_from: "/layout/"
 ---

docs/layout/responsive-utilities.md

@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Responsive utilities
+description: Use responsive display utility classes for showing and hiding content by device, via media query.
 group: layout
 ---
 

scss/_button-group.scss

@@ -10,6 +10,7 @@
   > .btn {
     position: relative;
     float: left;
+    margin-bottom: 0;
 
     // Bring the "active" button to the front
     &:focus,

scss/_dropdown.scss

@@ -141,6 +141,7 @@
 .dropdown-header {
   display: block;
   padding: $dropdown-padding-y $dropdown-item-padding-x;
+  margin-bottom: 0; // for use with heading elements
   font-size: $font-size-sm;
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a

scss/_forms.scss

@@ -18,8 +18,16 @@
   background-image: none;
   background-clip: padding-box;
   border: $input-btn-border-width solid $input-border-color;
+
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius);
+  @if $enable-rounded {
+    // Manually use the if/else instead of the mixin to account for iOS override
+    border-radius: $input-border-radius;
+  } @else {
+    // Otherwise undo the iOS default
+    border-radius: 0;
+  }
+
   @include box-shadow($input-box-shadow);
   @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
 
@@ -239,6 +247,7 @@ select.form-control-lg {
   }
 
   &.disabled {
+    color: $text-muted;
     cursor: $cursor-disabled;
   }
 }

scss/_reboot.scss

@@ -318,8 +318,6 @@ textarea {
   // properly inherited. However, `line-height` isn't addressed there. Using this
   // ensures we don't need to unnecessarily redeclare the global font stack.
   line-height: inherit;
-  // iOS adds rounded borders by default
-  border-radius: 0;
 }
 
 input[type="radio"],

scss/_variables.scss

@@ -150,9 +150,15 @@ $container-max-widths: (
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:      12 !default;
+$grid-columns:               12 !default;
-$grid-gutter-width: 30px !default;
+$grid-gutter-width-base:     30px !default;
-
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base,
+  sm: $grid-gutter-width-base,
+  md: $grid-gutter-width-base,
+  lg: $grid-gutter-width-base,
+  xl: $grid-gutter-width-base
+) !default;
 
 // Typography
 //
@@ -375,13 +381,15 @@ $custom-control-active-indicator-bg:         #84c6ff !default;
 $custom-control-active-indicator-box-shadow: none !default;
 
 $custom-checkbox-radius: $border-radius !default;
-$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
+$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
+
 $custom-checkbox-indeterminate-bg: #0074d9 !default;
-$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
+$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
+$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default;
 $custom-checkbox-indeterminate-box-shadow: none !default;
 
 $custom-radio-radius: 50% !default;
-$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
+$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default;
 
 $custom-select-padding-x:          .75rem  !default;
 $custom-select-padding-y:          .375rem !default;
@@ -391,7 +399,8 @@ $custom-select-disabled-color: $gray-light !default;
 $custom-select-bg:            #fff !default;
 $custom-select-disabled-bg:   $gray-lighter !default;
 $custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
+$custom-select-indicator-color: #333 !default;
+$custom-select-indicator:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
 $custom-select-border-width:  $input-btn-border-width !default;
 $custom-select-border-color:  $input-border-color !default;
 $custom-select-border-radius: $border-radius !default;
@@ -428,23 +437,28 @@ $custom-file-text: (
 
 
 // Form validation icons
-$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
+$form-icon-success-color: $brand-success !default;
-$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
+$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='$form-icon-success-color' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
-$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
+
+$form-icon-warning-color: $brand-warning !default;
+$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
+
+$form-icon-danger-color: $brand-danger !default;
+$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
 
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
-$dropdown-min-width:             160px !default;
+$dropdown-min-width:             10rem !default;
-$dropdown-padding-y:             5px !default;
+$dropdown-padding-y:             .5rem !default;
-$dropdown-margin-top:            2px !default;
+$dropdown-margin-top:            .125rem !default;
 $dropdown-bg:                    #fff !default;
 $dropdown-border-color:          rgba(0,0,0,.15) !default;
 $dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            #e5e5e5 !default;
-$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba(0,0,0,.175) !default;
 
 $dropdown-link-color:            $gray-dark !default;
 $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
@@ -455,7 +469,7 @@ $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
-$dropdown-item-padding-x:        20px !default;
+$dropdown-item-padding-x:        1.5rem !default;
 
 $dropdown-header-color:          $gray-light !default;
 

scss/mixins/_grid-framework.scss

@@ -3,20 +3,18 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
-
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
     // Prevent columns from collapsing when empty
     min-height: 1px;
-    // Inner gutter via padding
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
 
     @if $enable-flex {
       width: 100%;
     }
+
+    @include make-gutters($gutters);
   }
 
   $breakpoint-counter: 0;
@@ -38,8 +36,6 @@
           flex-grow: 1;
           max-width: 100%;
           min-height: 1px;
-          padding-right: ($grid-gutter-width / 2);
-          padding-left:  ($grid-gutter-width / 2);
         }
       }
 

scss/mixins/_grid.scss

@@ -2,7 +2,7 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutter: $grid-gutter-width) {
+@mixin make-container($gutter: $grid-gutter-width-base) {
   margin-left: auto;
   margin-right: auto;
   padding-left:  ($gutter / 2);
@@ -22,22 +22,36 @@
   }
 }
 
-@mixin make-row($gutter: $grid-gutter-width) {
+@mixin make-gutters($gutters: $grid-gutter-widths) {
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
+  }
+}
+
+@mixin make-row($gutters: $grid-gutter-widths) {
   @if $enable-flex {
     display: flex;
     flex-wrap: wrap;
   } @else {
     @include clearfix();
   }
-  margin-left:  ($gutter / -2);
+
-  margin-right: ($gutter / -2);
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      margin-right: ($gutter / -2);
+      margin-left:  ($gutter / -2);
+    }
+  }
 }
 
-@mixin make-col-ready($gutter: $grid-gutter-width) {
+@mixin make-col-ready($gutters: $grid-gutter-widths) {
   position: relative;
   min-height: 1px; // Prevent collapsing
-  padding-right: ($gutter / 2);
-  padding-left:  ($gutter / 2);
 
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
@@ -45,6 +59,14 @@
   @if $enable-flex {
     width: 100%;
   }
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
+  }
 }
 
 @mixin make-col($size, $columns: $grid-columns) {