Merge branch 'v4-dev' into v4-forms-cleanup

docs/_data/nav.yml

@@ -30,28 +30,28 @@
 
 - title: Components
   pages:
+    - title: Alerts
+    - title: Breadcrumb
     - title: Buttons
     - title: Button group
     - title: Button dropdown
+    - title: Card
+    - title: Carousel 
+    - title: Collapse
+    - title: Dropdowns
     - title: Forms
     - title: Input group
-    - title: Dropdowns
     - title: Jumbotron
-    - title: Tag
-    - title: Alerts
-    - title: Card
-    - title: Navs
-    - title: Navbar
-    - title: Breadcrumb
-    - title: Pagination
-    - title: Progress
     - title: List group
     - title: Modal
-    - title: Scrollspy
-    - title: Tooltips
+    - title: Navs
+    - title: Navbar
+    - title: Pagination
     - title: Popovers
-    - title: Collapse
-    - title: Carousel
+    - title: Progress
+    - title: Scrollspy
+    - title: Tag
+    - title: Tooltips
     - title: Utilities
 
 # - title: Extend

docs/_data/translations.yml

@@ -7,3 +7,8 @@
   code: zh
   description: Bootstrap 4 中文文档教程
   url: http://boot4.com/
+
+- name: Japanese
+  code: ja
+  description: Bootstrap 4 日本語リファレンス
+  url: http://bootstrap4.jp/

docs/components/card.md

@@ -51,6 +51,8 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+Lists can be added to a card by adding a list group.
+
 {% example html %}
 <div class="card">
   <ul class="list-group list-group-flush">
@@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+
 {% example html %}
 <div class="card">
   <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
@@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to  a `<a>` tag.
+
 {% example html %}
 <div class="card card-block">
   <h4 class="card-title">Card title</h4>
@@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li
 </div>
 {% endexample %}
 
+Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
+
+The multiple content types can be easily combined to create the card you need. See below for an example.
+
 {% example html %}
 <div class="card">
   <div class="card-block">
@@ -170,6 +180,8 @@ Add an optional header and/or footer within a card.
 </div>
 {% endexample %}
 
+Card headers can be styled by adding `.card-header` to `<h*>` elements.
+
 {% example html %}
 <div class="card">
   <h3 class="card-header">Featured</h3>

docs/content/reboot.md

@@ -148,7 +148,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
 
 ## Tables
 
-Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
+Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
 
 <div class="bd-example">
   <table>

docs/content/tables.md

@@ -4,14 +4,16 @@ title: Tables
 group: content
 ---
 
-Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
+Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes.
 
 ## Contents
 
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-## Basic example
+## Examples
+
+Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
 
 {% example html %}
 <table class="table">
@@ -46,7 +48,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
 </table>
 {% endexample %}
 
-## Inverse table
+You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
 
 {% example html %}
 <table class="table table-inverse">
@@ -83,7 +85,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
 
 ## Table head options
 
-Use one of two modifier classes to make `<thead>`s appear light or dark gray.
+Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
 
 {% example html %}
 <table class="table">
@@ -420,9 +422,6 @@ Use contextual classes to color table rows or individual cells.
   </table>
 </div>
 
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
-
 {% highlight html %}
 <!-- On rows -->
 <tr class="table-active">...</tr>
@@ -441,6 +440,98 @@ Use contextual classes to color table rows or individual cells.
 </tr>
 {% endhighlight %}
 
+Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles.
+
+<div class="bd-example">
+  <table class="table table-inverse">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Column heading</th>
+        <th>Column heading</th>
+        <th>Column heading</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="bg-primary">
+        <th scope="row">1</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="bg-success">
+        <th scope="row">3</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">4</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="bg-info">
+        <th scope="row">5</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">6</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="bg-warning">
+        <th scope="row">7</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr>
+        <th scope="row">8</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="bg-danger">
+        <th scope="row">9</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% highlight html %}
+<!-- On rows -->
+<tr class="bg-primary">...</tr>
+<tr class="bg-success">...</tr>
+<tr class="bg-warning">...</tr>
+<tr class="bg-danger">...</tr>
+<tr class="bg-info">...</tr>
+
+<!-- On cells (`td` or `th`) -->
+<tr>
+  <td class="bg-primary">...</td>
+  <td class="bg-success">...</td>
+  <td class="bg-warning">...</td>
+  <td class="bg-danger">...</td>
+  <td class="bg-info">...</td>
+</tr>
+{% endhighlight %}
+
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Responsive tables
 
 Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

docs/content/typography.md

@@ -24,7 +24,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de
 
 ## Headings
 
-All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
+All HTML headings, `<h1>` through `<h6>`, are available.
 
 <div class="bd-example bd-example-type">
   <table class="table">
