diff --git a/assets/scss/_ascii-tree.scss b/assets/scss/_ascii-tree.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3e8fb355ab487b1fd0b7d1be6cf4d82e0a076720
--- /dev/null
+++ b/assets/scss/_ascii-tree.scss
@@ -0,0 +1,40 @@
+// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors
+
+// ASCII tree
+//
+// Styles to allow for traditional ASCII trees to be marked up as semantically meaningful nested lists.
+
+.bd-ascii,
+.bd-ascii ul {
+ padding-left: 0;
+ margin-left: 0;
+ font-family: monospace;
+ list-style: none;
+}
+.bd-ascii li {
+ padding: 0;
+ margin: 0;
+}
+
+/* level 1 */
+.bd-ascii > li::before { content: ""; }
+
+/* level 2 */
+.bd-ascii > li > ul > li::before { content: "├──\00a0"; }
+.bd-ascii > li > ul > li:last-child::before { content: "└──\00a0"; }
+
+/* level 3 */
+.bd-ascii > li > ul > li > ul > li::before { content: "│\00a0\00a0\00a0├──\00a0"; }
+.bd-ascii > li > ul > li > ul > li:last-child::before { content: "│\00a0\00a0\00a0└──\00a0"; }
+.bd-ascii > li > ul > li:last-child > ul > li::before { content: "\00a0\00a0\00a0\00a0├──\00a0"; }
+.bd-ascii > li > ul > li:last-child > ul > li:last-child::before { content: "\00a0\00a0\00a0\00a0└──\00a0"; }
+
+/* level 4 */
+.bd-ascii > li > ul > li > ul > li > ul > li::before { content: "│\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"; }
+.bd-ascii > li > ul > li > ul > li > ul > li:last-child::before { content: "│\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0"; }
+.bd-ascii > li > ul > li > ul > li:last-child > ul > li::before { content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"; }
+.bd-ascii > li > ul > li > ul > li:last-child > ul > li:last-child::before { content: "│\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0"; }
+.bd-ascii > li > ul > li:last-child > ul > li > ul > li::before { content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0├──\00a0"; }
+.bd-ascii > li > ul > li:last-child > ul > li > ul > li:last-child::before { content: "\00a0\00a0\00a0\00a0│\00a0\00a0\00a0└──\00a0"; }
+.bd-ascii > li > ul > li:last-child > ul > li:last-child > ul > li::before { content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0├──\00a0"; }
+.bd-ascii > li > ul > li:last-child > ul > li:last-child > ul > li:last-child::before { content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0└──\00a0"; }
diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss
index 811b39c7480363bd3701b6b217621f045e079e5a..2e91f518b72536a5f32897713ec902125ec5cc6b 100644
--- a/assets/scss/docs.scss
+++ b/assets/scss/docs.scss
@@ -38,6 +38,7 @@
@import "sidebar";
@import "footer";
@import "component-examples";
+@import "ascii-tree";
@import "buttons";
@import "callouts";
@import "examples";
diff --git a/docs/4.0/getting-started/contents.md b/docs/4.0/getting-started/contents.md
index c95549f00c1c6d3e309c30ff833d9dac64cc845a..18cd2afe429223046647066f7cd037288aaf86fb 100644
--- a/docs/4.0/getting-started/contents.md
+++ b/docs/4.0/getting-started/contents.md
@@ -10,29 +10,41 @@ toc: true
Once downloaded, unzip the compressed folder and you'll see something like this:
-<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
-
-{% highlight plaintext %}
-bootstrap/
-├── css/
-│ ├── bootstrap.css
-│ ├── bootstrap.css.map
-│ ├── bootstrap.min.css
-│ ├── bootstrap.min.css.map
-│ ├── bootstrap-grid.css
-│ ├── bootstrap-grid.css.map
-│ ├── bootstrap-grid.min.css
-│ ├── bootstrap-grid.min.css.map
-│ ├── bootstrap-reboot.css
-│ ├── bootstrap-reboot.css.map
-│ ├── bootstrap-reboot.min.css
-│ └── bootstrap-reboot.min.css.map
-└── js/
- ├── bootstrap.bundle.js
- ├── bootstrap.bundle.min.js
- ├── bootstrap.js
- └── bootstrap.min.js
-{% endhighlight %}
+<!-- NOTE: This info is intentionally duplicated in the README. Port any changes made here over to the README too. -->
+
+
+<figure>
+ <ul class="bd-ascii">
+ <li>bootstrap/
+ <ul>
+ <li>css/
+ <ul>
+ <li>bootstrap.css</li>
+ <li>bootstrap.css.map</li>
+ <li>bootstrap.min.css</li>
+ <li>bootstrap.min.css.map</li>
+ <li>bootstrap-grid.css</li>
+ <li>bootstrap-grid.css.map</li>
+ <li>bootstrap-grid.min.css</li>
+ <li>bootstrap-grid.min.css.map</li>
+ <li>bootstrap-reboot.css</li>
+ <li>bootstrap-reboot.css.map</li>
+ <li>bootstrap-reboot.min.css</li>
+ <li>bootstrap-reboot.min.css.map</li>
+ </ul>
+ </li>
+ <li>js/
+ <ul>
+ <li>bootstrap.bundle.js</li>
+ <li>bootstrap.bundle.min.js</li>
+ <li>bootstrap.js</li>
+ <li>bootstrap.min.js</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+</figure>
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/).
@@ -120,15 +132,26 @@ Similarly, we have options for including some or all of our compiled JavaScript.
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
-{% highlight plaintext %}
-bootstrap/
-├── dist/
-│ ├── css/
-│ └── js/
-├── docs/
-│ └── examples/
-├── js/
-└── scss/
-{% endhighlight %}
+<figure>
+ <ul class="bd-ascii">
+ <li>bootstrap/
+ <ul>
+ <li>dist/
+ <ul>
+ <li>css/</li>
+ <li>js/</li>
+ </ul>
+ </li>
+ <li>docs/
+ <ul>
+ <li>examples/</li>
+ </ul>
+ </li>
+ <li>js/</li>
+ <li>scss/</li>
+ </ul>
+ </li>
+ </ul>
+</figure>
The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md
index 33623f4d0a998ac38afbdb2ea09b66362e7d66f9..a079299eed02f47c768476bb3979ff1e3b392ce4 100644
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -21,26 +21,51 @@ Utilize our source Sass files to take advantage of variables, maps, mixins, and
Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
-{% highlight plaintext %}
-your-project/
-├── scss
-│ └── custom.scss
-└── node_modules/
- └── bootstrap
- ├── js
- └── scss
-{% endhighlight %}
+<figure>
+ <ul class="bd-ascii">
+ <li>your-project/
+ <ul>
+ <li>scss
+ <ul>
+ <li>custom.scss</li>
+ </ul>
+ </li>
+ <li>node_modules/
+ <ul>
+ <li>bootstrap
+ <ul>
+ <li>js</li>
+ <li>scss</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+</figure>
If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own.
-{% highlight plaintext %}
-your-project/
-├── scss
-│ └── custom.scss
-└── bootstrap/
- ├── js
- └── scss
-{% endhighlight %}
+<figure>
+ <ul class="bd-ascii">
+ <li>your-project/
+ <ul>
+ <li>scss
+ <ul>
+ <li>custom.scss</li>
+ </ul>
+ </li>
+ <li>bootstrap/
+ <ul>
+ <li>js</li>
+ <li>scss</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+</figure>
In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.