Docs: various fixes

Mostly links.
Fixes #17056.

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

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
 

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

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**.
 

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

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
 

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).

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
 

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>