This allows for the build to fail if a reference isn't found.
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](/docs/{{< param docs_version >}}/getting-started/browsers-devices/#supported-browsers).
+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]({{< docsref "/getting-started/browsers-devices#supported-browsers" >}}).
See also:
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
-- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util). The compiled version includes this.
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}). The compiled version includes this.
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
## Basic example
-Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](/docs/{{< param docs_version >}}/components/buttons/#button-plugin).
+Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{< docsref "/components/buttons#button-plugin" >}}).
{{< example >}}
<div class="btn-group" role="group" aria-label="Basic example">
## Example
-Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/) as needed.
+Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
### Using utilities
-Use our handful of [available sizing utilities](/docs/{{< param docs_version >}}/utilities/sizing/) to quickly set a card's width.
+Use our handful of [available sizing utilities]({{< docsref "/utilities/sizing" >}}) to quickly set a card's width.
{{< example >}}
<div class="card w-75">
## Text alignment
-You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes](/docs/{{< param docs_version >}}/utilities/text/#text-alignment).
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}).
{{< example >}}
<div class="card" style="width: 18rem;">
## Navigation
-Add some navigation to a card's header (or block) with Bootstrap's [nav components](/docs/{{< param docs_version >}}/components/navs/).
+Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{< docsref "/components/navs" >}}).
{{< example >}}
<div class="card text-center">
### Background and color
-Use [text and background utilities](/docs/{{< param docs_version >}}/utilities/colors/) to change the appearance of a card.
+Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to change the appearance of a card.
{{< example >}}
{{< card.inline >}}
### Border
-Use [border utilities](/docs/{{< param docs_version >}}/utilities/borders/) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
+Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
{{< example >}}
{{< card.inline >}}
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
-Lastly, if you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
+Lastly, if you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
## Example
### With captions
-Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities](/docs/{{< param docs_version >}}/utilities/display/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
+Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
{{< example >}}
<div class="bd-example">
## Accordion example
-Using the [card](/docs/{{< param docs_version >}}/components/card/) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper.
+Using the [card]({{< docsref "/components/card" >}}) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper.
{{< example >}}
<div class="accordion" id="accordionExample">
Dropdowns are built on a third party library, [Popper.js](https://popper.js.org/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.
-If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
+If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
## Accessibility
### Text
-Place any freeform text within a dropdown menu with text and use [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width.
+Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
{{< example >}}
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
### Forms
-Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities](/docs/{{< param docs_version >}}/utilities/spacing/) to give it the negative space you require.
+Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{< docsref "/utilities/spacing" >}}) to give it the negative space you require.
{{< example >}}
<div class="dropdown-menu">
## Overview
-Bootstrap's form controls expand on [our Rebooted form styles](/docs/{{< param docs_version >}}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
+Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/content/reboot#forms" >}}) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
-- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) and [flexbox](/docs/{{< param docs_version >}}/utilities/flex/) utilities.
+- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{< docsref "/utilities/spacing" >}}) and [flexbox]({{< docsref "/utilities/flex" >}}) utilities.
- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
-You may need to manually address the width and alignment of individual form controls with [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
+You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{< docsref "/utilities/spacing" >}}) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
{{< example >}}
<form class="form-inline">
## With badges
-Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities](/docs/{{< param docs_version >}}/utilities/flex/).
+Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{< docsref "/utilities/flex" >}}).
{{< example >}}
<ul class="list-group">
## Custom content
-Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/).
+Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
{{< example >}}
<div class="list-group">
The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox.
-Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/).
+Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{< docsref "/utilities/spacing" >}}).
{{< example >}}
<div class="media">
- Clicking on the modal "backdrop" will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
-- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs](/docs/{{< param docs_version >}}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
+- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details.
- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
{{< highlight js >}}
### Tooltips and popovers
-[Tooltips](/docs/{{< param docs_version >}}/components/tooltips/) and [popovers](/docs/{{< param docs_version >}}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
+[Tooltips]({{< docsref "/components/tooltips" >}}) and [popovers]({{< docsref "/components/popovers" >}}) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
<div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
-- Use our [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) and [flex](/docs/{{< param docs_version >}}/utilities/flex/) utility classes for controlling spacing and alignment within navbars.
+- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
-- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display](/docs/{{< param docs_version >}}/utilities/display/) utility class.
+- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `.navbar`. See the [display]({{< docsref "/utilities/display" >}}) utility class.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
{{< callout info >}}
</nav>
{{< /example >}}
-This example uses [color](/docs/{{< param docs_version >}}/utilities/colors/) (`bg-light`) and [spacing](/docs/{{< param docs_version >}}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
+This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
### Brand
</nav>
{{< /example >}}
-Immediate children elements in `.navbar` use flex layout and will default to `justify-content: between`. Use additional [flex utilities](/docs/{{< param docs_version >}}/utilities/flex/) as needed to adjust this behavior.
+Immediate children elements in `.navbar` use flex layout and will default to `justify-content: between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
<nav class="navbar navbar-light bg-light">
## Placement
-Use our [position utilities](/docs/{{< param docs_version >}}/utilities/position/) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
+Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**.
### Horizontal alignment
-Change the horizontal alignment of your nav with [flexbox utilities](/docs/{{< param docs_version >}}/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with `.justify-content-center`:
{{< /example >}}
## Working with flex utilities
-If you need responsive nav variations, consider using a series of [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+If you need responsive nav variations, consider using a series of [flexbox utilities]({{< docsref "/utilities/flex" >}}). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
{{< example >}}
<nav class="nav nav-pills flex-column flex-sm-row">
## Using dropdowns
-Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin](/docs/{{< param docs_version >}}/components/dropdowns/#usage).
+Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{< docsref "/components/dropdowns#usage" >}}).
### Tabs with dropdowns
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
-If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
+If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
## Alignment
-Change the alignment of pagination components with [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/).
+Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}).
{{< example >}}
<nav aria-label="Page navigation example">
Things to know when using the popover plugin:
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
-- Popovers require the [tooltip plugin](/docs/{{< param docs_version >}}/components/tooltips/) as a dependency.
-- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
+- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) as a dependency.
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
- 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).
<tr>
<td>whiteList</td>
<td>object</td>
- <td><a href="/docs/{{< param docs_version >}}/getting-started/javascript/#sanitizer">Default value</a></td>
+ <td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
<td>Object which contains allowed attributes and tags</td>
</tr>
<tr>
</div>
{{< /example >}}
-Bootstrap provides a handful of [utilities for setting width](/docs/{{< param docs_version >}}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
+Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
{{< example >}}
<div class="progress">
Scrollspy has a few requirements to function properly:
-- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
-- It must be used on a Bootstrap [nav component](/docs/{{< param docs_version >}}/components/navs/) or [list group](/docs/{{< param docs_version >}}/components/list-group/).
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
+- It must be used on a Bootstrap [nav component]({{< docsref "/components/navs" >}}) or [list group]({{< docsref "/components/list-group" >}}).
- Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`.
- When spying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
- Anchors (`<a>`) are required and must point to an element with that `id`.
{{< /example >}}
-[color]: /docs/{{< param docs_version >}}/utilities/colors/
-[display]: /docs/{{< param docs_version >}}/utilities/display/
-[flex]: /docs/{{< param docs_version >}}/utilities/flex/
-[float]: /docs/{{< param docs_version >}}/utilities/float/
-[margin]: /docs/{{< param docs_version >}}/utilities/spacing/
-[sizing]: /docs/{{< param docs_version >}}/utilities/sizing/
-[text]: /docs/{{< param docs_version >}}/content/typography/
+[color]: {{< docsref "/utilities/colors" >}}
+[display]: {{< docsref "/utilities/display" >}}
+[flex]: {{< docsref "/utilities/flex" >}}
+[float]: {{< docsref "/utilities/float" >}}
+[margin]: {{< docsref "/utilities/spacing" >}}
+[sizing]: {{< docsref "/utilities/sizing" >}}
+[text]: {{< docsref "/content/typography" >}}
Things to know when using the toast plugin:
-- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
- **Please note that you are responsible for positioning toasts.**
- Toasts will automatically hide if you do not specify `autohide: false`.
## Accessibility
-Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component](/docs/{{< param docs_version >}}/components/alerts/) instead of toast.
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
Things to know when using the tooltip plugin:
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
-- If you're building our JavaScript from source, it [requires `util.js`](/docs/{{< param docs_version >}}/getting-started/javascript/#util).
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
<tr>
<td>whiteList</td>
<td>object</td>
- <td><a href="/docs/{{< param docs_version >}}/getting-started/javascript/#sanitizer">Default value</a></td>
+ <td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td>
<td>Object which contains allowed attributes and tags</td>
</tr>
<tr>
</figure>
{{< /example >}}
-Aligning the figure's caption is easy with our [text utilities](/docs/{{< param docs_version >}}/utilities/text/#text-alignment).
+Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
{{< example >}}
<figure class="figure">
## Image thumbnails
-In addition to our [border-radius utilities](/docs/{{< param docs_version >}}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
<div class="bd-example bd-example-images">
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
## Aligning images
-Align images with the [helper float classes](/docs/{{< param docs_version >}}/utilities/float/) or [text alignment classes](/docs/{{< param docs_version >}}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class](/docs/{{< param docs_version >}}/utilities/spacing/#horizontal-centering).
+Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
<div class="bd-example bd-example-images">
{{< placeholder width="200" height="200" class="rounded float-left" >}}
## Tables
-Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/docs/{{< param docs_version >}}/content/tables/).
+Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
<div class="bd-example">
<table>
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{{< /callout >}}
-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](/docs/{{< param docs_version >}}/utilities/visibility/) instead.
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
</tr>
{{< /highlight >}}
-Regular table background variants are not available with the dark table, however, you may use [text or background utilities](/docs/{{< param docs_version >}}/utilities/colors/) to achieve similar styles.
+Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{< docsref "/utilities/colors" >}}) to achieve similar styles.
<div class="bd-example">
<table class="table table-dark">
## Global settings
-Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes](/docs/{{< param docs_version >}}/utilities/text/).
+Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
-- Use a [native font stack](/docs/{{< param docs_version >}}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
+- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
- For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
- Set the global link color via `$link-color` and apply link underlines only on `:hover`.
## Text utilities
-Change text alignment, transform, style, weight, and color with our [text utilities](/docs/{{< param docs_version >}}/utilities/text/) and [color utilities](/docs/{{< param docs_version >}}/utilities/colors/).
+Change text alignment, transform, style, weight, and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
## Abbreviations
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
- <p>New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="/docs/{{< param docs_version >}}/getting-started/introduction/">getting started guide</a>.</p>
+ <p>New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
</div>
</footer>
<div class="jumbotron mt-3">
<h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
- <a class="btn btn-lg btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs »</a>
+ <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
- <a class="btn btn-lg btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs »</a>
+ <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
</div>
</main>
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
- <a class="btn btn-lg btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs »</a>
+ <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
</div>
</main>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
- <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="/docs/{{< param docs_version >}}/examples/navbar-static/">top</a> and <a href="/docs/{{< param docs_version >}}/examples/navbar-fixed/">fixed top</a> examples.</p>
+ <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
- <a class="btn btn-primary" href="/docs/{{< param docs_version >}}/components/navbar/" role="button">View navbar docs »</a>
+ <a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a>
</p>
</div>
</div>
<div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main > .container</code>.</p>
- <p>Back to <a href="/docs/{{< param docs_version >}}/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
+ <p>Back to <a href="{{< docsref "/examples/sticky-footer" >}}">the default sticky footer</a> minus the navbar.</p>
</div>
</main>
<div class="container">
<h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
- <p>Use <a href="/docs/{{< param docs_version >}}/examples/sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
+ <p>Use <a href="{{< docsref "/examples/sticky-footer-navbar" >}}">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</main>
Each overlay component increases it's `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal's action), so we put that above our navbars.
-Learn more about this in our [`z-index` layout page](/docs/{{< param docs_version >}}/layout/overview/#z-index).
+Learn more about this in our [`z-index` layout page]({{< docsref "/layout/overview#z-index" >}}).
## HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
-This principle is our first-class JavaScript API is `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page](/docs/{{< param docs_version >}}/getting-started/javascript/#data-attributes).
+This principle is our first-class JavaScript API is `data` attributes. You don't need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]({{< docsref "/getting-started/javascript#data-attributes" >}}).
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s.
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, 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](/docs/{{< param docs_version >}}/browser-bugs/).
+For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{< docsref "/browser-bugs" >}}).
## Internet Explorer
-Internet Explorer 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page](/docs/{{< param docs_version >}}/getting-started/javascript/#compatibility-with-ie-11). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
+Internet Explorer 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page]({{< docsref "/getting-started/javascript#compatibility-with-ie-11" >}}). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
## Modals and dropdowns on mobile
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
</th>
- <td><a class="text-warning" href="/docs/{{< param docs_version >}}/layout/grid/">Only grid system</a></td>
+ <td><a class="text-warning" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
- <td><a class="text-warning" href="/docs/{{< param docs_version >}}/utilities/flex/">Only flex utilities</a></td>
+ <td><a class="text-warning" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
</th>
<td class="bg-light text-muted">Not included</td>
- <td><a class="text-warning" href="/docs/{{< param docs_version >}}/content/reboot/">Only Reboot</a></td>
+ <td><a class="text-warning" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
Download ready-to-use compiled code for **Bootstrap v{{< param current_version >}}** to easily drop into your project, which includes:
-- Compiled and minified CSS bundles (see [CSS files comparison](/docs/{{< param docs_version >}}/getting-started/contents/#css-files))
+- Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}}))
- Compiled and minified JavaScript plugins
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
-Should you require [build tools](/docs/{{< param docs_version >}}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
+Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
<a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
## Quick start
-Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page](/docs/{{< param docs_version >}}/getting-started/download/).
+Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
### CSS
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
{{< /highlight >}}
-If you use `<script type="module">`, please refer to our [using Bootstrap as a module](/docs/{{< param docs_version >}}/getting-started/javascript/#using-bootstrap-as-a-module) section.
+If you use `<script type="module">`, please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
-Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents](/docs/{{< param docs_version >}}/getting-started/contents/#precompiled-bootstrap) section.
+Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
{{< partial "getting-started/components-requiring-javascript" >}}
</html>
{{< /highlight >}}
-That's all you need for overall page requirements. Visit the [Layout docs](/docs/{{< param docs_version >}}/layout/overview/) or [our official examples](/docs/{{< param docs_version >}}/examples/) to start laying out your site's content and components.
+That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/overview" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
## Important globals
### Reboot
-For improved cross-browser rendering, we use [Reboot](/docs/{{< param docs_version >}}/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
+For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/reboot" >}}) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
## Community
| Variable | Values | Description |
| -------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/docs/{{< param docs_version >}}/utilities/spacing/). |
+| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
-| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query](/docs/{{< param docs_version >}}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
+| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
| `$enable-hover-media-query` | `true` or `false` (default) | **Deprecated** |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
-| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes](/docs/{{< param docs_version >}}/content/typography/#responsive-font-sizes). |
+| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes]({{< docsref "/content/typography#responsive-font-sizes" >}}). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
.beta { color: color("purple"); }
{{< /highlight >}}
-[Color utility classes](/docs/{{< param docs_version >}}/utilities/colors/) are also available for setting `color` and `background-color`.
+[Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color`.
{{< callout info >}}
In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below.
## Installing Bootstrap
-[Install bootstrap](/docs/{{< param docs_version >}}/getting-started/download/#npm) as a Node.js module using npm.
+[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
## Importing JavaScript
-Import [Bootstrap's JavaScript](/docs/{{< param docs_version >}}/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`):
+Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
{{< highlight js >}}
import 'bootstrap';
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
-First, create your own `_custom.scss` and use it to override the [built-in custom variables](/docs/{{< param docs_version >}}/getting-started/theming/). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
+First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{< docsref "/getting-started/theming" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
{{< highlight scss >}}
@import "custom";
- Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use `.col-4`.
- Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element.
- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`.
-- To make the grid responsive, there are five grid breakpoints, one for each [responsive breakpoint](/docs/{{< param docs_version >}}/layout/overview/#responsive-breakpoints): all breakpoints (extra small), small, medium, large, and extra large.
+- To make the grid responsive, there are five grid breakpoints, one for each [responsive breakpoint]({{< docsref "/layout/overview#responsive-breakpoints" >}}): all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one breakpoint and all those above it** (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices, but not the first `xs` breakpoint).
- You can use predefined grid classes (like `.col-4`) or [Sass mixins](#sass-mixins) for more semantic markup.
### Equal-width multi-row
-Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities](/docs/{{< param docs_version >}}/utilities/display/).
+Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}).
<div class="bd-example-row">
{{< example >}}
The gutters between columns in our predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
-Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/).
+Here's the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{< docsref "/utilities/spacing" >}}).
**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid`.
{{< /example >}}
</div>
-You may also apply this break at specific breakpoints with our [responsive display utilities](/docs/{{< param docs_version >}}/utilities/display/).
+You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).
<div class="bd-example-row">
{{< example >}}
### Offsetting columns
-You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities](/docs/{{< param docs_version >}}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
+You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
#### Offset classes
{{< /example >}}
</div>
-In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example](/docs/{{< param docs_version >}}/examples/grid/).
+In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
<div class="bd-example-row">
{{< example >}}
## Changing `display`
-Use our [display utilities](/docs/{{< param docs_version >}}/utilities/display/) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
+Use our [display utilities]({{< docsref "/utilities/display" >}}) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
## Flexbox options
-Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components](/docs/{{< param docs_version >}}/components/alerts/) are built with flexbox enabled.
+Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components]({{< docsref "/components/alerts" >}}) are built with flexbox enabled.
-Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/) for sizing, alignment, spacing, and more.
+Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more.
## Margin and padding
-Use the `margin` and `padding` [spacing utilities](/docs/{{< param docs_version >}}/utilities/spacing/) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
+Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
## Toggle `visibility`
-When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities](/docs/{{< param docs_version >}}/utilities/visibility/). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
+When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{< docsref "/utilities/visibility" >}}). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
### Components
-- **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards](/docs/{{< param docs_version >}}/components/card/).
+- **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards]({{< docsref "/components/card" >}}).
- **Dropped the Glyphicons icon font.** If you need icons, some options are:
- the upstream version of [Glyphicons](https://www.glyphicons.com/)
- [Octicons](https://octicons.github.com/)
- [Font Awesome](https://fontawesome.com/)
- - See the [Extend page](/docs/{{< param docs_version >}}/extend/icons/) for a list of alternatives. Have additional suggestions? Please open an issue or PR.
+ - See the [Extend page]({{< docsref "/extend/icons" >}}) for a list of alternatives. Have additional suggestions? Please open an issue or PR.
- **Dropped the Affix jQuery plugin.**
- We recommend using `position: sticky` instead. [See the HTML5 Please entry](https://html5please.com/#sticky) for details and specific polyfill recommendations. One suggestion is to use an `@supports` rule for implementing it (e.g., `@supports (position: sticky) { ... }`)
- If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library.
### Reboot
-New to Bootstrap 4 is the [Reboot](/docs/{{< param docs_version >}}/content/reboot/), a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border-box` change, moving from `em` to `rem` units on many elements, link styles, and many form element resets.
+New to Bootstrap 4 is the [Reboot]({{< docsref "/content/reboot" >}}), a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border-box` change, moving from `em` to `rem` units on many elements, link styles, and many form element resets.
### Typography
- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
- `.navbar-default` is now `.navbar-light`, though `.navbar-dark` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentially only affect `color`.
-- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization](/docs/{{< param docs_version >}}/components/navbar/#color-schemes).
+- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{< docsref "/components/navbar#color-schemes" >}}).
- Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
- `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s).
- Dropped the `.navbar-form` class entirely. It's no longer necessary; instead, just use `.form-inline` and apply margin utilities as necessary.
- `.panel-default` removed and no replacement.
- `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
- `.panel-heading` to `.card-header`
-- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes](/docs/{{< param docs_version >}}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`](/docs/{{< param docs_version >}}/utilities/text/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
+- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{< docsref "/content/typography#headings" >}}) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{< docsref "/utilities/text#font-weight-and-italics" >}})). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
- `.panel-body` to `.card-body`
- `.panel-footer` to `.card-footer`
- `.panel-primary`, `.panel-success`, `.panel-info`, `.panel-warning`, and `.panel-danger` have been dropped for `.bg-`, `.text-`, and `.border` utilities generated from our `$theme-colors` Sass map.
- **Display, hidden, and more:**
- Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`).
- - Dropped the bulk of `.hidden-*` utilities for new [display utilities](/docs/{{< param docs_version >}}/utilities/display/). For example, instead of `.hidden-sm-up`, use `.d-sm-none`. Renamed the `.hidden-print` utilities to use the display utility naming scheme. More info under the [Responsive utilities](#responsive-utilities) section of this page.
+ - Dropped the bulk of `.hidden-*` utilities for new [display utilities]({{< docsref "/utilities/display" >}}). For example, instead of `.hidden-sm-up`, use `.d-sm-none`. Renamed the `.hidden-print` utilities to use the display utility naming scheme. More info under the [Responsive utilities](#responsive-utilities) section of this page.
- Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-right`.
- **Type:**
- Added responsive variations to our text alignment classes `.text-{sm,md,lg,xl}-{left,center,right}`.
- **Alignment and spacing:**
- - Added new [responsive margin and padding utilities](/docs/{{< param docs_version >}}/utilities/spacing/) for all sides, plus vertical and horizontal shorthands.
- - Added boatload of [flexbox utilities](/docs/{{< param docs_version >}}/utilities/flex/).
+ - Added new [responsive margin and padding utilities]({{< docsref "/utilities/spacing" >}}) for all sides, plus vertical and horizontal shorthands.
+ - Added boatload of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
- Dropped `.center-block` for the new `.mx-auto` class.
- Clearfix updated to drop support for older browser versions.
Our documentation received an upgrade across the board as well. Here's the low down:
- We're still using Jekyll, but we have plugins in the mix:
- - `bugify.rb` is used to efficiently list out the entries on our [browser bugs](/docs/{{< param docs_version >}}/browser-bugs/) page.
+ - `bugify.rb` is used to efficiently list out the entries on our [browser bugs]({{< docsref "/browser-bugs" >}}) page.
- `example.rb` is a custom fork of the default `highlight.rb` plugin, allowing for easier example-code handling.
- `callout.rb` is a similar custom fork of that, but designed for our special docs callouts.
- [jekyll-toc](https://github.com/toshimaru/jekyll-toc) is used to generate our table of contents.
## Background gradient
-When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options](/docs/{{< param docs_version >}}/getting-started/theming/#sass-options) to enable these classes and more.
+When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/getting-started/theming#sass-options" >}}) to enable these classes and more.
{{< markdown >}}
{{< colors.inline >}}
## Notation
-Display utility classes that apply to all [breakpoints](/docs/{{< param docs_version >}}/layout/overview/#responsive-breakpoints), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/overview#responsive-breakpoints" >}}), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
--- /dev/null
+{{- relref . ((printf "docs/%s%s" $.Site.Params.docs_version (.Get 0)) | relURL) -}}
projects / thirdparty / bootstrap.git / commitdiff
