tags to code blocks
- code = code.sub(/\n*/,'')
- code = code.sub(/\n*<\/pre>/,"${datepickerApi.get(datepickerValue, 'yyyy')}
${datepickerApi.get(datepickerValue, 'dddd')} ${datepickerApi.get(datepickerValue, 'd')} ${datepickerApi.get(datepickerValue, 'mmm')}
' +
- '
' +
- '' + datepickerApi.get(datepickerValue, 'yyyy') + ' ' +
- '
' +
- '
' +
- '' + datepickerApi.get(datepickerValue, 'dddd') + ' ' +
- '' + datepickerApi.get(datepickerValue, 'd') + ' ' +
- '' + datepickerApi.get(datepickerValue, 'mmm') + ' ' +
- '
' +
- '
` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
-
-Here are our guidelines and reasons for choosing what to override in Reboot:
-
-- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
-- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
-- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
-- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
-
-## Page defaults
-
-The `` and `` elements are updated to provide better page-wide defaults. More specifically:
-
-- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
- - No base `font-size` is declared on the ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
-- The `` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
-- For safety, the `` has a declared `background-color`, defaulting to `#fff`.
-
-## Native font stack
-
-The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
-
-{% highlight sass %}
-$font-family-sans-serif:
- // Safari for OS X and iOS (San Francisco)
- -apple-system,
- // Chrome < 56 for OS X (San Francisco)
- BlinkMacSystemFont,
- // Windows
- "Segoe UI",
- // Android
- "Roboto",
- // Basic web fallback
- "Helvetica Neue", Arial, sans-serif,
- // Emoji fonts
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-{% endhighlight %}
-
-This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
-
-## Headings and paragraphs
-
-All heading elements—e.g., ``—and ` ` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
-
-
-
-
- Heading
- Example
-
-
-
-
-
- {{ "`
- h1. Bootstrap heading
-
-
- {{ "`
- h2. Bootstrap heading
-
-
- {{ "`
- h3. Bootstrap heading
-
-
- {{ "`
- h4. Bootstrap heading
-
-
- {{ "`
- h5. Bootstrap heading
-
-
- {{ "`
- h6. Bootstrap heading
-
-
-
-## Lists
-
-All lists—``, ``, and ``—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
-
-
-{% capture markdown %}
-* Lorem ipsum dolor sit amet
-* Consectetur adipiscing elit
-* Integer molestie lorem at massa
-* Facilisis in pretium nisl aliquet
-* Nulla volutpat aliquam velit
- * Phasellus iaculis neque
- * Purus sodales ultricies
- * Vestibulum laoreet porttitor sem
- * Ac tristique libero volutpat at
-* Faucibus porta lacus fringilla vel
-* Aenean sit amet erat nunc
-* Eget porttitor lorem
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-4. Facilisis in pretium nisl aliquet
-5. Nulla volutpat aliquam velit
-6. Faucibus porta lacus fringilla vel
-7. Aenean sit amet erat nunc
-8. Eget porttitor lorem
-{% endcapture %}
-{{ markdown | markdownify }}
-
-
-For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. ``s reset `margin-left` to `0` and add `margin-bottom: .5rem`. ` `s are **bolded**.
-
-
-
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
-
-
` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
-
-
-
-.example-element {
- margin-bottom: 1rem;
-}
-
-
`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/tables/).
-
-
-
-
- This is an example table, and this is its caption to describe the contents.
-
-
-
- Table heading
- Table heading
- Table heading
- Table heading
-
-
-
-
- Table cell
- Table cell
- Table cell
- Table cell
-
-
- Table cell
- Table cell
- Table cell
- Table cell
-
-
- Table cell
- Table cell
- Table cell
- Table cell
-
-
-
-
`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
-- ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
-- ``s are set to `display: inline-block` to allow `margin` to be applied.
-- ``s, `
-
-
-
- Example date
-
-
-
- Example time
-
-
-
- Example output
- 100
-
-
-
- Button submit
-
-
-
- Button submit
-
-
-
-
-## Misc elements
-
-### Address
-
-The `` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. ``s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
-
- Twitter, Inc. P: (123) 456-7890
-
-
-
- Full Name first.last@example.com
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title
-
-
` element receives basic styling to make it stand out amongst paragraph text.
-
-
- Nulla
attr vitae elit libero, a pharetra augue.
-
-
- Some details
- More info about the details.
-
-
-
- Even more details
- Here are even more details about the details.
-
-
- This is a {{ color.name }} alert—check it out!
+ A simple {{ color.name }} alert—check it out!
{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
### Link color
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
- This is a {{ color.name }} alert with
an example link . Give it a click if you like.
+ A simple {{ color.name }} alert with
an example link . Give it a click if you like.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Dismissing
@@ -57,14 +59,15 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
You can see this in action with a live demo:
-{% example html %}
+{% capture example %}
Holy guacamole! You should check in on some of those fields below.
×
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## JavaScript behavior
diff --git a/docs/4.0/components/badge.md b/docs/4.1/components/badge.md
similarity index 86%
rename from docs/4.0/components/badge.md
rename to docs/4.1/components/badge.md
index 287005e7d..0e97cbe76 100644
--- a/docs/4.0/components/badge.md
+++ b/docs/4.1/components/badge.md
@@ -30,49 +30,53 @@ Badges scale to match the size of the immediate parent element by using relative
Badges can be used as part of links or buttons to provide a counter.
-{% example html %}
+{% capture example %}
Notifications 4
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
-{% example html %}
+{% capture example %}
Profile 9
unread messages
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
{{ color.name | capitalize }} {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
## Pill badges
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
{{ color.name | capitalize }} {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Links
Using the contextual `.badge-*` classes on an `` element quickly provide _actionable_ badges with hover and focus states.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
{{ color.name | capitalize }} {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.1/components/breadcrumb.md
similarity index 62%
rename from docs/4.0/components/breadcrumb.md
rename to docs/4.1/components/breadcrumb.md
index 2cbcc17b9..6a64c1285 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.1/components/breadcrumb.md
@@ -5,11 +5,9 @@ description: Indicate the current page's location within a navigational hierarch
group: components
---
-## Overview
+## Example
-Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
-
-{% example html %}
+{% capture example %}
Home
@@ -30,7 +28,28 @@ Separators are automatically added in CSS through [`::before`](https://developer
Data
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
+
+## Changing the separator
+
+Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider`. The [quote](http://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method) function is needed to generate the quotes around a string, so if you want `>` as seperator, you can use this:
+
+```scss
+$breadcrumb-divider: quote(">");
+```
+
+It's also possible to use a **base64 embedded SVG icon**:
+
+```scss
+$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
+```
+
+The separator can be removed by setting `$breadcrumb-divider` to `none`:
+
+```scss
+$breadcrumb-divider: none;
+```
## Accessibility
diff --git a/docs/4.0/components/button-group.md b/docs/4.1/components/button-group.md
similarity index 95%
rename from docs/4.0/components/button-group.md
rename to docs/4.1/components/button-group.md
index b771e0da0..2261a5e72 100644
--- a/docs/4.0/components/button-group.md
+++ b/docs/4.1/components/button-group.md
@@ -10,27 +10,29 @@ toc: true
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
-{% example html %}
+{% capture example %}
Left
Middle
Right
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% callout warning %}
+{% capture callout %}
##### Ensure correct `role` and provide a label
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
## Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sizing
@@ -117,7 +121,7 @@ Instead of applying button sizing classes to every button in a group, just add `
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
-{% example html %}
+{% capture example %}
1
2
@@ -132,7 +136,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Vertical variation
diff --git a/docs/4.0/components/buttons.md b/docs/4.1/components/buttons.md
similarity index 82%
rename from docs/4.0/components/buttons.md
rename to docs/4.1/components/buttons.md
index 60373be6c..f999fd552 100644
--- a/docs/4.0/components/buttons.md
+++ b/docs/4.1/components/buttons.md
@@ -3,7 +3,7 @@ layout: docs
title: Buttons
description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
group: components
-redirect_from: "/docs/4.0/components/"
+redirect_from: "/docs/4.1/components/"
toc: true
---
@@ -11,15 +11,15 @@ toc: true
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
{{ color.name | capitalize }} {% endfor %}
Link
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-warning-color-assistive-technologies.md %}
## Button tags
@@ -27,61 +27,68 @@ The `.btn` classes are designed to be used with the `` element. However,
When using button classes on `` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
-{% example html %}
+{% capture example %}
Link
Button
{{ color.name | capitalize }} {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sizes
Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.
-{% example html %}
+{% capture example %}
Large button
Large button
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
Small button
Small button
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
-{% example html %}
+{% capture example %}
Block level button
Block level button
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to ``s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.
-{% example html %}
+{% capture example %}
Primary link
Link
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Disabled state
Make buttons look inactive by adding the `disabled` boolean attribute to any `` element.
-{% example html %}
+{% capture example %}
Primary button
Button
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Disabled buttons using the `` element behave a bit different:
@@ -89,16 +96,18 @@ Disabled buttons using the ` ` element behave a bit different:
- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all.
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
-{% example html %}
- Primary link
-Link
-{% endexample %}
+{% capture example %}
+Primary link
+Link
+{% endcapture %}
+{% include example.html content=example %}
-{% callout warning %}
+{% capture callout %}
##### Link functionality caveat
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="warning" %}
## Button plugin
@@ -108,11 +117,12 @@ Do more with buttons. Control button states or create groups of buttons for more
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the ``.
-{% example html %}
+{% capture example %}
Single toggle
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Checkbox and radio buttons
@@ -122,15 +132,16 @@ The checked state for these buttons is **only updated via `click` event** on the
Note that pre-checked buttons require you to manually add the `.active` class to the input's ``.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Methods
diff --git a/docs/4.0/components/card.md b/docs/4.1/components/card.md
similarity index 91%
rename from docs/4.0/components/card.md
rename to docs/4.1/components/card.md
index 672892be2..92cc1321f 100644
--- a/docs/4.0/components/card.md
+++ b/docs/4.1/components/card.md
@@ -16,7 +16,7 @@ Cards are built with as little markup and styles as possible, but still manage t
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).
-{% example html %}
+{% capture example %}
@@ -25,7 +25,8 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
Go somewhere
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Content types
@@ -35,13 +36,14 @@ Cards support a wide variety of content, including images, text, list groups, li
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
-{% example html %}
+{% capture example %}
This is some text within a card body.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Titles, text, and links
@@ -49,7 +51,7 @@ Card titles are used by adding `.card-title` to a `` tag. In the same way, l
Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
-{% example html %}
+{% capture example %}
Card title
@@ -59,26 +61,28 @@ Subtitles are used by adding a `.card-subtitle` to a `
` tag. If the `.card-t
Another link
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Images
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
-{% example html %}
+{% capture example %}
Some quick example text to build on the card title and make up the bulk of the card's content.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### List groups
Create lists of content in a card with a flush list group.
-{% example html %}
+{% capture example %}
Cras justo odio
@@ -86,9 +90,10 @@ Create lists of content in a card with a flush list group.
Vestibulum at eros
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
-{% example html %}
+{% capture example %}
@@ -122,13 +128,14 @@ Mix and match multiple content types to create the card you need, or throw every
Another link
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Header and footer
Add an optional header and/or footer within a card.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Card headers can be styled by adding `.card-header` to `
` elements.
-{% example html %}
+{% capture example %}
@@ -152,9 +160,10 @@ Card headers can be styled by adding `.card-header` to `
` elements.
Go somewhere
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sizing
@@ -192,7 +203,7 @@ Cards assume no specific `width` to start, so they'll be 100% wide unless otherw
Using the grid, wrap cards in columns and rows as needed.
-{% example html %}
+{% capture example %}
@@ -213,13 +224,14 @@ Using the grid, wrap cards in columns and rows as needed.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Using utilities
Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/) to quickly set a card's width.
-{% example html %}
+{% capture example %}
Card title
@@ -235,13 +247,14 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
Button
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Using custom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
-{% example html %}
+{% capture example %}
Special title treatment
@@ -249,13 +262,14 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
Go somewhere
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Text alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
-{% example html %}
+{% capture example %}
Special title treatment
@@ -279,13 +293,14 @@ You can quickly change the text alignment of any card—in its entirety or speci
Go somewhere
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Navigation
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/).
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Images
@@ -339,7 +356,7 @@ Cards include a few options for working with images. Choose from appending "imag
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
-{% example html %}
+{% capture example %}
@@ -356,13 +373,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Image overlays
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
-{% example html %}
+{% capture example %}
@@ -371,7 +389,8 @@ Turn an image into a card background and overlay your card's text. Depending on
Last updated 3 mins ago
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Card styles
@@ -381,7 +400,7 @@ Cards include various options for customizing their backgrounds, borders, and co
Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to change the appearance of a card.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
@@ -390,16 +409,16 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
Some quick example text to build on the card title and make up the bulk of the card's content.
@@ -408,13 +427,14 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
Some quick example text to build on the card title and make up the bulk of the card's content.
@@ -423,7 +443,8 @@ You can also change the borders on the card header and footer as needed, and eve
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Card layout
@@ -433,7 +454,7 @@ In addition to styling the content within cards, Bootstrap includes a few option
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
-{% example html %}
+{% capture example %}
@@ -460,11 +481,12 @@ Use card groups to render cards as a single, attached element with equal width a
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
When using card groups with footers, their content will automatically line up.
-{% example html %}
+{% capture example %}
@@ -497,13 +519,14 @@ When using card groups with footers, their content will automatically line up.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Card decks
Need a set of equal width and height cards that aren't attached to one another? Use card decks.
-{% example html %}
+{% capture example %}
@@ -530,11 +553,12 @@ Need a set of equal width and height cards that aren't attached to one another?
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Just like with card groups, card footers in decks will automatically line up.
-{% example html %}
+{% capture example %}
@@ -567,7 +591,8 @@ Just like with card groups, card footers in decks will automatically line up.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Card columns
@@ -575,7 +600,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
-{% example html %}
+{% capture example %}
@@ -640,7 +665,8 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
diff --git a/docs/4.0/components/carousel.md b/docs/4.1/components/carousel.md
similarity index 92%
rename from docs/4.0/components/carousel.md
rename to docs/4.1/components/carousel.md
index 0aa132ed7..7c4a0472e 100644
--- a/docs/4.0/components/carousel.md
+++ b/docs/4.1/components/carousel.md
@@ -20,13 +20,13 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
-**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page.
+**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
### Slides only
-Here's a carousel with slides only. Note the presence of the `.d-block` and `.img-fluid` on carousel images to prevent browser default image alignment.
+Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
-{% example html %}
+{% capture example %}
@@ -40,13 +40,14 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.im
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### With controls
Adding in the previous and next controls:
-{% example html %}
+{% capture example %}
@@ -68,13 +69,14 @@ Adding in the previous and next controls:
Next
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### With indicators
You can also add the indicators to the carousel, alongside the controls, too.
-{% example html %}
+{% capture example %}
Next
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### With captions
@@ -162,7 +165,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
-{% example html %}
+{% capture example %}
@@ -184,7 +187,8 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
Next
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Usage
@@ -253,8 +257,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
### Methods
-{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %}
-{{ callout-include | markdownify }}
+{% include callout-danger-async-methods.md %}
#### `.carousel(options)`
@@ -325,3 +328,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
// do something…
})
{% endhighlight %}
+
+### Change transition duration
+
+The transition duration of `.carousel-item` can be changed with the `$carousel-transition` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
diff --git a/docs/4.0/components/collapse.md b/docs/4.1/components/collapse.md
similarity index 90%
rename from docs/4.0/components/collapse.md
rename to docs/4.1/components/collapse.md
index 0e914a264..01ebd52b7 100644
--- a/docs/4.0/components/collapse.md
+++ b/docs/4.1/components/collapse.md
@@ -6,6 +6,10 @@ group: components
toc: true
---
+## How it works
+
+The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from it's current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
+
## Example
Click the buttons below to show and hide another element via class changes:
@@ -16,7 +20,7 @@ Click the buttons below to show and hide another element via class changes:
You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
-{% example html %}
+{% capture example %}
Link with href
@@ -30,14 +34,15 @@ You can use a link with the `href` attribute, or a button with the `data-target`
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Multiple targets
A `
` or `` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
Multiple `` or `` can show and hide an element if they each reference it with their `href` or `data-target` attribute
-{% example html %}
+{% capture example %}
Toggle first element
Toggle second element
@@ -59,18 +64,19 @@ Multiple `` or `` can show and hide an element if they each reference
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Accordion example
Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
-{% example html %}
-
+{% capture example %}
+
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Active
Add `.active` to items in the dropdown to **style them as active**.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Disabled
Add `.disabled` to items in the dropdown to **style them as disabled**.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Menu alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
-{% callout info %}
+{% capture callout %}
**Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
-{% example html %}
+{% capture example %}
Right-aligned menu
@@ -606,7 +613,8 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
Something else here
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Menu content
@@ -614,19 +622,20 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
Add a header to label sections of actions in any dropdown menu.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Dividers
Separate groups of related menu items with a divider.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Text
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Forms
Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Usage
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
-{% callout info %}
+{% capture callout %}
On touch-enabled devices, opening a dropdown adds empty (`$.noop`) `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
### Via data attributes
@@ -763,11 +778,12 @@ Call the dropdowns via JavaScript:
$('.dropdown-toggle').dropdown()
{% endhighlight %}
-{% callout info %}
+{% capture callout %}
##### `data-toggle="dropdown"` still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-{% endcallout %}
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
### Options
@@ -807,6 +823,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
'toggle'
Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs .
+
+ display
+ string
+ dynamic | static
+ By default, we use Popper.js for dynamic positioning. Disable this with `static`.
+
diff --git a/docs/4.0/components/forms.md b/docs/4.1/components/forms.md
similarity index 89%
rename from docs/4.0/components/forms.md
rename to docs/4.1/components/forms.md
index 59ce56bdc..0eb34bae9 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.1/components/forms.md
@@ -14,7 +14,7 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for
Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
For file inputs, swap the `.form-control` for `.form-control-file`.
-{% example html %}
+{% capture example %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Sizing
Set heights using classes like `.form-control-lg` and `.form-control-sm`.
-{% example html %}
+{% capture example %}
Large select
@@ -103,21 +107,37 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
Small select
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
+
+## Range Inputs
+
+Set horizontally scrollable range inputs using `.form-control-range`.
+
+{% capture example %}
+
+{% endcapture %}
+{% include example.html content=example %}
### Readonly
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
-{% example html %}
+{% capture example %}