Docs: various fixes

Mostly links.
Fixes #17056.

19 files changed, 26 insertions, 22 deletions

diff --git a/docs/browser-bugs.md b/docs/browser-bugs.md
index c41f19825..091dbc438 100644
--- a/docs/browser-bugs.md
+++ b/docs/browser-bugs.md
@@ -6,7 +6,7 @@ group: browser-bugs
 
 Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.
 
-We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs](../getting-started/#support).
+We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs]({{ site.baseurl }}/getting-started/browsers-devices/#supported-browsers).
 
 Also see [jQuery's browser bug workarounds](https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o).
 
diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md
index 87626136a..e2aa98df3 100644
--- a/docs/components/button-dropdown.md
+++ b/docs/components/button-dropdown.md
@@ -9,7 +9,7 @@ Use any button to trigger a dropdown menu by placing it within a `.btn-group` an
 {% callout danger %}
 #### Plugin dependency
 
-Button dropdowns require the [dropdown plugin](../javascript/#dropdowns) to be included in your version of Bootstrap.
+Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap.
 {% endcallout %}
 
 ## Contents
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 12c472b08..5f7886303 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -4,7 +4,7 @@ title: Button group
 group: components
 ---
 
-Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
+Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin).
 
 ## Contents
 
diff --git a/docs/components/card.md b/docs/components/card.md
index fc5032761..d8205d49e 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -293,7 +293,7 @@ Cards include their own variant classes for quickly changing the `background-col
 
 ## Groups
 
-Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode](/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
+Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
 
 {% example html %}
 <div class="card-group">
@@ -328,7 +328,7 @@ Use card groups to render cards as a single, attached element with equal width a
 
 Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
 
-**ProTip!** If you enable [flexbox mode](/layout/flexbox), you can remove the `.card-deck-wrapper`.
+**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
 
 {% example html %}
 <div class="card-deck-wrapper">
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 175927aa8..2f3ba4c83 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -13,7 +13,7 @@ Bootstrap provides several form control styles, layout options, and custom compo
 
 ## Form controls
 
-Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
+Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
 
 Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**.
 
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 80b86c116..1e24baf5b 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -34,7 +34,7 @@ Always try to place a modal's HTML code in a top-level position in your document
 {% callout warning %}
 #### Mobile device caveats
 
-There are some caveats regarding using modals on mobile devices. [See our browser support docs](../getting-started/#support-fixed-position-keyboards) for details.
+There are some caveats regarding using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-navbars-and-virtual-keyboards) for details.
 {% endcallout %}
 
 ### Static example
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 486b59433..bfc5bc499 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -49,7 +49,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 
 ## Tabs
 
-Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](../javascript/tabs).
+Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
 
 {% example html %}
 <ul class="nav nav-tabs">
@@ -112,7 +112,7 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
 
 ## Using dropdowns
 
-Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}javascript/#dropdowns).
+Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
 
 ### Tabs with dropdowns
 
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index da0effbfe..b858069d0 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -16,8 +16,8 @@ Add small overlay content, like those found in iOS, to any element for housing s
 Things to know when using the popover plugin:
 
 
-- Popovers rely on on the 3rd party library [tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
-- Popovers require the [tooltip plugin](/components/tooltips) as a dependency.
+- Popovers rely on the 3rd party library [tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
+- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips) as a dependency.
 - Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
 - Zero-length `title` and `content` values will never show a popover.
 - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 2cec07f90..c2625a04b 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -51,7 +51,7 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
 
 ### Requires Bootstrap nav
 
-Scrollspy currently requires the use of a [Bootstrap nav component](/components/nav/) for proper highlighting of active links.
+Scrollspy currently requires the use of a [Bootstrap nav component]({{ site.baseurl }}/components/nav/) for proper highlighting of active links.
 
 ### Requires relative positioning
 
diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 6365f57f5..1905efefe 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -263,7 +263,11 @@ The `.invisible` class can be used to toggle only the visibility of an element,
 
 ## Screen readers
 
-Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following [accessibility best practices](../getting-started/#accessibility). Can also be used as mixins.
+Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
+
+{% comment %}
+Necessary for following [accessibility best practices](../getting-started/#accessibility).
+{% endcomment %}
 
 {% highlight html %}
 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
diff --git a/docs/content/figures.md b/docs/content/figures.md
index ee7702d26..d8e2435fe 100644
--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -15,7 +15,7 @@ Use the included `.figure` and `.figure-caption` classes to provide some baselin
 </figure>
 {% endexample %}
 
-Aligning the figure's caption is easy with our [text utilities](/components/utilities/#text-alignment).
+Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
 
 {% example html %}
 <figure class="figure">
diff --git a/docs/content/images.md b/docs/content/images.md
index 1b1bbdecc..a72f0041b 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -47,7 +47,7 @@ Add classes to an `<img>` element to easily style images in any project.
 
 ## Aligning images
 
-Align images with the [helper float classes](/components/utilities/#floats) or [text alignment classes](/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
+Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
 
 <div class="bd-example bd-example-images">
   <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index aff43c329..af2eab4a7 100644
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@@ -120,7 +120,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
 
 ## Tables
 
-Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/content/tables/).
+Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
 
 <div class="bd-example">
   <table>
diff --git a/docs/content/typography.md b/docs/content/typography.md
index ada3bc2b6..082a87ec9 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -4,7 +4,7 @@ title: Typography
 group: content
 ---
 
-Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/).
+Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
 
 ## Contents
 
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
index a6b946230..67fc200ec 100644
--- a/docs/getting-started/browsers-devices.md
+++ b/docs/getting-started/browsers-devices.md
@@ -91,7 +91,7 @@ Similarly, the latest versions of most desktop browsers are supported.
 
 Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 8 and below, though they are not officially supported.
 
-For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs](../../browser-bugs/).
+For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
 
 ## Internet Explorer 9
 
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
index 5dc3d5c38..076586d29 100644
--- a/docs/getting-started/download.md
+++ b/docs/getting-started/download.md
@@ -21,7 +21,7 @@ Download just the compiled and minified CSS and JavaScript. Doesn't include any
   <div class="col-sm-6">
 {% markdown %}
 ### Source files
-Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup](../compiling).**
+Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and some setup.**
 
 <a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 {% endmarkdown %}
diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md
index c887fb3fb..f8ab4e8ae 100644
--- a/docs/getting-started/flexbox.md
+++ b/docs/getting-started/flexbox.md
@@ -39,7 +39,7 @@ If you're familiar with modifying variables in Sass—or any other CSS preproces
 2. Change it from `false` to `true`.
 3. Recompile, and done!
 
-Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page](/getting-started/download) for more information.
+Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download) for more information.
 
 ## Browser support
 
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index 05997c47c..1025c334d 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@@ -65,7 +65,7 @@ Put it all together and your pages should look like this:
 </html>
 {% endhighlight %}
 
-That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) or [our official examples](../examples/) to start laying out your site's content and components.
+That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
 
 ## Important globals
 
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index cd848cf98..1c5f18cd0 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -356,7 +356,7 @@ With the four tiers of grids available you're bound to run into issues where, at
 {% endexample %}
 </div>
 
-In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example](../examples/grid/).
+In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example]({{ site.baseurl }}/examples/grid/).
 
 <div class="bd-example-row">
 {% example html %}