twbs · mdo · Jul 22, 2019 · Jul 15, 2019 · Jul 15, 2019 · Jul 15, 2019
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -157,7 +157,6 @@ address {
 
 ol,
 ul {
-  padding-right: 2rem;
   padding-left: 2rem;
 }
 

diff --git a/site/content/docs/4.3/components/alerts.md b/site/content/docs/4.3/components/alerts.md
@@ -107,7 +107,7 @@ var bsAlert = new bootstrap.Alert(myAlert)
 
 This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Method</th>
@@ -152,7 +152,7 @@ alert.close()
 
 Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Event</th>

diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
@@ -159,7 +159,7 @@ var button = document.getElementById('myButton')
 var bsButton = new bootstrap.Button(button)
 {{< /highlight >}}
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Method</th>

diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md
@@ -862,7 +862,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style
 
 ### Methods
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Method</th>
@@ -914,7 +914,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style
 All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
 `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event.
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Method</th>

diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md
@@ -53,7 +53,7 @@ This `font-family` is applied to the `<body>` and automatically inherited global
 
 All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Heading</th>
@@ -102,7 +102,7 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
 
 ## Lists
 
-All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the horizontal `padding` on `<ul>` and `<ol>` elements.
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
 
 <div class="bd-example">
 {{< markdown >}}

diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md
@@ -22,7 +22,7 @@ These styles can be found within `_reboot.scss`, and the global variables are de
 
 All HTML headings, `<h1>` through `<h6>`, are available.
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Heading</th>

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
@@ -53,7 +53,8 @@ Changes to any layout tools and our grid system.
 Changes to Reboot, typography, tables, and more.
 
 - **Todo:** Make RFS enabled by default
-- Reset default horizontal `padding` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
+- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
+- Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
 
 ## Forms
 
@@ -63,12 +64,17 @@ Changes to Reboot, typography, tables, and more.
 - Rearranged source Sass files under `scss/forms/`, including moving over input group styles.
 - Combined native and custom checkboxes and radios into single `.form-check` class.
   - New checks support sizing via `em`/`font-size` or explicit modifier classes now.
+  - New checks now appear larger by default for improved usability.
   - Dropped `.custom-control` and associated classes.
+  - Renamed most `$custom-control` variables to `$form-control` ones.
 - Combined native and custom selects into `.form-select`.
   - Dropped `.custom-select` and associated classes.
-- Dropped native `.form-control-file` and `.form-control-range` components.
-- Renamed `.custom-file` to `.form-file` (including variables).
-- Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
+  - Renamed most `$custom-select` variables to `$form-select` ones.
+- Updated file input component with same overall design, but improved HTML.
+  - Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
+  - Dropped native `.form-control-file` and `.form-control-range` components entirely.
+  - Renamed `.custom-file` to `.form-file` (including variables).
+  - Added support for `:focus` and `:disabled` styles.
 - Renamed `.custom-range` to `.form-range` (including variables).
 - Dropped `.form-group` for margin utilities (we've replaced our docs examples with `.mb-3`).
 - Dropped support for `.form-control-plaintext` inside `.input-group`s.
@@ -87,6 +93,11 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 - **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
 - **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
 
+### Icons (New!)
+
+- Added new Bootstrap icons to the project for our documentation, form controls, and more.
+- Removed Open Iconic icons from project source code for form controls.
+
 ### Jumbotron
 
 - The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.

diff --git a/site/content/docs/4.3/utilities/display.md b/site/content/docs/4.3/utilities/display.md
@@ -55,7 +55,7 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-
 
 To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
 
-<table>
+<table class="table">
   <thead>
     <tr>
       <th>Screen size</th>

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
@@ -7,24 +7,9 @@
     {{ partial "skippy" . }}
 
     {{ partial "docs-navbar" . }}
+    {{ partial "docs-subnav" . }}
 
-    <nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
-      <div class="container d-flex align-items-md-center flex-column flex-md-row">
-        <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
-          <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-
-          {{ partial "docs-versions" . }}
-        </div>
-        <form class="bd-search d-flex align-items-center">
-          <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
-        </form>
-      </div>
-    </nav>
-
-    <div class="container">
+    <div class="container-xl my-4">
       <div class="row flex-xl-nowrap">
         <div class="col-md-3 bd-sidebar">
           {{ partial "docs-sidebar" . }}

diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
@@ -8,21 +8,6 @@
 
     {{ partial "docs-navbar" . }}
 
-    <nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
-      <div class="container d-flex align-items-md-center flex-column flex-md-row">
-        <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
-          <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          {{ partial "docs-versions" . }}
-          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
-          <span class="text-muted">Examples</span>
-        </div>
-        {{ partial "docs-search" . }}
-      </div>
-    </nav>
-
     <header class="py-5 border-bottom">
       <div class="container pt-md-1 pb-md-4">
         <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
@@ -1,10 +1,10 @@
-<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
-  <div class="container py-0 px-3">
+<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar px-0">
+  <div class="container-xl flex-wrap flex-md-nowrap py-0 px-3">
     <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
     </a>
 
-    <div class="navbar-nav-scroll">
+    <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start">
       <ul class="navbar-nav bd-navbar-nav flex-row">
         <li class="nav-item">
           <a class="nav-link{{ if .IsHome }} active{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
@@ -27,7 +27,7 @@
       </ul>
     </div>
 
-    <ul class="navbar-nav ml-md-auto">
+    <ul class="navbar-nav ml-sm-auto">
       <li class="nav-item">
         <a class="nav-link p-2" href="{{ .Site.Params.repo }}" target="_blank" rel="noopener" aria-label="GitHub">
           {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}

diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
@@ -21,7 +21,7 @@
         </a>
 
         {{- if $group.pages }}
-        <ul class="nav bd-sidenav mb-2">
+        <ul class="nav bd-sidenav flex-column mb-2">
           {{- range $doc := $group.pages -}}
             {{- $doc_slug := $doc.title | urlize }}
             <li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}>

diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
@@ -0,0 +1,23 @@
+<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
+  <div class="container-xl d-flex align-items-md-center flex-wrap">
+    <div class="d-flex align-items-center mr-sm-auto order-2 order-md-0">
+      <div class="d-none d-md-block">
+        <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
+        {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+      </div>
+
+      <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
+      {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+
+      {{ partial "docs-versions" . }}
+    </div>
+
+    <form class="bd-search d-flex align-items-center mb-2 mb-md-0">
+      <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
+    </form>
+
+    <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
+     {{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
+   </button>
+  </div>
+</nav>
diff --git a/site/static/docs/4.3/assets/scss/_nav.scss b/site/static/docs/4.3/assets/scss/_nav.scss
@@ -30,11 +30,30 @@
   }
 }
 
+.bd-search {
+  position: relative; // To contain the Algolia search
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  .form-control:focus {
+    border-color: $bd-purple-bright;
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-900;
+}
+
 .link-dark {
   font-weight: 500;
   color: $dark;
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: $blue;
     text-decoration: none;
   }
@@ -45,11 +64,8 @@
   background-color: $bd-purple-bright;
 
   @include media-breakpoint-down(md) {
-    padding-right: .5rem;
-    padding-left: .5rem;
-
     .navbar-nav-scroll {
-      max-width: 100%;
+      width: 100%;
       height: 2.5rem;
       margin-top: .25rem;
       overflow: hidden;
@@ -70,7 +86,8 @@
       color: $bd-purple-light;
 
       &.active,
-      &:hover {
+      &:hover,
+      &:focus {
         color: $white;
         background-color: transparent;
       }

diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -19,20 +19,6 @@
   }
 }
 
-.bd-search {
-  position: relative; // To contain the Algolia search
-
-  .form-control:focus {
-    border-color: $bd-purple-bright;
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
-}
-
-.bd-search-docs-toggle {
-  line-height: 1;
-  color: $gray-900;
-}
-
 .bd-sidenav {
   display: none;
 }
@@ -45,7 +31,8 @@
 
   > * { pointer-events: none; }
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: rgba(0, 0, 0, .85);
     text-decoration: none;
     background-color: rgba($bd-purple-bright, .1);
@@ -91,15 +78,17 @@
     color: rgba(0, 0, 0, .65);
     @include border-radius(.25rem);
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: rgba(0, 0, 0, .85);
       text-decoration: none;
       background-color: rgba($bd-purple-bright, .1);
     }
   }
 
   > .active > a,
-  > .active:hover > a {
+  > .active:hover > a,
+  > .active:focus > a {
     font-weight: 600;
     color: rgba(0, 0, 0, .85);
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -157,7 +157,6 @@ address { @@
     ol,
     ul {
-      padding-right: 2rem;
       padding-left: 2rem;
     }
@@ Expand Down @@