+{{< bootstrapIcons.inline >}}
+{{- range .Site.Data.icons }}
+
+
+## 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 >}}
+
+{{< /example >}}
+
+### External image
+
+Copy the Bootstrap icons SVGs to your directory of choice and reference them like normal images with the `
+
+{{- end }}
+{{< /bootstrapIcons.inline >}}
+
+ 
+
+ {{ humanize .name }}
+ 
+{{< /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,");
+ 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 `stroke-width` lighter or bold. Most Bootstrap icons have a `2px` stroke.
+
+{{< example >}}
+
+
+
+
+
+{{< /example >}}
+
+Color can be changed by setting a `.text-*` class or custom CSS:
+
+{{< example >}}
+
+
+{{< /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.
+
+{{< markdown >}}
+{{< icons.inline >}}
+{{- $type := .Get "type" | default "preferred" -}}
+
+{{- range (index .Site.Data "icon-libraries" $type) }}
+- [{{ .name }}]({{ .website }})
+{{- end }}
+{{< /icons.inline >}}
+{{< /markdown >}}
+
+### More options
+
+While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
+
+{{< markdown >}}
+{{< icons.inline type="more" />}}
+{{< /markdown >}}
diff --git a/site/content/docs/4.3/extend/icons.md b/site/content/docs/4.3/extend/icons.md
deleted file mode 100644
index 1be21c38e827..000000000000
--- a/site/content/docs/4.3/extend/icons.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-layout: docs
-title: Icons
-description: Guidance and suggestions for using external icon libraries with Bootstrap.
-group: extend
----
-
-Bootstrap doesn't include an icon library by default, but we have a handful of recommendations for you to choose from. 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.
-
-{{< markdown >}}
-{{< icons.inline >}}
-{{- $type := .Get "type" | default "preferred" -}}
-
-{{- range (index .Site.Data.icons $type) }}
-- [{{ .name }}]({{ .website }})
-{{- end }}
-{{< /icons.inline >}}
-{{< /markdown >}}
-
-## More options
-
-While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
-
-{{< markdown >}}
-{{< icons.inline type="more" />}}
-{{< /markdown >}}
diff --git a/site/content/docs/4.3/extend/approach.md b/site/content/docs/4.3/getting-started/approach.md
similarity index 99%
rename from site/content/docs/4.3/extend/approach.md
rename to site/content/docs/4.3/getting-started/approach.md
index 3c4d1dae8474..91227186e59e 100644
--- a/site/content/docs/4.3/extend/approach.md
+++ b/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/"
---
diff --git a/site/data/icon-libraries.yml b/site/data/icon-libraries.yml
new file mode 100644
index 000000000000..bdda9e4dc994
--- /dev/null
+++ b/site/data/icon-libraries.yml
@@ -0,0 +1,23 @@
+preferred:
+ - name: Font Awesome
+ website: https://fontawesome.com/
+ - name: Feather
+ website: https://feathericons.com/
+ - name: Octicons
+ website: https://octicons.github.com/
+
+more:
+ - name: Bytesize
+ website: https://github.com/danklammer/bytesize-icons
+ - name: Google Material icons
+ website: https://material.io/tools/icons/
+ - name: Ionicons
+ website: https://ionicons.com/
+ - name: Dripicons
+ website: http://demo.amitjakhu.com/dripicons/
+ - name: Ikons
+ website: http://ikons.piotrkwiatkowski.co.uk/
+ - name: Icons8
+ website: https://icons8.com/
+ - name: icofont
+ website: https://icofont.com/
diff --git a/site/data/icons.yml b/site/data/icons.yml
index bdda9e4dc994..45641b985cd1 100644
--- a/site/data/icons.yml
+++ b/site/data/icons.yml
@@ -1,23 +1,97 @@
-preferred:
- - name: Font Awesome
- website: https://fontawesome.com/
- - name: Feather
- website: https://feathericons.com/
- - name: Octicons
- website: https://octicons.github.com/
-
-more:
- - name: Bytesize
- website: https://github.com/danklammer/bytesize-icons
- - name: Google Material icons
- website: https://material.io/tools/icons/
- - name: Ionicons
- website: https://ionicons.com/
- - name: Dripicons
- website: http://demo.amitjakhu.com/dripicons/
- - name: Ikons
- website: http://ikons.piotrkwiatkowski.co.uk/
- - name: Icons8
- website: https://icons8.com/
- - name: icofont
- website: https://icofont.com/
+- name: bootstrap
+- name: bootstrap-fill
+- name: reboot
+
+- name: x
+- name: check
+- name: dash
+- name: plus
+- name: dot
+- name: circle
+- name: warning
+
+- name: arrow-up
+- name: arrow-down
+- name: arrow-left
+- name: arrow-right
+- name: arrow-left-right
+- name: arrow-up-down
+- name: arrow-clockwise
+- name: arrow-counter-clockwise
+- name: arrow-repeat
+- name: resize
+- name: fullscreen
+- name: move
+
+- name: chevron-up
+- name: chevron-down
+- name: chevron-left
+- name: chevron-right
+- name: chevron-compact-left
+- name: chevron-compact-right
+
+- name: circle-slash
+- name: code
+- name: credit-card
+- name: diff
+- name: ellipsis
+- name: envelope
+- name: calendar
+- name: image
+
+- name: clock-fill
+- name: clock
+- name: gear-fill
+- name: gear
+- name: heart-filled
+- name: heart-outline
+- name: house-fill
+- name: house
+- name: bookmark-fill
+- name: bookmark
+- name: lock-fill
+- name: lock
+- name: unlock-fill
+- name: unlock
+- name: star-filled
+- name: star-outline
+- name: terminal-fill
+- name: terminal
+
+- name: bold
+- name: italic
+- name: underline
+- name: type
+- name: text-center
+- name: text-indent
+- name: text-left
+- name: text-right
+- name: justify-left
+- name: justify-right
+- name: justify
+- name: list-numbered
+- name: list-unordered
+- name: list
+
+- name: play-fill
+- name: play
+- name: pause-fill
+- name: pause
+- name: stop-fill
+- name: stop
+- name: skip-backward-fill
+- name: skip-backward
+- name: skip-end-fill
+- name: skip-end
+- name: skip-forward-fill
+- name: skip-forward
+- name: skip-start-fill
+- name: skip-start
+
+- name: person
+- name: people
+- name: search
+- name: display
+- name: tv
+- name: tag
+- name: wifi
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 205b95d7a35b..cf7b1c019c19 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -10,6 +10,7 @@
# - title: Best practices # TODO: Write this content
- title: Webpack
- title: Accessibility
+ - title: Approach
- title: Layout
pages:
@@ -90,11 +91,6 @@
- title: Vertical align
- title: Visibility
-- title: Extend
- pages:
- - title: Approach
- - title: Icons
-
- title: About
pages:
- title: Overview
diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss
index 41aa04fb7156..b0c7458e743c 100644
--- a/site/static/docs/4.3/assets/scss/_component-examples.scss
+++ b/site/static/docs/4.3/assets/scss/_component-examples.scss
@@ -313,3 +313,20 @@
color: $gray-900; // Effectively the base text color
}
}
+
+.bd-bi-grid > * {
+ flex: 0 0 calc(100% / 3);
+ @include font-size(.8125rem);
+
+ @include media-breakpoint-up(sm) {
+ flex: 0 0 calc(100% / 4);
+ }
+
+ @include media-breakpoint-up(lg) {
+ flex: 0 0 calc(100% / 5);
+ }
+
+ @include media-breakpoint-up(xl) {
+ flex: 0 0 calc(100% / 6);
+ }
+}
diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss
index b82107ee97e7..7dabb9d50604 100644
--- a/site/static/docs/4.3/assets/scss/_subnav.scss
+++ b/site/static/docs/4.3/assets/scss/_subnav.scss
@@ -3,7 +3,7 @@
backdrop-filter: blur(1rem);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
- .booticon {
+ .bi {
opacity: .25;
}
diff --git a/site/static/docs/4.3/assets/scss/docs.scss b/site/static/docs/4.3/assets/scss/docs.scss
index e811b0a0e3ff..348672ce28c7 100644
--- a/site/static/docs/4.3/assets/scss/docs.scss
+++ b/site/static/docs/4.3/assets/scss/docs.scss
@@ -52,17 +52,3 @@
@import "syntax";
@import "anchor";
@import "algolia";
-
-// Temp
-.booticons-list {
- .booticon {
- display: inline;
- width: 4rem;
- padding: 1rem;
- margin-right: 1rem;
- margin-bottom: 1rem;
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, .1);
- @include border-radius(.25rem);
- }
-}