diff --git a/Gruntfile.js b/Gruntfile.js
index 2b9c1889924f85cf49a06908950b1b4043baec11..bc7d009f0ade796cccfac9ef8b5e83827969d1ba 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -170,6 +170,7 @@ module.exports = function (grunt) {
compatibility: 'ie9',
keepSpecialComments: '*',
sourceMap: true,
+ sourceMapInlineSources: true,
advanced: false
},
core: {
diff --git a/_config.yml b/_config.yml
index f3283b4621aa12963189043a2a48a7ea1f2006cd..31c708ecd4131772c44e6732ab9376f82fedbd00 100644
--- a/_config.yml
+++ b/_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
diff --git a/docs/_data/browser-bugs.yml b/docs/_data/browser-bugs.yml
index f69b93730900aac398ae566da7512e4c51471427..97c6d3d35bd7909d1c77a09d7e552405c24e3a86 100644
--- a/docs/_data/browser-bugs.yml
+++ b/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
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 3fc75c0583023cd185cb796e5e448cdf9cef46d0..54bfddf6902be9a426f8b90ded8c6b2432c85584 100644
--- a/docs/_includes/header.html
+++ b/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" %}
- {{ page.title }}
+ {% if page.title %}
+ {{ page.title }} · {{ site.title }}
{% else %}
- {{ page.title }} · Bootstrap
+ {{ site.title }} · {{ site.description }}
{% endif %}
</title>
+{% include social.html %}
+
<!-- Bootstrap core CSS -->
{% if site.github %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
diff --git a/docs/_includes/social.html b/docs/_includes/social.html
new file mode 100644
index 0000000000000000000000000000000000000000..c488ea61088263f8de60f411de8e6a5d2521fbf8
--- /dev/null
+++ b/docs/_includes/social.html
@@ -0,0 +1,31 @@
+<!-- Twitter -->
+<meta name="twitter:site" content="@{{ site.twitter }}">
+<meta name="twitter:creator" content="@{{ site.twitter }}">
+
+{% if page.title %}
+ <meta name="twitter:card" content="summary">
+ <meta name="twitter:title" content="{{ page.title }}">
+ <meta name="twitter:description" content="{{ page.description }}">
+ <meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
+{% else %}
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:title" content="{{ site.title }}">
+ <meta name="twitter:description" content="{{ site.description }}">
+ <meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
+{% endif %}
+
+<!-- Facebook -->
+{% if page.title %}
+ <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+ <meta property="og:title" content="{{ page.title }}">
+ <meta property="og:description" content="{{ page.description }}">
+{% else %}
+ <meta property="og:url" content="{{ site.url }}">
+ <meta property="og:title" content="{{ site.title }}">
+ <meta property="og:description" content="{{ site.description }}">
+{% endif %}
+<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
+
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">
diff --git a/docs/about/brand.md b/docs/about/brand.md
index fcb8804aed444cc2447b70761580f9e490b05dbc..546e9c1542c433642d94ee6b9f55a0b4265ddb96 100644
--- a/docs/about/brand.md
+++ b/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
---
diff --git a/docs/about/history.md b/docs/about/history.md
index ae4764ee73d906ecd793f2ca8be1cd753d1d6279..590a99c35f30afb679a8fc0f79f8791ece123b59 100644
--- a/docs/about/history.md
+++ b/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/"
---
diff --git a/docs/about/license.md b/docs/about/license.md
index 997b1c9ef0783ee06003613c100075fd3f84be79..d614731bf000d75dbf4fe750bc7e2a8cb1508e94 100644
--- a/docs/about/license.md
+++ b/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
---
diff --git a/docs/about/team.md b/docs/about/team.md
index 2492471cf12fad10f146467437ba614b77cd6758..aa575f8f2b93c936b35fa9277e78341371aae597 100644
--- a/docs/about/team.md
+++ b/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
---
diff --git a/docs/about/translations.md b/docs/about/translations.md
index de6519bb318aeff96c51531eba20fe116e74590d..576259d356e2fe35c05eb1ac7ff2653bf6156795 100644
--- a/docs/about/translations.md
+++ b/docs/about/translations.md
@@ -1,6 +1,7 @@
---
layout: docs
title: Translations
+description: Links to community-translated Bootstrap documentation sites.
group: about
---
diff --git a/docs/assets/brand/bootstrap-social-logo.png b/docs/assets/brand/bootstrap-social-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2f0168c5d1b6117dc8547daa20be77e70896300
Binary files /dev/null and b/docs/assets/brand/bootstrap-social-logo.png differ
diff --git a/docs/assets/brand/bootstrap-social.png b/docs/assets/brand/bootstrap-social.png
new file mode 100644
index 0000000000000000000000000000000000000000..cfac9c5fc7d11dd59c0d2f69db1d8c3eb9de729c
Binary files /dev/null and b/docs/assets/brand/bootstrap-social.png differ
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 1ab49218cb900c698efeca60788bd29de7197ec6..a429b9aae43a0feebc32ce8e0382c67dd11b19cc 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/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) {
diff --git a/docs/assets/scss/_featurettes.scss b/docs/assets/scss/_featurettes.scss
index a748343871c806d19f04c53de8929dadb06d49ed..03119ce508721104973a005c79d5aea1b5824dc6 100644
--- a/docs/assets/scss/_featurettes.scss
+++ b/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);
}
}
}
diff --git a/docs/assets/scss/_masthead.scss b/docs/assets/scss/_masthead.scss
index f0ebe936387339d2fec5f1799dd11c6352e34f99..aa59ffbfc3765bbf43c28485282cab215d217267 100644
--- a/docs/assets/scss/_masthead.scss
+++ b/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%));
diff --git a/docs/assets/scss/_page-header.scss b/docs/assets/scss/_page-header.scss
index 457d3fbef8b8a6bc3fea7c9b67c0d6d3d3f64163..e5145990365d56bc4655121ad083d0155ad3719c 100644
--- a/docs/assets/scss/_page-header.scss
+++ b/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;
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index 56e8b089c64ce20f93b178ce946c7da7a3985935..54172a6736348b407972c8072bfadd274db98e46 100644
--- a/docs/components/alerts.md
+++ b/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
---
diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
index 40d407ddc5d8a3e3a3e4d2ef439ce7ce45310a13..8beaa0ae4a8bd0135eb6335e9ab0679f10059168 100644
--- a/docs/components/breadcrumb.md
+++ b/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
---
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index c14d3d63ab427e9f96427f094891e2d14ea5308c..cff38e1b1335f0d9d7d8e9028ed8714837c336c1 100644
--- a/docs/components/button-group.md
+++ b/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
---
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index d5aa453d7aeb5754fb078f630d20295feb981851..02b14f913abdca12872635875be650ac11c11486 100644
--- a/docs/components/buttons.md
+++ b/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/"
---
diff --git a/docs/components/card.md b/docs/components/card.md
index 1cf116d86917d437f5a4a374af99cc5314b5ca98..04f028189897124017991460ba298ca9a7a5bf21 100644
--- a/docs/components/card.md
+++ b/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
---
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 5f177432f0f3c28f18b8a32121f19fb98dae97b6..5bc2997742d9cf6ad921e2c8838d872084e2ca8f 100644
--- a/docs/components/carousel.md
+++ b/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
---
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index ebbefeca4fe1af7454b6b1d20c8b19f4819e2ad3..aa82127ed38550922e0a9dc1f9b5aa01cc8e5e6f 100644
--- a/docs/components/collapse.md
+++ b/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
---
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index d43f5e17d5325ae667c73b91c7353e3371970d41..db26ffe874dc2be78f62f68b2af00ed5426717ff 100644
--- a/docs/components/dropdowns.md
+++ b/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
---
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 09d0d4f8f29ab6476e8c63d5a26d90fb80938965..de66cde98cbf958291fc2dc909b5cc8bc843ac77 100644
--- a/docs/components/forms.md
+++ b/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
---
diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 21f944d6465c68783b29b2c4617c9809a0ffc220..0082a62b617392fa751615e30628198e96dc8978 100644
--- a/docs/components/input-group.md
+++ b/docs/components/input-group.md
@@ -1,6 +1,7 @@
---
layout: docs
title: Input group
+description: Extend form controls with the input group.
group: components
---
diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md
index 9dd3c8294e785d3dfd2a706dddb5e1b56a8728a1..e47becee9c27573abb821af9322dbb002e8342eb 100644
--- a/docs/components/jumbotron.md
+++ b/docs/components/jumbotron.md
@@ -1,6 +1,7 @@
---
layout: docs
title: Jumbotron
+description: Lightweight, flexible component for showcasing hero unit style content.
group: components
---
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 8b3b9cd885611211da2bd37664ac18e72fb2306d..7b159bc799b7a0bba98b29f2ee0075822f83232f 100644
--- a/docs/components/list-group.md
+++ b/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
---
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 55a0878b6c0dc4a001e8e58d2d211aa1037172f0..26676cacc338f4061d44a818e464998ee1dc59a6 100644
--- a/docs/components/modal.md
+++ b/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
---
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index d3747a87f7b57c0314935e08752bb1e3de4ea8ba..c5ce0a25982da4c5279818b01788b3cdf662a4dd 100644
--- a/docs/components/navbar.md
+++ b/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
---
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 78d476e1c65eb38d249b66312d9da24f80600508..2b76f36e3c3d09cae8c52c4f009ff35d314f95d8 100644
--- a/docs/components/navs.md
+++ b/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
---
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 68c906c77c106335dec7e02b84ecd7c467dce832..7a454a51f9bcf2c72dcb14c32a9c5655d94474d6 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -1,6 +1,7 @@
---
layout: docs
title: Pagination
+description: Documentation and examples for showing pagination links.
group: components
---
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index a723f33e3e39a82dda97ea8b372ad8b7a32d816f..bfaaf270eeae975969f484a6d1177aabbad6c694 100644
--- a/docs/components/popovers.md
+++ b/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
---
diff --git a/docs/components/progress.md b/docs/components/progress.md
index 5e0abc5fe61792cf0f4870bfbcc71d3cda7af2e5..d604e9e7c32ccd249f77b02a30e2b70e15f99dad 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -1,6 +1,7 @@
---
layout: docs
title: Progress
+description: Documentation and examples for using Bootstrap progress bars.
group: components
---
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 622469aa10ba61087ff295a71a7ef65a31aa385b..52b7c29cdcf80de9a6a5a7ce38108806431a9375 100644
--- a/docs/components/scrollspy.md
+++ b/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
---
diff --git a/docs/components/tag.md b/docs/components/tag.md
index 09608931a2ff985f538c14adc5f7e32eb26226e4..d292cad227ec3441d6dce1be3efc887ab2232e20 100644
--- a/docs/components/tag.md
+++ b/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
---
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index e989307caa31272f1220b0633df0817bf76e9c32..10285701f3be9d1de75abfe1157363f5de40efc7 100644
--- a/docs/components/tooltips.md
+++ b/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
---
diff --git a/docs/content/code.md b/docs/content/code.md
index 79059a1d19503d2084335754b4cccb3669bfc3da..a62e0845ff5e5eabcbd80f592d3c05fd19e94476 100644
--- a/docs/content/code.md
+++ b/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
---
diff --git a/docs/content/figures.md b/docs/content/figures.md
index d572705189672e5cf78452a87f6c926a09089a97..c24b5b2c85194a5ee76688a1c5059c18c2a8abb0 100644
--- a/docs/content/figures.md
+++ b/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.
diff --git a/docs/content/images.md b/docs/content/images.md
index f21010f0fb19cd07c9e3b9dbbf0c640a6bbeda27..48a5dd3d426523c2eba00fa35bb05f1b00b1091e 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -1,6 +1,7 @@
---
layout: docs
title: Images
+description: Documentation and examples for styling images with Bootstrap.
group: content
---
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index a6815e9db5994727af76a135f97e77011846f647..1d93cc9ce3a4ccd798d24610403cb172fbf41d97 100644
--- a/docs/content/reboot.md
+++ b/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/"
---
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 3b4d58b36907325b2e585fabe3a550cf35fc7a57..f2741b7342466ff0ecaaf4752f567324bb53e2d8 100644
--- a/docs/content/tables.md
+++ b/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">
diff --git a/docs/content/typography.md b/docs/content/typography.md
index a59f503474d29699521c9bf9375d45000fa39094..f9b5913d23c68745c789e08842cd412b330a4f22 100644
--- a/docs/content/typography.md
+++ b/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
---
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
index 43dee35693d1dd275433391d685d0479ac859a5d..19105b8ac7eac793bf57b5658bd775f62724ec34 100644
--- a/docs/getting-started/accessibility.md
+++ b/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
---
diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md
index 1e67a16e750553cd70b24f54a4b869ce4209dee3..c030a5ac69cfc97ce0fa164f96b1c93769d6130a 100644
--- a/docs/getting-started/best-practices.md
+++ b/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
---
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
index a73ec898273407244c9cae1b9410dd0607ef8968..4e0b0c78b2a7f6d42710010883cfc242683f17b2 100644
--- a/docs/getting-started/browsers-devices.md
+++ b/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
---
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
index 2fe10088b858e1eb8bcf226c33f25afbdbcbc33c..4d684f3ac1594687c042031ffad5888796800446 100644
--- a/docs/getting-started/build-tools.md
+++ b/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
---
diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md
index ab9c633252a9d3e9cf7a867fec782849cdbc2029..c54cb5eba23db29bb3de2cc3d4d2148aa135eb6e 100644
--- a/docs/getting-started/contents.md
+++ b/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
---
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
index be46329befc7b781dbe13d371b89d5d6f7176a36..183dd0abd0b01c9d446962d5eed0eab7d871183e 100644
--- a/docs/getting-started/download.md
+++ b/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
---
diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md
index 9c0f1a87620b0ffbdf90b1c923bdd54c19ddfe6c..b658001feba89dca739019726a82e42fe2829608 100644
--- a/docs/getting-started/flexbox.md
+++ b/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
---
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index 8cec71fd6ce0b80f2e5131977b73b318c8081ff0..716f6f3494bdb353bf148eca3746be8c19598c70 100644
--- a/docs/getting-started/introduction.md
+++ b/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/"
---
diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md
index debc4dcf5c7648e0438c9a6f56c6eecd7c841999..b6a38fb7a2c50ef258630515ca3ec2a704754148 100644
--- a/docs/getting-started/javascript.md
+++ b/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
---
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
index dd7f7fb3d330bb8d06e3724ea8a5bd4d3a9ebebe..81c9c92fcf93920d423aabb6b857267147f37697 100644
--- a/docs/getting-started/options.md
+++ b/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
---
diff --git a/docs/index.html b/docs/index.html
index 47c36ff2c3658153eeb1861744c1697e331dfb19..8039ab1ae4b55c1ffad99a1a37d131f92f019a97 100644
--- a/docs/index.html
+++ b/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">
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index d15d6fb996c4894610d3907eec790448395e526b..0eae713b36f03f87bac8f365d8fbe292057eb95a 100644
--- a/docs/layout/flexbox-grid.md
+++ b/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
---
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 5b68053aaeb0c66cb22289cfbb5d22c89284f90d..0466fc7bfb12f864171c839840aaa80d9f6099cf 100644
--- a/docs/layout/grid.md
+++ b/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-gutter-width: 30px;
+$grid-columns: 12 !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;
{% endhighlight %}
### Grid tiers
diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
index fcb89a3b5ad1e86150086738a4e21b9e1eca3ebf..95dbceb40d1c52f614b26df22c061046c33e8aa8 100644
--- a/docs/layout/media-object.md
+++ b/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
---
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 81cdecf6083ede84e09c49c8d6275e793b622ae9..3e6c7e7e05ca676fd54e61a68952a15ab6d89d13 100644
--- a/docs/layout/overview.md
+++ b/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/"
---
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 2a44fd589e88a1453fd37f1ac0c925a7cfcb5b1f..4334eb4d6d000f3b672ed460dae4bd7e68589a8f 100644
--- a/docs/layout/responsive-utilities.md
+++ b/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
---
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 60e9f7a7441fb2f6184bfb84d84dc663f32cad75..0e63ecc54be2103563fa6fad82794e335d1fdeed 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -10,6 +10,7 @@
> .btn {
position: relative;
float: left;
+ margin-bottom: 0;
// Bring the "active" button to the front
&:focus,
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index e696d28bef6fcd4f90705c55282710a1ef6970d2..47702e7955de771d34a92f2150f05a4ac4fe7245 100644
--- a/scss/_dropdown.scss
+++ b/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
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 263a8bc156358c88fbcb8da7454a706283bc23f4..59465ee6c913e490926628f2a3149ba842d84cb5 100644
--- a/scss/_forms.scss
+++ b/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;
}
}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 1a1e4728b5fbddb251d686d6354a727bfe423c7d..a24c3d3fae5a5522bbb3c4dea7812cf3a7fd75a7 100644
--- a/scss/_reboot.scss
+++ b/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"],
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e56912ded54a5fc077085a2dc5fc907f9b8861cd..08d372d80848a77f48d5ab054317a89c6c50fdf6 100644
--- a/scss/_variables.scss
+++ b/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-gutter-width: 30px !default;
-
+$grid-columns: 12 !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-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-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-success-color: $brand-success !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-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-padding-y: 5px !default;
-$dropdown-margin-top: 2px !default;
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-y: .5rem !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;
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 8b17d7843fa8bad4da8f2c902272a6b3e490ea9a..0e3852e24bf5f027f639d37bce8cf2c68efd23ef 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/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);
}
}
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index fa9b3995b2163e948232fb7d1aba8a23349e56e2..b381ba900e994f38cdea0e802c7824ebad7b27ce 100644
--- a/scss/mixins/_grid.scss
+++ b/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) {