-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Placement
-Use our [position utilities]({{ site.baseurl }}/docs/{{ site.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 ``) 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 ``) 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/css-sticky)**.
-{% capture example %}
+{{< example >}}
Default
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Fixed top
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Fixed bottom
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Sticky top
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Responsive behaviors
@@ -471,7 +450,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown at the smallest breakpoint:
-{% capture example %}
+{{< example >}}
@@ -496,12 +475,11 @@ With no `.navbar-brand` shown at the smallest breakpoint:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
With a brand name shown on the left and toggler on the right:
-{% capture example %}
+{{< example >}}
Navbar
@@ -527,12 +505,11 @@ With a brand name shown on the left and toggler on the right:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
With a toggler on the left and brand name on the right:
-{% capture example %}
+{{< example >}}
@@ -558,14 +535,13 @@ With a toggler on the left and brand name on the right:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### External content
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-target` matching, that's easily done!
-{% capture example %}
+{{< example >}}
@@ -579,7 +555,6 @@ Sometimes you want to use the collapse plugin to trigger a container element for
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
diff --git a/site/docs/4.5/components/navs.md b/site/content/docs/4.5/components/navs.md
similarity index 92%
rename from site/docs/4.5/components/navs.md
rename to site/content/docs/4.5/components/navs.md
index 7d55c32915..6f35bc54cb 100644
--- a/site/docs/4.5/components/navs.md
+++ b/site/content/docs/4.5/components/navs.md
@@ -12,12 +12,11 @@ Navigation available in Boosted share general markup and styles, from the base `
The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
-{% capture callout %}
+{{< callout info >}}
The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+ {{< /callout >}}
-{% capture example %}
+{{< example >}}
Active
@@ -32,31 +31,28 @@ The base `.nav` component does not include any `.active` state. The following ex
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Classes are used throughout, so your markup can be super flexible. Use `
`s like above, `` if the order of your items is important, or roll your own with a `` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.
-[comment]: # Boosted mod
+
-{% capture callout %}
+{{< callout >}}
#### Accessibility
In addition to the `.active` class, you must use `aria-current="page"` state to represent the current location within the navbar — except for tabpanels where `aria-selected` must be used. This is to ensure a better accessibility to assistive technologies (as screenreaders , screen magnifiers...) that can support it by warning the user of the current element position and type, here it's the current page.
-{% endcapture %}
-{% include callout.html content=callout %}
+{{< /callout >}}
-[comment]: # End mod
+
-{% capture example %}
+{{< example >}}
ActiveLinkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Available styles
@@ -64,11 +60,11 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
### Horizontal alignment
-Change the horizontal alignment of your nav with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.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`:
-{% capture example %}
+{{< example >}}
Active
@@ -83,12 +79,11 @@ Centered with `.justify-content-center`:
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Right-aligned with `.justify-content-end`:
-{% capture example %}
+{{< example >}}
Active
@@ -103,14 +98,13 @@ Right-aligned with `.justify-content-end`:
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Vertical
Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
-{% capture example %}
+{{< example >}}
Active
@@ -125,26 +119,24 @@ Stack your navigation by changing the flex item direction with the `.flex-column
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
As always, vertical navigation is possible without `
`s, too.
-{% capture example %}
+{{< example >}}
ActiveLinkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### 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).
-{% capture example %}
+{{< example >}}
Active
@@ -159,15 +151,14 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # Boosted mod
+
### Nav tabs light
Nav tabs light differs only visually, with a full width bottom border and a different active state.
-{% capture example %}
+{{< example >}}
Active
@@ -182,16 +173,15 @@ Nav tabs light differs only visually, with a full width bottom border and a diff
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # End mod
+
### Pills
Take that same HTML, but use `.nav-pills` instead:
-{% capture example %}
+{{< example >}}
Active
@@ -206,14 +196,13 @@ Take that same HTML, but use `.nav-pills` instead:
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Fill and justify
Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
-{% capture example %}
+{{< example >}}
Active
@@ -228,24 +217,22 @@ Force your `.nav`'s contents to extend the full available width one of two modif
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
When using a ``-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `` elements.
-{% capture example %}
+{{< example >}}
ActiveMuch longer nav linkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
-{% capture example %}
+{{< example >}}
Active
@@ -260,34 +247,31 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Similar to the `.nav-fill` example using a ``-based navigation.
-{% capture example %}
+{{< example >}}
ActiveMuch longer nav linkLinkDisabled
+{{< /example >}}
-{% endcapture %}
-{% include example.html content=example %}
## Working with flex utilities
-If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.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.
-{% capture example %}
+{{< example >}}
ActiveLonger nav linkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Regarding accessibility
@@ -297,11 +281,11 @@ Note that navigation bars, even if visually styled as tabs with the `.nav-tabs`
## Using dropdowns
-Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/docs/{{ site.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
-{% capture example %}
+{{< example >}}
Active
@@ -323,12 +307,11 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Pills with dropdowns
-{% capture example %}
+{{< example >}}
Active
@@ -350,14 +333,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `boosted.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`]({{ site.baseurl }}/docs/{{ site.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 [WAI ARIA 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).
@@ -388,7 +370,7 @@ Note that dynamic tabbed interfaces should not contain dropdown menus,
-{% highlight html %}
+```html
Home
@@ -405,7 +387,7 @@ Note that dynamic tabbed interfaces should not contain dropdown menus,
...
...
-{% endhighlight %}
+```
To help fit your needs, this works with `
`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using ``, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `
`) and wrap the `` around it.
@@ -430,7 +412,7 @@ To help fit your needs, this works with `
`-based markup, as shown above, or
-{% highlight html %}
+```html
Home
@@ -443,7 +425,7 @@ To help fit your needs, this works with `
`-based markup, as shown above, or
...
...
-{% endhighlight %}
+```
The tabs plugin also works with pills.
@@ -472,7 +454,7 @@ The tabs plugin also works with pills.
-{% highlight html %}
+```html
Home
@@ -489,7 +471,7 @@ The tabs plugin also works with pills.
...
...
-{% endhighlight %}
+```
And with vertical pills.
@@ -522,7 +504,7 @@ And with vertical pills.
-{% highlight html %}
+```html
@@ -541,14 +523,14 @@ And with vertical pills.
-{% endhighlight %}
+```
-[comment]: # Boosted mod
+
### Responsive Tabs
Responsive tabs allow tab layouts to be displayed as accordions on a mobile browser if the number of tabs exceeds 2. No configuration or javascript method call needed. Here is the markup:
-{% capture example %}
+{{< example >}}
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch
@@ -557,15 +539,15 @@ Responsive tabs allow tab layouts to be displayed as accordions on a mobile brow
Tab 3
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-{% endcapture %} {% include example.html content=example %}
+{{< /example >}}
-[comment]: # End mod
+
### Using data attributes
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
-{% highlight html %}
+```html
@@ -589,50 +571,52 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
...
...
-{% endhighlight %}
+```
### Via JavaScript
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
-{% highlight js %}
-$('#myTab a').on('click', function (e) {
- e.preventDefault()
+```js
+$('#myTab a').on('click', function (event) {
+ event.preventDefault()
$(this).tab('show')
})
-{% endhighlight %}
+```
You can activate individual tabs in several ways:
-{% highlight js %}
+```js
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab
-{% endhighlight %}
+```
### Fade effect
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
-{% highlight html %}
+```html
...
...
...
...
-{% endhighlight %}
+```
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### $().tab
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
-{% highlight html %}
+```html
Home
@@ -660,15 +644,15 @@ Activates a tab element and content container. Tab should have either a `data-ta
$('#myTab li:last-child a').tab('show')
})
-{% endhighlight %}
+```
#### .tab('show')
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
-{% highlight js %}
+```js
$('#someTab').tab('show')
-{% endhighlight %}
+```
#### .tab('dispose')
@@ -712,9 +696,9 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
-{% highlight js %}
-$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
- e.target // newly activated tab
- e.relatedTarget // previous active tab
+```js
+$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+ event.target // newly activated tab
+ event.relatedTarget // previous active tab
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/orange-footer.md b/site/content/docs/4.5/components/orange-footer.md
similarity index 98%
rename from site/docs/4.5/components/orange-footer.md
rename to site/content/docs/4.5/components/orange-footer.md
index b30997985e..0812a330ff 100644
--- a/site/docs/4.5/components/orange-footer.md
+++ b/site/content/docs/4.5/components/orange-footer.md
@@ -15,7 +15,7 @@ Use `.nav` for lists. Use `.flex-column` for column layout. Use appropriate `.co
According to the brand, Orange footer has black background and white text color.
-{% capture example %}
+{{< example >}}
-{% endcapture %} {% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.5/components/orange-megamenu.md b/site/content/docs/4.5/components/orange-megamenu.md
similarity index 94%
rename from site/docs/4.5/components/orange-megamenu.md
rename to site/content/docs/4.5/components/orange-megamenu.md
index 04a073f4f2..debf393bd8 100644
--- a/site/docs/4.5/components/orange-megamenu.md
+++ b/site/content/docs/4.5/components/orange-megamenu.md
@@ -10,18 +10,18 @@ toc: true
The plugin is initialised via javascript. Make sure to target the element containing the `.mega-menu` class.
-{% highlight js %}
+```js
$('#megamenu').megamenu();
-{% endhighlight %}
+```
HTML markup and especially `
` menu structure must follow this example:
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Options
Megamenu can be initialised to point to a specific menu item when main menu is opened. Call the init method with wanted item id.
-{% highlight js %}
+```js
$('#megamenu').megamenu({ target: '#testLink' });
-{% endhighlight %}
+```
You might as well keep control on focus when page is loaded, thus disabling focus on targeted item.
-{% highlight js %}
+```js
$('#megamenu').megamenu({ target: '#testLink', noFocus: true });
-{% endhighlight %}
+```
Default value for parameter `noFocus` is `false`.
-See a full implementation in the Orange News [example page](../../examples/news-template/)
+See a full implementation in the [Orange News example template]({{< docsref "/examples/news-template" >}}).
diff --git a/site/docs/4.5/components/pagination.md b/site/content/docs/4.5/components/pagination.md
similarity index 87%
rename from site/docs/4.5/components/pagination.md
rename to site/content/docs/4.5/components/pagination.md
index 7ed433c7d9..0b6ed9e732 100644
--- a/site/docs/4.5/components/pagination.md
+++ b/site/content/docs/4.5/components/pagination.md
@@ -15,7 +15,7 @@ In addition, as pages likely have more than one such navigation section, it's ad
[comment]: boosted mod
Make sure to use class `.has-label` on previous and next links as shown in the example below to use chevron + label layout.
-{% capture example %}
+{{< example >}}
@@ -24,15 +24,14 @@ Make sure to use class `.has-label` on previous and next links as shown in the e
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Working with icons
[comment]: boosted mod
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with **visually hidden text** and a `title` attribute.
-{% capture example %}
+{{< example >}}
@@ -47,8 +46,7 @@ Looking to use an icon or symbol in place of text for some pagination links? Be
@@ -231,7 +227,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
selector
string | false
false
-
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
+
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template
@@ -264,20 +260,29 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
offset
number | string
0
-
Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.
+
Offset of the popover relative to its target. For more information refer to Popper's offset docs.
fallbackPlacement
string | array
'flip'
Allow to specify which position Popper will use on fallback. For more information refer to
- Popper.js's behavior docs
Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'a b'.
+
You can also pass a function that should return a single string containing additional class names.
+
boundary
string | element
'scrollParent'
-
Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
+
Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitize
@@ -288,7 +293,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
-{% capture callout %}
+{{< callout info >}}
#### Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### `$().popover(options)`
@@ -325,49 +331,65 @@ Initializes popovers for an element collection.
Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
-{% highlight js %}$('#element').popover('show'){% endhighlight %}
+```js
+$('#element').popover('show')
+```
#### `.popover('hide')`
Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-{% highlight js %}$('#element').popover('hide'){% endhighlight %}
+```js
+$('#element').popover('hide')
+```
#### `.popover('toggle')`
Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
+```js
+$('#element').popover('toggle')
+```
#### `.popover('dispose')`
Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-{% highlight js %}$('#element').popover('dispose'){% endhighlight %}
+```js
+$('#element').popover('dispose')
+```
#### `.popover('enable')`
Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
-{% highlight js %}$('#element').popover('enable'){% endhighlight %}
+```js
+$('#element').popover('enable')
+```
#### `.popover('disable')`
Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
-{% highlight js %}$('#element').popover('disable'){% endhighlight %}
+```js
+$('#element').popover('disable')
+```
#### `.popover('toggleEnabled')`
Toggles the ability for an element's popover to be shown or hidden.
-{% highlight js %}$('#element').popover('toggleEnabled'){% endhighlight %}
+```js
+$('#element').popover('toggleEnabled')
+```
#### `.popover('update')`
Updates the position of an element's popover.
-{% highlight js %}$('#element').popover('update'){% endhighlight %}
+```js
+$('#element').popover('update')
+```
### Events
@@ -402,8 +424,8 @@ Updates the position of an element's popover.
-{% highlight js %}
+```js
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/content/docs/4.5/components/priority-nav.md b/site/content/docs/4.5/components/priority-nav.md
new file mode 100644
index 0000000000..9b7d7edafd
--- /dev/null
+++ b/site/content/docs/4.5/components/priority-nav.md
@@ -0,0 +1,46 @@
+---
+layout: docs
+title: Orange priority nav
+description: Add a "more" button when space for navigation items runs short
+group: components
+toc: true
+---
+
+## Scope
+
+The priority nav plugin can be used on [local navigation]({{< docsref "/components/local-navigation" >}}), [navigation tabs]({{< docsref "/components/navs#tabs" >}}) and [navigation pills]({{< docsref "/components/navs#pills" >}}).
+
+## Usage
+
+The plugin is initialised via Javascript.
+
+```js
+$('.o-nav-local').prioritynav();
+```
+
+## Example
+
+Reduce the width of your browser to see overflowing navigation items moved into a nice dropdown menu.
+
+{{< example >}}
+
+
+
+{{< /example >}}
+
+## Options
+
+Used with no parameter, the label 'More' is used as default. For custom labeling use the following:
+
+```js
+$('.o-nav-local').prioritynav('Custom label');
+```
diff --git a/site/docs/4.5/components/progress.md b/site/content/docs/4.5/components/progress.md
similarity index 86%
rename from site/docs/4.5/components/progress.md
rename to site/content/docs/4.5/components/progress.md
index 6cbe1f48cd..1526dc2c39 100644
--- a/site/docs/4.5/components/progress.md
+++ b/site/content/docs/4.5/components/progress.md
@@ -17,7 +17,7 @@ Progress components are built with two HTML elements, some CSS to set the width,
Put that all together, and you have the following examples.
-{% capture example %}
+{{< example >}}
@@ -33,53 +33,49 @@ Put that all together, and you have the following examples.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Boosted provides a handful of [utilities for setting width]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
+Boosted provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Labels
Add labels to your progress bars by placing text within the `.progress-bar`.
-{% capture example %}
+{{< example >}}
25%
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # Boosted mod: sizes variants
+
### Sizes
Boosted also provides size variants for progress bar: simply add `.progress-xs` or `.progress-sm`.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # End mod
+
## Backgrounds
Use background utility classes to change the appearance of individual progress bars.
-{% capture example %}
+{{< example >}}
@@ -92,27 +88,25 @@ Use background utility classes to change the appearance of individual progress b
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Multiple bars
Include multiple progress bars in a progress component if you need.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Striped
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
-{% capture example %}
+{{< example >}}
@@ -128,8 +122,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Animated stripes
@@ -144,8 +137,8 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
-{% highlight html %}
+```html
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/scroll-up.md b/site/content/docs/4.5/components/scroll-up.md
similarity index 74%
rename from site/docs/4.5/components/scroll-up.md
rename to site/content/docs/4.5/components/scroll-up.md
index 2888ebb8b2..fc03162f05 100644
--- a/site/docs/4.5/components/scroll-up.md
+++ b/site/content/docs/4.5/components/scroll-up.md
@@ -9,22 +9,24 @@ toc: true
## Scroll up auto display
Displays a link at the bottom right of the page after scrolling down one page height.
-Adds a link at the end of the page with the `o-scroll-up` class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in [the `d-{breakpoint}-inline-block` utility]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). The arrow up icon is added via CSS.
+Adds a link at the end of the page with the `o-scroll-up` class. The "Back to top" text is only shown on desktop display — but you can change the breakpoint in [the `d-{breakpoint}-inline-block` utility]({{< docsref "/utilities/display" >}}). The arrow up icon is added via CSS.
For accessibility reasons, add a `title` to the link that's **consistent** with text content.
-{% highlight html %}
+```html
Back to top
-{% endhighlight %}
+```
## Scroll up static
-Displays a static “Back to top” link, by adding it in the page with the `o-scroll-up` and `static` class.
-{% capture example %}
+
+Displays a static "Back to top" link, by adding it in the page with the `o-scroll-up` and `static` class.
+
+{{< example >}}
Back to top
-{% endcapture %} {% include example.html content=example %}
+{{< /example >}}
## Options
diff --git a/site/docs/4.5/components/scrollspy.md b/site/content/docs/4.5/components/scrollspy.md
similarity index 50%
rename from site/docs/4.5/components/scrollspy.md
rename to site/content/docs/4.5/components/scrollspy.md
index 2958ea25a9..5528bbbcaa 100644
--- a/site/docs/4.5/components/scrollspy.md
+++ b/site/content/docs/4.5/components/scrollspy.md
@@ -10,8 +10,8 @@ toc: true
Scrollspy has a few requirements to function properly:
-- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
-- It must be used on a Boosted [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.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 Boosted [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 ``.
- When spying on elements other than the ``, be sure to have a `height` set and `overflow-y: scroll;` applied.
- Anchors (``) are required and must point to an element with that `id`.
@@ -24,7 +24,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
@fat
@@ -45,23 +45,23 @@ Scroll the area below the navbar and watch the active class change. The dropdown
@fat
-
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
+
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
-
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
+
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
-
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
+
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
-
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
+
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
-
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
+
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
+
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
-{% highlight html %}
+```html
-
+
@fat
@@ -92,7 +92,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
three
...
-{% endhighlight %}
+```
## Example with nested nav
@@ -102,7 +102,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
-
+ Item 1
@@ -121,27 +121,27 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
Item 1
-
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
+
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 1-1
-
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
+
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
Item 1-2
-
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
+
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
Item 2
-
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
+
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
+
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 3-1
-
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
+
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
Item 3-2
-
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
+
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
-{% highlight html %}
+```html
-
+ Item 1
@@ -173,7 +173,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
Item 3-2
...
-{% endhighlight %}
+```
## Example with list-group
@@ -192,19 +192,19 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
Item 1
-
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
+
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 2
-
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
+
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
+
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 4
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
+
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
-{% highlight html %}
+```html
Item 1Item 2
@@ -221,7 +221,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
Item 4
...
-{% endhighlight %}
+```
## Usage
@@ -230,13 +230,13 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
To easily add scrollspy behavior to your topbar navigation, add `data-spy="scroll"` to the element you want to spy on (most typically this would be the ``). Then add the `data-target` attribute with the ID or class of the parent element of any Boosted `.nav` component.
-{% highlight css %}
+```css
body {
position: relative;
}
-{% endhighlight %}
+```
-{% highlight html %}
+```html
...
@@ -246,29 +246,27 @@ body {
...
-{% endhighlight %}
+```
### Via JavaScript
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
-{% highlight js %}
+```js
$('body').scrollspy({ target: '#navbar-example' })
-{% endhighlight %}
+```
-{% capture callout %}
+{{< callout danger >}}
#### Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a `home` must correspond to something in the DOM like ``.
-{% endcapture %}
-{% include callout.html content=callout type="danger" %}
+{{< /callout >}}
-{% capture callout %}
+{{< callout info >}}
#### Non-`:visible` target elements ignored
Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
### Methods
@@ -276,11 +274,11 @@ Target elements that are not [`:visible` according to jQuery](https://api.jquery
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
-{% highlight js %}
+```js
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
-{% endhighlight %}
+```
#### `.scrollspy('dispose')`
@@ -338,8 +336,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
-{% highlight js %}
+```js
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/spinners.md b/site/content/docs/4.5/components/spinners.md
similarity index 69%
rename from site/docs/4.5/components/spinners.md
rename to site/content/docs/4.5/components/spinners.md
index 18b80e1b13..f81849189f 100644
--- a/site/docs/4.5/components/spinners.md
+++ b/site/content/docs/4.5/components/spinners.md
@@ -12,24 +12,25 @@ Boosted "spinners" can be used to show the loading state in your projects. They'
For accessibility purposes, each loader here includes `role="status"` and a nested `Loading...`.
-{% include callout-info-prefersreducedmotion.md %}
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
## Border spinner
Use the border spinners for a lightweight loading indicator.
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Colors
The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
-{% capture example %}
+{{< example >}}
Loading...
@@ -39,28 +40,25 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture callout %}
+{{< callout info >}}
**Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
## Growing spinner
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color].
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities]({{< docsref "/utilities/colors" >}}).
-{% capture example %}
+{{< example >}}
Loading...
@@ -70,8 +68,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Alignment
@@ -79,93 +76,84 @@ Spinners in Boosted are built with `rem`s, `currentColor`, and `display: inline-
### Margin
-Use [margin utilities][margin] like `.m-5` for easy spacing.
+Use [margin utilities]({{< docsref "/utilities/spacing" >}}) like `.m-5` for easy spacing.
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Placement
-Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation.
+Use [flexbox utilities]({{< docsref "/utilities/flex" >}}), [float utilities]({{< docsref "/utilities/float" >}}), or [text alignment]({{< docsref "/utilities/text" >}}) utilities to place spinners exactly where you need them in any situation.
#### Flex
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
#### Floats
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
#### Text align
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
-
-[comment]: # Boosted mod: `.spinner-*-lg`
+{{< /example >}}
## Size
Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components.
-{% capture example %}
+{{< example >}}
Loading...
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Add `.spinner-border-lg` and `.spinner-grow-lg` to make a taller spinner, too.
-{% capture example %}
+{{< example >}}
Loading...
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Buttons
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
-{% capture example %}
+{{< example >}}
Loading...
@@ -174,10 +162,9 @@ Use spinners within buttons to indicate an action is currently processing or tak
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Loading...
@@ -186,14 +173,12 @@ Use spinners within buttons to indicate an action is currently processing or tak
Loading...
-{% endcapture %}
-{% include example.html content=example %}
-
-
-[color]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/
-[display]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/
-[flex]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/
-[float]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/
-[margin]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/
-[sizing]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/
-[text]: {{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/
+{{< /example >}}
+
+[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" >}}
diff --git a/site/docs/4.5/components/stepbar.md b/site/content/docs/4.5/components/stepbar.md
similarity index 94%
rename from site/docs/4.5/components/stepbar.md
rename to site/content/docs/4.5/components/stepbar.md
index 1f95865130..25836ea06d 100644
--- a/site/docs/4.5/components/stepbar.md
+++ b/site/content/docs/4.5/components/stepbar.md
@@ -16,7 +16,7 @@ Use `.current` class to define current step, alongwith with `aria-current="step"
## Example
-{% capture example %}
+{{< example >}}
Step
@@ -37,4 +37,4 @@ Use `.current` class to define current step, alongwith with `aria-current="step"
-{% endcapture %} {% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.5/components/toasts.md b/site/content/docs/4.5/components/toasts.md
similarity index 81%
rename from site/docs/4.5/components/toasts.md
rename to site/content/docs/4.5/components/toasts.md
index e2e942e484..8da864b7b7 100644
--- a/site/docs/4.5/components/toasts.md
+++ b/site/content/docs/4.5/components/toasts.md
@@ -12,12 +12,14 @@ Toasts are lightweight notifications designed to mimic the push notifications th
Things to know when using the toast plugin:
-- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.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`.
-{% include callout-info-prefersreducedmotion.md %}
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
## Examples
@@ -27,10 +29,10 @@ To encourage extensible and predictable toasts, we recommend a header and body.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -43,17 +45,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
Hello, world! This is a toast message.
-{% endcapture %}
-{% include example.html content=example class="bg-light" %}
+{{< /example >}}
### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.
-{% capture example %}
+{{< example class="bg-dark" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -66,17 +67,16 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
Hello, world! This is a toast message.
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
### Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
just now
@@ -92,8 +92,8 @@ When you have multiple toasts, we default to vertically stacking them in a reada
- {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
- Bootstrap
+ {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " >}}
+ Boosted
2 seconds ago
@@ -105,18 +105,17 @@ When you have multiple toasts, we default to vertically stacking them in a reada
Heads up, toasts will stack automatically
-{% endcapture %}
-{% include example.html content=example class="bg-light" %}
+{{< /example >}}
## Placement
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
-{% capture example %}
+{{< example >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -130,12 +129,11 @@ Place toasts with custom CSS as you need them. The top right is often used for n
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
-{% capture example %}
+{{< example class="bg-dark" >}}
@@ -143,7 +141,7 @@ For systems that generate more notifications, consider using a wrapping element
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
just now
@@ -159,7 +157,7 @@ For systems that generate more notifications, consider using a wrapping element
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
2 seconds ago
@@ -174,19 +172,18 @@ For systems that generate more notifications, consider using a wrapping element
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
-{% capture example %}
+{{< example >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -200,12 +197,11 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
## 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]({{ site.baseurl }}/docs/{{ site.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.
@@ -213,18 +209,18 @@ You also need to adapt the `role` and `aria-live` level depending on the content
As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
-{% highlight html %}
+```html
...
-{% endhighlight %}
+```
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
-{% capture example %}
+{{< example >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -237,8 +233,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
Hello, world! This is a toast message.
-{% endcapture %}
-{% include example.html content=example class="bg-light" %}
+{{< /example >}}
## JavaScript behavior
@@ -246,9 +241,9 @@ When using `autohide: false`, you must add a close button to allow users to dism
Initialize toasts via JavaScript:
-{% highlight js %}
+```js
$('.toast').toast(option)
-{% endhighlight %}
+```
### Options
@@ -289,7 +284,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### `$().toast(options)`
@@ -300,19 +297,25 @@ Attaches a toast handler to an element collection.
Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
You have to manually call this method, instead your toast won't show.
-{% highlight js %}$('#element').toast('show'){% endhighlight %}
+```js
+$('#element').toast('show')
+```
#### `.toast('hide')`
Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
-{% highlight js %}$('#element').toast('hide'){% endhighlight %}
+```js
+$('#element').toast('hide')
+```
#### `.toast('dispose')`
Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
-{% highlight js %}$('#element').toast('dispose'){% endhighlight %}
+```js
+$('#element').toast('dispose')
+```
### Events
@@ -343,8 +346,8 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo
-{% highlight js %}
+```js
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/tooltips.md b/site/content/docs/4.5/components/tooltips.md
similarity index 85%
rename from site/docs/4.5/components/tooltips.md
rename to site/content/docs/4.5/components/tooltips.md
index 68d58b0117..b2b70bfe5d 100644
--- a/site/docs/4.5/components/tooltips.md
+++ b/site/content/docs/4.5/components/tooltips.md
@@ -10,8 +10,8 @@ toc: true
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]({{ site.cdn.popper }}) before boosted.js or use `boosted.bundle.min.js` / `boosted.bundle.js` which contains Popper.js in order for tooltips to work!
-- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+- Tooltips rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before boosted.js or use `boosted.bundle.min.js` / `boosted.bundle.js` which contains Popper.js in order for tooltips to work!
+- 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).
@@ -21,7 +21,9 @@ Things to know when using the tooltip plugin:
- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
-{% include callout-info-prefersreducedmotion.md %}
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
Got all that? Great, let's see how they work with some examples.
@@ -29,11 +31,11 @@ Got all that? Great, let's see how they work with some examples.
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
-{% highlight js %}
+```js
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
-{% endhighlight %}
+```
## Examples
@@ -56,7 +58,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
-{% highlight html %}
+```html
Tooltip on top
@@ -69,15 +71,15 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
Tooltip on left
-{% endhighlight %}
+```
And with custom HTML added:
-{% highlight html %}
+```html
Tooltip with HTML
-{% endhighlight %}
+```
## Usage
@@ -85,33 +87,31 @@ The tooltip plugin generates content and markup on demand, and by default places
Trigger the tooltip via JavaScript:
-{% highlight js %}
+```js
$('#example').tooltip(options)
-{% endhighlight %}
+```
-{% capture callout %}
+{{< callout warning >}}
##### Overflow `auto` and `scroll`
Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
-{% highlight js %}
+```js
$('#example').tooltip({ boundary: 'window' })
-{% endhighlight %}
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+```
+{{< /callout >}}
### Markup
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
-{% capture callout %}
+{{< callout warning >}}
##### Making tooltips work for keyboard and assistive technology users
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as ``s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+{{< /callout >}}
-{% highlight html %}
+```html
Hover over me
@@ -122,29 +122,27 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
Some tooltip text!
-{% endhighlight %}
+```
### Disabled elements
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.
-{% capture example %}
+{{< example >}}
Disabled button
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
-{% capture callout %}
+{{< callout warning >}}
Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+{{< /callout >}}
@@ -203,7 +201,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
selector
string | false
false
-
If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this and an informative example.
+
If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this and an informative example.
template
@@ -242,7 +240,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
Offset of the tooltip relative to its target.
When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.
-
For more information refer to Popper.js's offset docs.
+
For more information refer to Popper's offset docs.
@@ -250,13 +248,22 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
string | array
'flip'
Allow to specify which position Popper will use on fallback. For more information refer to
- Popper.js's behavior docs
Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'a b'.
+
You can also pass a function that should return a single string containing additional class names.
+
boundary
string | element
'scrollParent'
-
Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
+
Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitize
@@ -267,7 +274,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
-{% capture callout %}
+{{< callout info >}}
#### Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### `$().tooltip(options)`
@@ -304,49 +312,65 @@ Attaches a tooltip handler to an element collection.
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
-{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
+```js
+$('#element').tooltip('show')
+```
#### `.tooltip('hide')`
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
+```js
+$('#element').tooltip('hide')
+```
#### `.tooltip('toggle')`
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
+```js
+$('#element').tooltip('toggle')
+```
#### `.tooltip('dispose')`
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-{% highlight js %}$('#element').tooltip('dispose'){% endhighlight %}
+```js
+$('#element').tooltip('dispose')
+```
#### `.tooltip('enable')`
Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
-{% highlight js %}$('#element').tooltip('enable'){% endhighlight %}
+```js
+$('#element').tooltip('enable')
+```
#### `.tooltip('disable')`
Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
-{% highlight js %}$('#element').tooltip('disable'){% endhighlight %}
+```js
+$('#element').tooltip('disable')
+```
#### `.tooltip('toggleEnabled')`
Toggles the ability for an element's tooltip to be shown or hidden.
-{% highlight js %}$('#element').tooltip('toggleEnabled'){% endhighlight %}
+```js
+$('#element').tooltip('toggleEnabled')
+```
#### `.tooltip('update')`
Updates the position of an element's tooltip.
-{% highlight js %}$('#element').tooltip('update'){% endhighlight %}
+```js
+$('#element').tooltip('update')
+```
### Events
@@ -381,8 +405,8 @@ Updates the position of an element's tooltip.
-{% highlight js %}
+```js
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/content/code.md b/site/content/docs/4.5/content/code.md
similarity index 75%
rename from site/docs/4.5/content/code.md
rename to site/content/docs/4.5/content/code.md
index d8c7ec6fa3..4be4c9705f 100644
--- a/site/docs/4.5/content/code.md
+++ b/site/content/docs/4.5/content/code.md
@@ -10,46 +10,41 @@ toc: true
Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
-{% capture example %}
+{{< example >}}
For example, <section> should be wrapped as inline.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Code blocks
Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
-{% capture example %}
+{{< example >}}
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Variables
For indicating variables use the `` tag.
-{% capture example %}
+{{< example >}}
y = mx + b
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## User input
Use the `` to indicate input that is typically entered via keyboard.
-{% capture example %}
+{{< example >}}
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Sample output
For indicating sample output from a program use the `` tag.
-{% capture example %}
+{{< example >}}
This text is meant to be treated as sample output from a computer program.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.5/content/figures.md b/site/content/docs/4.5/content/figures.md
similarity index 66%
rename from site/docs/4.5/content/figures.md
rename to site/content/docs/4.5/content/figures.md
index 0d0aadc084..821f18cf8f 100644
--- a/site/docs/4.5/content/figures.md
+++ b/site/content/docs/4.5/content/figures.md
@@ -9,20 +9,18 @@ Anytime you need to display a piece of content—like an image with an optional
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
+Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/content/docs/4.5/content/images.md b/site/content/docs/4.5/content/images.md
new file mode 100644
index 0000000000..7eb852af55
--- /dev/null
+++ b/site/content/docs/4.5/content/images.md
@@ -0,0 +1,60 @@
+---
+layout: docs
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
+group: content
+toc: true
+---
+
+## Responsive images
+
+Images in Boosted are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
+
+{{< example >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< /example >}}
+
+{{< callout warning >}}
+##### SVG images and Internet Explorer
+
+In Internet Explorer 10 and 11, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100%;` or `.w-100` where necessary. This fix improperly sizes other image formats, so Boosted doesn't apply it automatically.
+{{< /callout >}}
+
+## Image thumbnails
+
+In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+{{< example >}}
+{{< 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" >}}
+{{< /example >}}
+
+## Aligning images
+
+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" >}}).
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded float-left" >}}
+{{< placeholder width="200" height="200" class="rounded float-right" >}}
+{{< /example >}}
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
+{{< /example >}}
+
+{{< example >}}
+