From 0fdbaaf8853b266f75777cf84295b1bfdedd8a8a Mon Sep 17 00:00:00 2001
From: Herst <Herst@users.noreply.github.com>
Date: Fri, 25 Aug 2017 14:01:34 +0200
Subject: Remove speculations about jQuery 3

---
 docs/4.0/content/reboot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/4.0/content')

diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index 63a576c6f..6fa38a381 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 {% callout warning %}
 #### jQuery incompatibility
 
-`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
 {% endcallout %}
 
 To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
-- 
cgit v1.2.3


From 59631a6f040bcd4f31fde87666e703ae0b8790e8 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <pyeo717@gmail.com>
Date: Mon, 4 Sep 2017 15:35:24 -0700
Subject: v4 docs Update Table Responsive to include
 `.table-responsive{-sm|-md|-lg|-xl}` (#23665)

---
 docs/4.0/content/tables.md | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'docs/4.0/content')

diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 9de7c5553..515b9b19b 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -581,7 +581,9 @@ Regular table background variants are not available with the dark table, however
 
 ## Responsive tables
 
-Create responsive tables by adding `.table-responsive` to any `.table` 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.
+Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively.
+
+For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`.
 
 {% callout warning %}
 #### Vertical clipping/truncation
@@ -600,6 +602,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <th>Table heading</th>
         <th>Table heading</th>
         <th>Table heading</th>
+        <th>Table heading</th>
+        <th>Table heading</th>
+        <th>Table heading</th>
       </tr>
     </thead>
     <tbody>
@@ -611,6 +616,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <td>Table cell</td>
         <td>Table cell</td>
         <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
       </tr>
       <tr>
         <th scope="row">2</th>
@@ -620,6 +628,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <td>Table cell</td>
         <td>Table cell</td>
         <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
       </tr>
       <tr>
         <th scope="row">3</th>
@@ -629,11 +640,14 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <td>Table cell</td>
         <td>Table cell</td>
         <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
       </tr>
     </tbody>
   </table>
 
-  <table class="table table-bordered table-responsive">
+  <table class="table table-bordered table-responsive-lg">
     <thead>
       <tr>
         <th>#</th>
-- 
cgit v1.2.3


From 90f6912c993da239a0f10469b433dd4427a811f6 Mon Sep 17 00:00:00 2001
From: Andres Galante <agalante@gmail.com>
Date: Mon, 4 Sep 2017 19:40:13 -0300
Subject: adds captions and scop col on thead th (#23755)

---
 docs/4.0/content/tables.md | 185 +++++++++++++++++++++++++++------------------
 1 file changed, 112 insertions(+), 73 deletions(-)

(limited to 'docs/4.0/content')

diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 515b9b19b..59bdb6373 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -16,10 +16,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
 <table class="table">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -51,10 +51,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
 <table class="table table-dark">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -88,10 +88,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
 <table class="table">
   <thead class="thead-dark">
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -119,10 +119,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
 <table class="table">
   <thead class="thead-light">
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
 <table class="table table-striped">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -189,10 +189,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
 <table class="table table-striped table-dark">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
 <table class="table table-bordered">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -264,10 +264,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
 <table class="table table-bordered table-dark">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 <table class="table table-hover">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -338,10 +338,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 <table class="table table-hover table-dark">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
 <table class="table table-sm">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -406,10 +406,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
 <table class="table table-sm table-dark">
   <thead>
     <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
     </tr>
   </thead>
   <tbody>
@@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells.
   <table class="table">
     <thead>
       <tr>
-        <th>Type</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
+        <th scope="col">Type</th>
+        <th scope="col">Column heading</th>
+        <th scope="col">Column heading</th>
+        <th scope="col">Column heading</th>
       </tr>
     </thead>
     <tbody>
@@ -493,10 +493,10 @@ Regular table background variants are not available with the dark table, however
   <table class="table table-dark">
     <thead>
       <tr>
-        <th>#</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
+        <th scope="col">#</th>
+        <th scope="col">Column heading</th>
+        <th scope="col">Column heading</th>
+        <th scope="col">Column heading</th>
       </tr>
     </thead>
     <tbody>
@@ -595,16 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
   <table class="table table-responsive">
     <thead>
       <tr>
-        <th>#</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
+        <th scope="col">#</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
       </tr>
     </thead>
     <tbody>
@@ -650,13 +650,13 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
   <table class="table table-bordered table-responsive-lg">
     <thead>
       <tr>
-        <th>#</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
-        <th>Table heading</th>
+        <th scope="col">#</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
+        <th scope="col">Table heading</th>
       </tr>
     </thead>
     <tbody>
@@ -696,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
   ...
 </table>
 {% endhighlight %}
+
+
+## Captions
+
+A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
+
+{% example html %}
+<table class="table">
+  <caption>List of users</caption>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">First Name</th>
+      <th scope="col">Last Name</th>
+      <th scope="col">Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
-- 
cgit v1.2.3


From 5da8ff61ad6dbe080f32f1bdc999466f247a3f7e Mon Sep 17 00:00:00 2001
From: vsn4ik <vsn4ik@gmail.com>
Date: Fri, 8 Sep 2017 03:06:02 +0300
Subject: Use CSS3 pseudo elements in documentation

---
 docs/4.0/content/reboot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/4.0/content')

diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index 6fa38a381..f69d2519e 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 
 The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
 
-- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
   - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
 - The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
 - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
-- 
cgit v1.2.3