@@ -66,6 +66,17 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
 <h6>h6. Bootstrap heading</h6>
 {% endhighlight %}
 
+`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+{% example html %}
+<p class="h1">h1. Bootstrap heading</p>
+<p class="h2">h2. Bootstrap heading</p>
+<p class="h3">h3. Bootstrap heading</p>
+<p class="h4">h4. Bootstrap heading</p>
+<p class="h5">h5. Bootstrap heading</p>
+<p class="h6">h6. Bootstrap heading</p>
+{% endexample %}
+
 ### Customizing headings
 
 Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

docs/dist/css/bootstrap.css

@@ -3,7 +3,7 @@
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
-/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
 html {
   font-family: sans-serif;
   -ms-text-size-adjust: 100%;
@@ -34,7 +34,6 @@ canvas,
 progress,
 video {
   display: inline-block;
-  vertical-align: baseline;
 }
 
 audio:not([controls]) {
@@ -42,8 +41,12 @@ audio:not([controls]) {
   height: 0;
 }
 
-[hidden],
-template {
+progress {
+  vertical-align: baseline;
+}
+
+template,
+[hidden] {
   display: none;
 }
 
@@ -51,21 +54,25 @@ a {
   background-color: transparent;
 }
 
-a:active {
-  outline: 0;
-}
-
+a:active,
 a:hover {
-  outline: 0;
+  outline-width: 0;
 }
 
 abbr[title] {
-  border-bottom: 1px dotted;
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
 }
 
 b,
 strong {
-  font-weight: bold;
+  font-weight: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
 }
 
 dfn {
@@ -78,7 +85,7 @@ h1 {
 }
 
 mark {
-  background: #ff0;
+  background-color: #ff0;
   color: #000;
 }
 
@@ -94,36 +101,22 @@ sup {
   vertical-align: baseline;
 }
 
-sup {
-  top: -0.5em;
-}
-
 sub {
   bottom: -0.25em;
 }
 
+sup {
+  top: -0.5em;
+}
+
 img {
-  border: 0;
+  border-style: none;
 }
 
 svg:not(:root) {
   overflow: hidden;
 }
 
-figure {
-  margin: 1em 40px;
-}
-
-hr {
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
-  height: 0;
-}
-
-pre {
-  overflow: auto;
-}
-
 code,
 kbd,
 pre,
@@ -132,67 +125,73 @@ samp {
   font-size: 1em;
 }
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
+figure {
+  margin: 1em 40px;
 }
 
-button {
+hr {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  height: 0;
   overflow: visible;
 }
 
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+button,
+input,
+select {
+  overflow: visible;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+
 button,
 select {
   text-transform: none;
 }
 
 button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
+[type="button"],
+[type="reset"],
+[type="submit"] {
   cursor: pointer;
 }
 
-button[disabled],
-html input[disabled] {
+[disabled] {
   cursor: default;
 }
 
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 
-input {
-  line-height: normal;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-input[type="search"] {
-  -webkit-appearance: textfield;
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+button:-moz-focusring,
+input:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }
 
 fieldset {
@@ -202,28 +201,40 @@ fieldset {
 }
 
 legend {
-  border: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
   padding: 0;
+  white-space: normal;
 }
 
 textarea {
   overflow: auto;
 }
 
-optgroup {
-  font-weight: bold;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
+[type="checkbox"],
+[type="radio"] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   padding: 0;
 }
 
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
 @media print {
   *,
   *::before,
@@ -402,6 +413,7 @@ a:not([href]):focus {
 pre {
   margin-top: 0;
   margin-bottom: 1rem;
+  overflow: auto;
 }
 
 figure {
@@ -430,6 +442,7 @@ textarea {
 }
 
 table {
+  border-collapse: collapse;
   background-color: transparent;
 }
 
@@ -464,6 +477,13 @@ textarea {
   border-radius: 0;
 }
 
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
 textarea {
   resize: vertical;
 }
@@ -2186,48 +2206,6 @@ select.form-control:focus::-ms-value {
   font-size: 1rem;
 }
 
-_::-webkit-full-page-media.form-control,
-input[type="date"].form-control,
-input[type="time"].form-control,
-input[type="datetime-local"].form-control,
-input[type="month"].form-control {
-  line-height: 2.5rem;
-}
-
-_::-webkit-full-page-media.input-sm,
-.input-group-sm _::-webkit-full-page-media.form-control,
-input[type="date"].input-sm,
-.input-group-sm
-input[type="date"].form-control,
-input[type="time"].input-sm,
-.input-group-sm
-input[type="time"].form-control,
-input[type="datetime-local"].input-sm,
-.input-group-sm
-input[type="datetime-local"].form-control,
-input[type="month"].input-sm,
-.input-group-sm
-input[type="month"].form-control {
-  line-height: 1.8125rem;
-}
-
-_::-webkit-full-page-media.input-lg,
-.input-group-lg _::-webkit-full-page-media.form-control,
-input[type="date"].input-lg,
-.input-group-lg
-input[type="date"].form-control,
-input[type="time"].input-lg,
-.input-group-lg
-input[type="time"].form-control,
-input[type="datetime-local"].input-lg,
-.input-group-lg
-input[type="datetime-local"].form-control,
-input[type="month"].input-lg,
-.input-group-lg
-input[type="month"].form-control {
-  line-height: 3.166667rem;
-}
-
 .form-control-static {
   min-height: 2.5rem;
   padding-top: 0.5rem;
@@ -3742,6 +3720,12 @@ input[type="button"].btn-block {
   background-color: #fff;
 }
 
+.custom-select:disabled {
+  color: #818a91;
+  cursor: not-allowed;
+  background-color: #eceeef;
+}
+
 .custom-select::-ms-expand {
   opacity: 0;
 }
@@ -4157,8 +4141,7 @@ input[type="button"].btn-block {
   margin-bottom: 0.75rem;
   background-color: #fff;
   border-radius: 0.25rem;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125);
-          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.125);
+  border: 1px solid rgba(0, 0, 0, 0.125);
 }
 
 .card-block {

docs/layout/overview.md

@@ -111,3 +111,46 @@ Once again, these media queries are also available via Sass mixins:
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
 {% endhighlight %}
+
+We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
+
+{% highlight scss %}
+// Extra small devices (portrait phones, less than 544px)
+@media (max-width: 543px) { ... }
+
+// Small devices (landscape phones, 544px and up)
+@media (min-width: 544px) and (max-width: 767px) { ... }
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991px) { ... }
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199px) { ... }
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) { ... }
+{% endhighlight %}
+
+These media queries are also available via Sass mixins:
+
+{% highlight scss %}
+@include media-breakpoint-only(xs) { ... }
+@include media-breakpoint-only(sm) { ... }
+@include media-breakpoint-only(md) { ... }
+@include media-breakpoint-only(lg) { ... }
+@include media-breakpoint-only(xl) { ... }
+{% endhighlight %}
+
+And finally media that spans multiple breakpoint widths:
+
+{% highlight scss %}
+// Example 
+// Medium devices (tablets, 768px and up) and  Large devices (desktops, 992px and up)
+@media (min-width: 768px) and (max-width: 1199px) { ... }
+{% endhighlight %}
+
+The Sass mixin for the above example look like that shown beneath:
+
+{% highlight scss %}
+@include media-breakpoint-between(md, lg) { ... }
+{% endhighlight %}

docs/migration.md

@@ -64,7 +64,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 ### Typography
 
 - Moved all `.text-` utilities to the `_utilities.scss` file.
-- Dropped the `.page-header` class entirely.
+- Dropped `.page-header` as, aside from the border, all it's styles can be applied via utilities.
 - `.dl-horizontal` has been dropped. Instead, use `.row` on `<dl>` and use grid column classes (or mixins) on its `<dt>` and `<dd>` children.
 - Custom `<blockquote>` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier.
 
@@ -87,22 +87,30 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 - Renamed `.control-label` to `.form-control-label`.
 - Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
 - Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
-- Dropped `.help-block`. Use the `.text-muted` utility class instead.
+- Dropped `.help-block`; superseded by the `.text-muted` utility class to reduce duplicate code.
 - Horizontal forms overhauled:
   - Dropped the `.form-horizontal` class requirement.
-  - Requires the addition of `.row` to `.form-group`.
+  - `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`).
   - Added new `.form-control-label` class to vertically center labels with `.form-control`s.
 
 ### Buttons
 
 - Renamed `.btn-default` to `.btn-secondary`.
-- Dropped the `.btn-xs` class entirely.
+- Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
 - The [stateful button](http://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
   - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
 
 ### Button group
 
-- Dropped the `.btn-group-xs` class entirely.
+- Dropped the `.btn-group-xs` class entirely given removal of `.btn-xs`.
+
+### Dropdowns
+
+- Switched from parent selectors to singular classes for all components, modifiers, etc.
+- Dropdowns can be built with `<div>`s or `<ul>`s now.
+- Rebuilt dropdown styles and markup to provide easy, built-in support for `<a>` and `<button>` based dropdown items.
+- Dropdown items now require `.dropdown-item`.
+- Dropdown toggles no longer require an explicit `<span class="caret"></span>`; this is now provided automatically via CSS's `::after` on `.dropdown-toggle`.
 
 ### Grid system