diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md
index 1d28fab6dddb65b10de16e9ab05feefae0ff9837..c9aa5d2997063059d7f7af405ac9d82dc96f99bb 100644
--- a/docs/4.0/utilities/flex.md
+++ b/docs/4.0/utilities/flex.md
@@ -215,20 +215,24 @@ Responsive variations also exist for `align-self`.
## Auto margins
-Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.
+Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below is are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
-### With justify-content
-
-Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`.
+**Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
{% example html %}
-<div class="d-flex justify-content-end bd-highlight mb-3">
+<div class="d-flex bd-highlight mb-3">
+ <div class="p-2 bd-highlight">Flex item</div>
+ <div class="p-2 bd-highlight">Flex item</div>
+ <div class="p-2 bd-highlight">Flex item</div>
+</div>
+
+<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
-<div class="d-flex justify-content-start bd-highlight">
+<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
@@ -237,7 +241,7 @@ Easily move all flex items to one side, but keep another on the opposite end by
### With align-items
-Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
+Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
{% example html %}
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
diff --git a/package.json b/package.json
index c6e9c4b03a837b9eb53f89d51345464109ee8b2c..2e533f8731131d734a00a2027ff2b71e2b7fcc21 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,12 @@
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/",
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ docs/ sw.js",
"js-compile": "npm-run-all --parallel js-compile-*",
- "js-compile-standalone": "cross-env ROLLUP=true rollup --environment BUNDLE:false --config build/rollup.config.js",
- "js-compile-bundle": "cross-env ROLLUP=true rollup --environment BUNDLE:true --config build/rollup.config.js",
+ "js-compile-standalone": "cross-env ROLLUP=true rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
+ "js-compile-bundle": "cross-env ROLLUP=true rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
"js-compile-plugins": "cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps",
"js-minify": "npm-run-all --parallel js-minify-*",
- "js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
- "js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
+ "js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
+ "js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
"js-minify-docs": "uglifyjs --mangle --comments \"/^!/\" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & node build/saucelabs-unit-test.js",
@@ -125,6 +125,7 @@
"build",
"js/.eslintrc.json",
"js/**/*.js",
+ "js/**/*.js.map",
"scss/**/*.scss"
],
"browserslist": [
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3d78f0b8ae0f5a9bb91fafe2a2a5aa3f6a9a69a1..af0846806ee78cb88457e989209334fcc6a898b1 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -62,16 +62,25 @@ $colors: map-merge((
"gray-dark": $gray-800
), $colors);
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-800 !default;
+
$theme-colors: () !default;
$theme-colors: map-merge((
- "primary": $blue,
- "secondary": $gray-600,
- "success": $green,
- "info": $cyan,
- "warning": $yellow,
- "danger": $red,
- "light": $gray-100,
- "dark": $gray-800
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
), $theme-colors);
// stylelint-enable