v5 Docs followup

scss/_icons.scss

@@ -0,0 +1,13 @@
+.bi {
+  display: inline-block;
+  vertical-align: text-top;
+  fill: currentColor;
+}
+
+.bi-light path {
+  stroke-width: 1px;
+}
+
+.bi-bold path {
+  stroke-width: 3px;
+}

scss/_reboot.scss

@@ -157,7 +157,6 @@ address {
 
 ol,
 ul {
-  padding-right: 2rem;
   padding-left: 2rem;
 }
 

scss/_variables.scss

@@ -1070,10 +1070,10 @@ $carousel-indicator-transition:      opacity .6s ease !default;
 $carousel-caption-width:             70% !default;
 $carousel-caption-color:             $white !default;
 
-$carousel-control-icon-width:        20px !default;
+$carousel-control-icon-width:        32px !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path stroke='#{$carousel-control-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' d='M11 4l-3 6 3 6'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path stroke='#{$carousel-control-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' d='M9 16l3-6-3-6'/></svg>") !default;
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

scss/bootstrap.scss

@@ -43,6 +43,7 @@
 @import "popover";
 @import "carousel";
 @import "spinners";
+@import "icons";
 
 
 // Helpers

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>

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>

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>

site/content/docs/4.3/components/icons.md

@@ -1,21 +1,133 @@
 ---
 layout: docs
 title: Icons
-description: Custom icons for Bootstrap components.
+description: For the first time ever, Bootstrap features its own icon library, custom designed and built for our components and documentation.
 group: components
 toc: true
 ---
 
-<div class="booticons-list">
-<svg class="booticon booticon-chevron-left" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M11 2L5 8l6 6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-chevron-right" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-chevron-up" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M2 11l6-6 6 6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-chevron-down" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M2 5l6 6 6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-chevron-condensed-left" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M9 2L6 8l3 6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-chevron-condensed-right" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M7 14l3-6-3-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-check" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M4 8.5L6.5 11l6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-x" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 8l-3 3 3-3 3 3-3-3zm0 0l3-3-3 3-3-3 3 3z" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-dash" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 8h6" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
-<svg class="booticon booticon-circle" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm0-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="currentColor" fill-rule="nonzero"/></svg>
-<svg class="booticon booticon-dot" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 8v.082" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
+## Bootstrap icons
+
+Meet the Bootstrap icons, a limited set of icons designed first and foremost to work with Bootstrap's components. From form controls to navigation, these icons are the perfect complement to our toolkit. They're SVGs, so they'll scale quickly and easily to any size, they can be easily recolored with CSS, and more. They're also included in Bootstrap under the MIT license.
+
+<div class="bd-bi-grid d-flex flex-wrap mb-5">
+  {{< listIcons.inline >}}
+  {{- $dirName := printf "site/content/docs/%s/icons/" .Site.Params.docs_version -}}
+
+  {{- range (readDir $dirName) -}}
+    {{- $filenameWithExt := split .Name "." -}}
+    {{- $filename := index $filenameWithExt 0 -}}
+    {{- $name := humanize $filename -}}
+    <div class="p-3 mr-2 mb-2 border rounded">
+      {{ readFile (printf "%s%s" $dirName .Name) }}
+    </div>
+  {{ end -}}
+  {{< /listIcons.inline >}}
+</div>
+
+<table class="table bd-bi-table">
+  <thead class="text-left">
+    <tr>
+      <th>Name</th>
+      <th>Icon</th>
+      <th>Class</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{< listIcons.inline >}}
+    {{- $dirName := printf "site/content/docs/%s/icons/" .Site.Params.docs_version -}}
+
+    {{- range (readDir $dirName) -}}
+      {{- $filenameWithExt := split .Name "." -}}
+      {{- $filename := index $filenameWithExt 0 -}}
+      {{- $name := humanize $filename -}}
+        <tr>
+          <td>{{ $name }}</td>
+          <td>{{ readFile (printf "%s%s" $dirName .Name) }}</td>
+          <td>
+            <code>.bi-{{ $filename }}</code>
+          </td>
+        </tr>
+    {{ end -}}
+    {{< /listIcons.inline >}}
+  </tbody>
+</table>
+
+## How to use
+
+Bootstrap icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup.
+
+### Embedded
+
+For example, you can use the SVG as HTML (remember to specify a `width` and `height`).
+
+{{< example >}}
+<svg class="bi bi-chevron-right" width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l6-6-6-6"/></svg>
+{{< /example >}}
+
+### External image
+
+Copy the Bootstrap icons SVGs to your directory of choice and reference them like normal images with the `<img>` element.
+
+{{< highlight html >}}
+<img src="assets/images/bi-bootstrap.svg" width="24" height="24" title="Bootstrap">
+{{< /highlight >}}
+
+### CSS
+
+You can also use the SVG within your CSS (**be sure to escape any characters**, such as `#` to `%23` when specifying hex color values):
+
+{{< highlight css >}}
+.bi::before {
+  display: inline-block;
+  content: "";
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
+  background-repeat: no-repeat;
+  background-size: 1rem 1rem;
+}
+{{< /highlight >}}
+
+### Customizing
+
+Depending on the icon, you may add `.bi-light` (`1px`) or `.bi-bold` (`3px`) to make an icon's `stoke-width` lighter or bold. Most Bootstrap icons have a `2px` stroke.
+
+{{< example >}}
+<svg class="bi bi-resize bi-light" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M11.5 8.5L15 5l-3.5 3.5zM12 4h4-4zm4 4V4v4zm-7.5 3.5L5 15l3.5-3.5zM8 16H4h4zm-4-4v4-4z"></path></svg>
+
+<svg class="bi bi-resize" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M11.5 8.5L15 5l-3.5 3.5zM12 4h4-4zm4 4V4v4zm-7.5 3.5L5 15l3.5-3.5zM8 16H4h4zm-4-4v4-4z"></path></svg>
+
+<svg class="bi bi-resize bi-bold" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M11.5 8.5L15 5l-3.5 3.5zM12 4h4-4zm4 4V4v4zm-7.5 3.5L5 15l3.5-3.5zM8 16H4h4zm-4-4v4-4z"></path></svg>
+{{< /example >}}
+
+Color can be changed by setting a `.text-*` class or custom CSS:
+
+{{< example >}}
+<div class="text-success">
+  <svg class="bi bi-resize" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M11.5 8.5L15 5l-3.5 3.5zM12 4h4-4zm4 4V4v4zm-7.5 3.5L5 15l3.5-3.5zM8 16H4h4zm-4-4v4-4z"></path></svg>
 </div>
+{{< /example >}}
+
+## Additional libraries
+
+Need or want something else? Check out these recommended icon libraries. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
+
+### Preferred
+
+We've tested and used these icon sets ourselves.
+
+- [Font Awesome](https://fontawesome.com/)
+- [Feather](https://feathericons.com/)
+- [Octicons](https://octicons.github.com/)
+
+### More options
+
+While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
+
+- [Bytesize](https://github.com/danklammer/bytesize-icons)
+- [Google Material icons](https://material.io/tools/icons/)
+- [Ionicons](https://ionicons.com/)
+- [Dripicons](http://demo.amitjakhu.com/dripicons/)
+- [Ikons](http://ikons.piotrkwiatkowski.co.uk/)
+- [Glyph](https://glyph.smarticons.co/)
+- [Icons8](https://icons8.com/)
+- [icofont](https://icofont.com/)

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 >}}

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>

site/content/docs/4.3/extend/approach.md → site/content/docs/4.3/getting-started/approach.md

@@ -2,7 +2,7 @@
 layout: docs
 title: Approach
 description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
-group: extend
+group: getting-started
 aliases:
   - "/docs/4.3/extend/"
 ---