Remove custom example plugin. (#25784)

2026-06-02 16:04:07 +03:00 · 2018-03-14 16:44:38 +01:00
parent 03b7f52e82
commit d01b4eb025
41 changed files with 923 additions and 695 deletions
@@ -10,12 +10,13 @@ toc: true

 Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).

-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <div class="alert alert-{{ color.name }}" role="alert">
  A simple {{ color.name }} alert—check it out!
 </div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% include callout-warning-color-assistive-technologies.md %}

@@ -23,25 +24,27 @@ Alerts are available for any length of text, as well as an optional dismiss butt

 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 %}
 <div class="alert alert-{{ color.name }}" role="alert">
  A simple {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
 </div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Additional content

 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

-{% example html %}
+{% capture example %}
 <div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>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.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}


 ### Dismissing
@@ -56,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 %}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## JavaScript behavior

@@ -30,31 +30,34 @@ 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 %}
 <button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
 </button>
-{% 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 %}
 <button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
 </button>
-{% 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 %}
 <span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% include callout-warning-color-assistive-technologies.md %}

@@ -62,16 +65,18 @@ Add any of the below mentioned modifier classes to change the appearance of a ba

 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 %}
 <span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Links

 Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.

-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
@@ -9,7 +9,7 @@ group: components

 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 %}
 <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
@@ -30,7 +30,8 @@ Separators are automatically added in CSS through [`::before`](https://developer
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Accessibility

@@ -10,13 +10,14 @@ 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 %}
 <div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% capture callout %}
 ##### Ensure correct `role` and provide a label
@@ -31,7 +32,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi

 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 %}
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
@@ -48,11 +49,12 @@ Combine sets of button groups into button toolbars for more complex components.
    <button type="button" class="btn btn-secondary">8</button>
  </div>
 </div>
-{% 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 %}
 <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
@@ -82,7 +84,8 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Sizing

@@ -118,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 %}
 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
@@ -133,7 +136,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Vertical variation

@@ -11,12 +11,13 @@ 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 %}
 <button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}

 <button type="button" class="btn btn-link">Link</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% include callout-warning-color-assistive-technologies.md %}

@@ -26,61 +27,68 @@ The `.btn` classes are designed to be used with the `<button>` element. However,

 When using button classes on `<a>` 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 %}
 <a class="btn btn-primary" href="#" role="button">Link</a>
 <button class="btn btn-primary" type="submit">Button</button>
 <input class="btn btn-primary" type="button" value="Input">
 <input class="btn btn-primary" type="submit" value="Submit">
 <input class="btn btn-primary" type="reset" value="Reset">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Outline buttons

 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% 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 %}
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-secondary btn-lg">Large button</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-secondary btn-sm">Small button</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 %}
 <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
 <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</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 `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.

-{% example html %}
+{% capture example %}
 <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
 <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Disabled state

 Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.

-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
 <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Disabled buttons using the `<a>` element behave a bit different:

@@ -88,10 +96,11 @@ Disabled buttons using the `<a>` 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 %}
+{% capture example %}
 <a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
 <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% capture callout %}
 ##### Link functionality caveat
@@ -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 `<button>`.

-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
 </button>
-{% 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 `<label>`.

-{% example html %}
+{% capture example %}
 <div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
@@ -142,7 +153,8 @@ Note that pre-checked buttons require you to manually add the `.active` class to
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Methods

@@ -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 %}
 <div class="card" style="width: 18rem;">
  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  <div class="card-body">
@@ -25,7 +25,8 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% 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 %}
 <div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
 </div>
-{% 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 `<h*>` tag. In the same way, l

 Subtitles are used by adding a `.card-subtitle` to a `<h*>` 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 %}
 <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
@@ -59,26 +61,28 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
    <a href="#" class="card-link">Another link</a>
  </div>
 </div>
-{% 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 %}
 <div class="card" style="width: 18rem;">
  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
 </div>
-{% 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 %}
 <div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
@@ -86,9 +90,10 @@ Create lists of content in a card with a flush list group.
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
@@ -99,13 +104,14 @@ Create lists of content in a card with a flush list group.
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
 </div>
-{% 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 %}
 <div class="card" style="width: 18rem;">
  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
@@ -122,13 +128,14 @@ Mix and match multiple content types to create the card you need, or throw every
    <a href="#" class="card-link">Another link</a>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Header and footer

 Add an optional header and/or footer within a card.

-{% example html %}
+{% capture example %}
 <div class="card">
  <div class="card-header">
    Featured
@@ -139,11 +146,12 @@ Add an optional header and/or footer within a card.
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Card headers can be styled by adding `.card-header` to `<h*>` elements.

-{% example html %}
+{% capture example %}
 <div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
@@ -152,9 +160,10 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="card">
  <div class="card-header">
    Quote
@@ -166,9 +175,10 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
    </blockquote>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="card text-center">
  <div class="card-header">
    Featured
@@ -182,7 +192,8 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
    2 days ago
  </div>
 </div>
-{% 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 %}
 <div class="row">
  <div class="col-sm-6">
    <div class="card">
@@ -213,13 +224,14 @@ Using the grid, wrap cards in columns and rows as needed.
    </div>
  </div>
 </div>
-{% 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 %}
 <div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
@@ -235,13 +247,14 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
    <a href="#" class="btn btn-primary">Button</a>
  </div>
 </div>
-{% 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 %}
 <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
@@ -249,13 +262,14 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% 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 %}
 <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
@@ -279,13 +293,14 @@ You can quickly change the text alignment of any card—in its entirety or speci
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% 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 %}
 <div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
@@ -306,9 +321,10 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
@@ -329,7 +345,8 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
 </div>
-{% 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 %}
 <div class="card mb-3">
  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  <div class="card-body">
@@ -356,13 +373,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
  </div>
  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
 </div>
-{% 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 %}
 <div class="card bg-dark text-white">
  <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
@@ -371,7 +389,8 @@ Turn an image into a card background and overlay your card's text. Depending on
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
 </div>
-{% 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 %}
 <div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
@@ -390,7 +409,8 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
 </div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% include callout-warning-color-assistive-technologies.md %}

@@ -398,7 +418,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version

 Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.

-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
@@ -407,13 +427,14 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
 </div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Mixins utilities

 You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.

-{% example html %}
+{% capture example %}
 <div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
@@ -422,7 +443,8 @@ You can also change the borders on the card header and footer as needed, and eve
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Card layout

@@ -432,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 %}
 <div class="card-group">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
@@ -459,11 +481,12 @@ Use card groups to render cards as a single, attached element with equal width a
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 When using card groups with footers, their content will automatically line up.

-{% example html %}
+{% capture example %}
 <div class="card-group">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
@@ -496,13 +519,14 @@ When using card groups with footers, their content will automatically line up.
    </div>
  </div>
 </div>
-{% 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 %}
 <div class="card-deck">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
@@ -529,11 +553,12 @@ Need a set of equal width and height cards that aren't attached to one another?
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Just like with card groups, card footers in decks will automatically line up.

-{% example html %}
+{% capture example %}
 <div class="card-deck">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
@@ -566,7 +591,8 @@ Just like with card groups, card footers in decks will automatically line up.
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Card columns

@@ -574,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 %}
 <div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
@@ -639,7 +665,8 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
    </div>
  </div>
 </div>
-{% 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.

@@ -26,7 +26,7 @@ Carousels don't automatically normalize slide dimensions. As such, you may need

 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 %}
 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
@@ -40,13 +40,14 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### With controls

 Adding in the previous and next controls:

-{% example html %}
+{% capture example %}
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
@@ -68,13 +69,14 @@ Adding in the previous and next controls:
    <span class="sr-only">Next</span>
  </a>
 </div>
-{% 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 %}
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
@@ -101,7 +103,8 @@ You can also add the indicators to the carousel, alongside the controls, too.
    <span class="sr-only">Next</span>
  </a>
 </div>
-{% 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 %}
 <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
@@ -184,7 +187,8 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
    <span class="sr-only">Next</span>
  </a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}


 ## Usage
@@ -16,7 +16,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 %}
 <p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
@@ -30,14 +30,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.
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Multiple targets

 A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
 Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute

-{% example html %}
+{% capture example %}
 <p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
@@ -59,13 +60,14 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference
    </div>
  </div>
 </div>
-{% 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 %}
 <div class="accordion" id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
@@ -111,7 +113,8 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Accessibility

@@ -30,7 +30,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.

 Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:

-{% example html %}
+{% capture example %}
 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
@@ -41,11 +41,12 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 And with `<a>` elements:

-{% example html %}
+{% capture example %}
 <div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
@@ -57,7 +58,8 @@ And with `<a>` elements:
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 The best part is you can do this with any button variant, too:

@@ -539,7 +541,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the

 Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.

-{% example html %}
+{% capture example %}
 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
@@ -550,42 +552,46 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
 </div>
-{% 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 %}
 <div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Active

 Add `.active` to items in the dropdown to **style them as active**.

-{% example html %}
+{% capture example %}
 <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Disabled

 Add `.disabled` to items in the dropdown to **style them as disabled**.

-{% example html %}
+{% capture example %}
 <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Menu alignment

@@ -596,7 +602,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 {% endcapture %}
 {% include callout.html content=callout type="info" %}

-{% example html %}
+{% capture example %}
 <div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
@@ -607,7 +613,8 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Menu content

@@ -615,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 %}
 <div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Dividers

 Separate groups of related menu items with a divider.

-{% example html %}
+{% capture example %}
 <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
@@ -635,13 +643,14 @@ Separate groups of related menu items with a divider.
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
 </div>
-{% 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 %}
 <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
@@ -650,13 +659,14 @@ Place any freeform text within a dropdown menu with text and use [spacing utilit
    And this is more example text.
  </p>
 </div>
-{% 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 %}
 <div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
@@ -679,9 +689,10 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
@@ -699,13 +710,14 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Dropdown options

 Use `data-offset` or `data-reference` to change the location of the dropdown.

-{% example html %}
+{% capture example %}
 <div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
@@ -731,7 +743,8 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Usage

@@ -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 %}
 <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
@@ -31,7 +31,8 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Form controls

@@ -39,7 +40,7 @@ Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are st

 Be sure to explore our [custom forms](#custom-forms) to further style `<select>`s.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
@@ -70,30 +71,33 @@ Be sure to explore our [custom forms](#custom-forms) to further style `<select>`
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 For file inputs, swap the `.form-control` for `.form-control-file`.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Sizing

 Set heights using classes like `.form-control-lg` and `.form-control-sm`.

-{% example html %}
+{% capture example %}
 <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 <input class="form-control" type="text" placeholder="Default input">
 <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <select class="form-control form-control-lg">
  <option>Large select</option>
 </select>
@@ -103,34 +107,37 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 <select class="form-control form-control-sm">
  <option>Small select</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Range Inputs

 Set horizontally scrollable range inputs using `.form-control-range`.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
 </form>
-{% endexample %}
+{% 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 %}
 <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Readonly plain text

 If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
@@ -145,9 +152,10 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
@@ -159,7 +167,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Checkboxes and radios

@@ -173,7 +182,7 @@ Checkboxes and radios use are built to support HTML-based form validation and pr

 By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

-{% example html %}
+{% capture example %}
 <div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
@@ -186,9 +195,10 @@ By default, any number of checkboxes and radios that are immediate sibling will
    Disabled checkbox
  </label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
@@ -207,13 +217,14 @@ By default, any number of checkboxes and radios that are immediate sibling will
    Disabled radio
  </label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Inline

 Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

-{% example html %}
+{% capture example %}
 <div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
@@ -226,9 +237,10 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
@@ -241,20 +253,22 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Without labels

 Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).

-{% example html %}
+{% capture example %}
 <div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
 </div>
 <div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Layout

@@ -264,7 +278,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for

 The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `<fieldset>`s, `<div>`s, or nearly any other element.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
@@ -275,13 +289,14 @@ The `.form-group` class is the easiest way to add some structure to forms. It pr
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Form grid

 More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

-{% example html %}
+{% capture example %}
 <form>
  <div class="row">
    <div class="col">
@@ -292,13 +307,14 @@ More complex forms can be built using our grid classes. Use these for form layou
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 #### Form row

 You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row">
    <div class="col">
@@ -309,11 +325,12 @@ You may also swap `.row` for `.form-row`, a variation of our standard grid row t
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 More complex layouts can also be created with the grid system.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row">
    <div class="form-group col-md-6">
@@ -360,7 +377,8 @@ More complex layouts can also be created with the grid system.
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 #### Horizontal form

@@ -368,7 +386,7 @@ Create horizontal forms with the grid by adding the `.row` class to form groups

 At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
@@ -424,13 +442,14 @@ At times, you maybe need to use margin or padding utilities to create that perfe
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ##### Horizontal form label sizing

 Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
@@ -451,13 +470,14 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 #### Column sizing

 As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row` or `.form-row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-7`.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row">
    <div class="col-7">
@@ -471,13 +491,14 @@ As shown in the previous examples, our grid system allows you to place any numbe
    </div>
  </div>
 </form>
-{% endexample html %}
+{% endcapture %}
+{% include example.html content=example %}

 #### Auto-sizing

 The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row align-items-center">
    <div class="col-auto">
@@ -506,11 +527,12 @@ The example below uses a flexbox utility to vertically center the contents and c
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 You can then remix that once again with size-specific column classes.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
@@ -539,11 +561,12 @@ You can then remix that once again with size-specific column classes.
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 And of course [custom form controls](#custom-forms) are supported.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
@@ -566,7 +589,8 @@ And of course [custom form controls](#custom-forms) are supported.
    </div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Inline forms

@@ -578,7 +602,7 @@ Use the `.form-inline` class to display a series of labels, form controls, and b

 You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.

-{% example html %}
+{% capture example %}
 <form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
@@ -600,11 +624,12 @@ You may need to manually address the width and alignment of individual form cont

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Custom form controls and selects are also supported.

-{% example html %}
+{% capture example %}
 <form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
@@ -621,7 +646,8 @@ Custom form controls and selects are also supported.

  <button type="submit" class="btn btn-primary my-1">Submit</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% capture callout %}
 ##### Alternatives to hidden labels
@@ -642,17 +668,18 @@ Help text should be explicitly associated with the form control it relates to us

 Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.

-{% example html %}
+{% capture example %}
 <label for="inputPassword5">Password</label>
 <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
 <small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </small>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class.

-{% example html %}
+{% capture example %}
 <form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
@@ -662,7 +689,8 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
    </small>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Disabled forms

@@ -674,7 +702,7 @@ Add the `disabled` boolean attribute on an input to prevent user interactions an

 Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.

-{% example html %}
+{% capture example %}
 <form>
  <fieldset disabled>
    <div class="form-group">
@@ -696,7 +724,8 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% capture callout %}
 ##### Caveat with anchors
@@ -742,7 +771,7 @@ For custom Bootstrap form validation messages, you'll need to add the `novalidat

 When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.

-{% example html %}
+{% capture example %}
 <form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
@@ -829,7 +858,8 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
  }, false);
 })();
 </script>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Browser defaults

@@ -837,7 +867,7 @@ Not interested in custom validation feedback messages or writing JavaScript to c

 While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
@@ -882,13 +912,14 @@ While these feedback styles cannot be styled with CSS, you can still customize t
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Server side

 We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

-{% example html %}
+{% capture example %}
 <form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
@@ -954,13 +985,14 @@ We recommend using client side validation, but in case you require server side,
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Supported elements

 Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.

-{% example html %}
+{% capture example %}
 <form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
@@ -994,13 +1026,14 @@ Our example forms show native textual `<input>`s above, but form validation styl
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Tooltips

 If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

-{% example html %}
+{% capture example %}
 <form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
@@ -1055,7 +1088,8 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Custom forms

@@ -1073,12 +1107,13 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h

 #### Checkboxes

-{% example html %}
+{% capture example %}
 <div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

@@ -1097,7 +1132,7 @@ $('.your-checkbox').prop('indeterminate', true)

 #### Radios

-{% example html %}
+{% capture example %}
 <div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
@@ -1106,11 +1141,12 @@ $('.your-checkbox').prop('indeterminate', true)
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 #### Inline

-{% example html %}
+{% capture example %}
 <div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
@@ -1119,13 +1155,14 @@ $('.your-checkbox').prop('indeterminate', true)
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 #### Disabled

 Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.

-{% example html %}
+{% capture example %}
 <div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
@@ -1135,24 +1172,26 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Select menu

 Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.

-{% example html %}
+{% capture example %}
 <select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 You may also choose from small and large custom selects to match our similarly sized text inputs.

-{% example html %}
+{% capture example %}
 <select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
@@ -1166,63 +1205,70 @@ You may also choose from small and large custom selects to match our similarly s
  <option value="2">Two</option>
  <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 The `multiple` attribute is also supported:

-{% example html %}
+{% capture example %}
 <select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 As is the `size` attribute:

-{% example html %}
+{% capture example %}
 <select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Range

 Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

-{% example html %}
+{% capture example %}
 <label for="customRange1">Example range</label>
 <input type="range" class="custom-range" id="customRange1">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

-{% example html %}
+{% capture example %}
 <label for="customRange2">Example range</label>
 <input type="range" class="custom-range" min="0" max="5" id="customRange2">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

-{% example html %}
+{% capture example %}
 <label for="customRange3">Example range</label>
 <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### File browser

 The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.

-{% example html %}
+{% capture example %}
 <div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.

@@ -1239,11 +1285,12 @@ $custom-file-text: (

 Here's `lang(es)` in action on the custom file input for a Spanish translation:

-{% example html %}
+{% capture example %}
 <div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.
@@ -10,7 +10,7 @@ toc: true

 Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
@@ -49,7 +49,8 @@ Place one add-on or button on either side of an input. You may also place one on
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Sizing

@@ -57,7 +58,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w

 **Sizing on the individual input group elements isn't supported.**

-{% example html %}
+{% capture example %}
 <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
@@ -78,13 +79,14 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Checkboxes and radios

 Place any checkbox or radio option within an input group's addon instead of text.

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
@@ -102,13 +104,14 @@ Place any checkbox or radio option within an input group's addon instead of text
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Multiple inputs

 While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.

-{% example html %}
+{% capture example %}
 <div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">First and last name</span>
@@ -116,13 +119,14 @@ While multiple `<input>`s are supported visually, validation styles are only ava
  <input type="text" class="form-control">
  <input type="text" class="form-control">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Multiple addons

 Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
@@ -138,11 +142,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
    <span class="input-group-text">0.00</span>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Button addons

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
@@ -172,11 +177,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Buttons with dropdowns

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
@@ -204,11 +210,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Segmented buttons

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
@@ -242,7 +249,8 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Custom forms

@@ -250,7 +258,7 @@ Input groups include support for custom selects and custom file inputs. Browser

 ### Custom select

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
@@ -298,11 +306,12 @@ Input groups include support for custom selects and custom file inputs. Browser
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Custom file input

-{% example html %}
+{% capture example %}
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Upload</span>
@@ -342,7 +351,8 @@ Input groups include support for custom selects and custom file inputs. Browser
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Accessibility

@@ -7,7 +7,7 @@ group: components

 A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

-{% example html %}
+{% capture example %}
 <div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
@@ -17,15 +17,17 @@ A lightweight, flexible component that can optionally extend the entire viewport
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.

-{% example html %}
+{% capture example %}
 <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
@@ -10,7 +10,7 @@ toc: true

 The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

-{% example html %}
+{% capture example %}
 <ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -18,13 +18,14 @@ The most basic list group is an unordered list with list items and the proper cl
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Active items

 Add `.active` to a `.list-group-item` to indicate the current active selection.

-{% example html %}
+{% capture example %}
 <ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -32,13 +33,14 @@ Add `.active` to a `.list-group-item` to indicate the current active selection.
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Disabled items

 Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links).

-{% example html %}
+{% capture example %}
 <ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -46,7 +48,8 @@ Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Links and buttons

@@ -54,7 +57,7 @@ Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, di

 Be sure to **not use the standard `.btn` classes here**.

-{% example html %}
+{% capture example %}
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
@@ -64,11 +67,12 @@ Be sure to **not use the standard `.btn` classes here**.
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 With `<button>`s, you can also make use of the `disabled` attribute instead of the `.disabled` class. Sadly, `<a>`s don't support the disabled attribute.

-{% example html %}
+{% capture example %}
 <div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
@@ -78,13 +82,14 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Flush

 Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

-{% example html %}
+{% capture example %}
 <ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -92,31 +97,34 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Contextual classes

 Use contextual classes to style list items with a stateful background and color.

-{% example html %}
+{% capture example %}
 <ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>

  {% for color in site.data.theme-colors %}
  <li class="list-group-item list-group-item-{{ color.name }}">A simple {{ color.name }} list group item</li>{% endfor %}
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.

-{% example html %}
+{% capture example %}
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

  {% for color in site.data.theme-colors %}
  <a href="#" class="list-group-item list-group-item-action list-group-item-{{ color.name }}">A simple {{ color.name }} list group item</a>{% endfor %}
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% include callout-warning-color-assistive-technologies.md %}

@@ -124,7 +132,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o

 Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).

-{% example html %}
+{% capture example %}
 <ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
@@ -139,13 +147,14 @@ Add badges to any list group item to show unread counts, activity, and more with
    <span class="badge badge-primary badge-pill">1</span>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Custom content

 Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).

-{% example html %}
+{% capture example %}
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
@@ -172,7 +181,8 @@ Add nearly any HTML within, even for linked list groups like the one below, with
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## JavaScript behavior

@@ -400,7 +400,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different

 Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.

-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
@@ -433,7 +433,8 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
    </div>
  </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% highlight js %}
 $('#exampleModal').on('show.bs.modal', function (event) {
@@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from

 Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -68,7 +68,8 @@ Here's an example of all the sub-components included in a responsive light-theme
    </form>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.

@@ -76,7 +77,7 @@ This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilit

 The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

-{% example html %}
+{% capture example %}
 <!-- As a link -->
 <nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
@@ -86,20 +87,22 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 <nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

-{% example html %}
+{% capture example %}
 <!-- Just an image -->
 <nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <!-- Image and text -->
 <nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
@@ -107,7 +110,8 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
    Bootstrap
  </a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Nav

@@ -115,7 +119,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas

 Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -138,11 +142,12 @@ Active states—with `.active`—to indicate the current page can be applied dir
    </ul>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -157,11 +162,12 @@ And because we use classes for our navs, you can avoid the list-based approach e
    </div>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -191,24 +197,26 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
    </ul>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Forms

 Place various form controls and components within a navbar with `.form-inline`.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Align the contents of your inline forms with utilities as needed.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
@@ -216,11 +224,12 @@ Align the contents of your inline forms with utilities as needed.
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Input groups work, too:

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
@@ -231,34 +240,37 @@ Input groups work, too:
    </div>
  </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Text

 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Mix and match with other components and utilities as needed.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -281,7 +293,8 @@ Mix and match with other components and utilities as needed.
    </span>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Color schemes

@@ -391,23 +404,25 @@ Theming the navbar has never been easier thanks to the combination of theming cl

 Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).

-{% example html %}
+{% capture example %}
 <div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Placement

@@ -415,29 +430,33 @@ Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/uti

 Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**.

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Responsive behaviors

@@ -451,7 +470,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el

 With no `.navbar-brand` shown in lowest breakpoint:

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
@@ -475,11 +494,12 @@ With no `.navbar-brand` shown in lowest breakpoint:
    </form>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 With a brand name shown on the left and toggler on the right:

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -504,11 +524,12 @@ With a brand name shown on the left and toggler on the right:
    </form>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 With a toggler on the left and brand name on the right:

-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
@@ -533,13 +554,14 @@ With a toggler on the left and brand name on the right:
    </form>
  </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### External content

 Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!

-{% example html %}
+{% capture example %}
 <div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
@@ -553,4 +575,5 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
    </button>
  </nav>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
@@ -17,7 +17,7 @@ The base `.nav` component does not include any `.active` state. The following ex
 {% endcapture %}
 {% include callout.html content=callout type="info" %}

-{% example html %}
+{% capture example %}
 <ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -32,18 +32,20 @@ The base `.nav` component does not include any `.active` state. The following ex
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.

-{% example html %}
+{% capture example %}
 <nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Available styles

@@ -55,7 +57,7 @@ Change the horizontal alignment of your nav with [flexbox utilities]({{ site.bas

 Centered with `.justify-content-center`:

-{% example html %}
+{% capture example %}
 <ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -70,11 +72,12 @@ Centered with `.justify-content-center`:
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Right-aligned with `.justify-content-end`:

-{% example html %}
+{% capture example %}
 <ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -89,13 +92,14 @@ Right-aligned with `.justify-content-end`:
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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`).

-{% example html %}
+{% capture example %}
 <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -110,24 +114,26 @@ Stack your navigation by changing the flex item direction with the `.flex-column
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 As always, vertical navigation is possible without `<ul>`s, too.

-{% example html %}
+{% capture example %}
 <nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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).

-{% example html %}
+{% capture example %}
 <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -142,13 +148,14 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Pills

 Take that same HTML, but use `.nav-pills` instead:

-{% example html %}
+{% capture example %}
 <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -163,13 +170,14 @@ Take that same HTML, but use `.nav-pills` instead:
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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.

-{% example html %}
+{% capture example %}
 <ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -184,33 +192,36 @@ Force your `.nav`'s contents to extend the full available width one of two modif
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.

-{% example html %}
+{% capture example %}
 <nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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.

-{% example html %}
+{% capture example %}
 <nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.

-{% example html %}
+{% capture example %}
 <nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
@@ -218,19 +229,21 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
 </nav>

-{% endexample %}
+{% 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.

-{% example html %}
+{% capture example %}
 <nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Regarding accessibility

@@ -244,7 +257,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin

 ### Tabs with dropdowns

-{% example html %}
+{% capture example %}
 <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -266,11 +279,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Pills with dropdowns

-{% example html %}
+{% capture example %}
 <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
@@ -292,7 +306,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## JavaScript behavior

@@ -12,7 +12,7 @@ We use a large block of connected links for our pagination, making links hard to

 In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `<nav>` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.

-{% example html %}
+{% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
@@ -22,13 +22,14 @@ In addition, as pages likely have more than one such navigation section, it's ad
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Working with icons

 Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility.

-{% example html %}
+{% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
@@ -48,7 +49,8 @@ Looking to use an icon or symbol in place of text for some pagination links? Be
    </li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Disabled and active states

@@ -56,7 +58,7 @@ Pagination links are customizable for different circumstances. Use `.disabled` f

 While the `.disabled` class uses `pointer-events: none` to _try_ to disable the link functionality of `<a>`s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, you should always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality.

-{% example html %}
+{% capture example %}
 <nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
@@ -72,11 +74,12 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
    </li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.

-{% example html %}
+{% capture example %}
 <nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
@@ -95,13 +98,14 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
    </li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Sizing

 Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.

-{% example html %}
+{% capture example %}
 <nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
@@ -111,9 +115,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
@@ -123,13 +128,14 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Alignment

 Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).

-{% example html %}
+{% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
@@ -143,9 +149,10 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b
    </li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

-{% example html %}
+{% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
@@ -159,4 +166,5 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b
    </li>
  </ul>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
@@ -47,9 +47,10 @@ $(function () {

 ## Example

-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ### Four directions

@@ -102,9 +103,10 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag
 {% endcapture %}
 {% include callout.html content=callout type="danger" %}

-{% example html %}
+{% capture example %}
 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 {% highlight js %}
 $('.popover-dismiss').popover({
@@ -118,11 +120,12 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot

 For disabled popover triggers, you may also prefer `data-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.

-{% example html %}
+{% capture example %}
 <span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
 </span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Usage

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

-{% example html %}
+{% capture example %}
 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
@@ -33,44 +33,48 @@ Put that all together, and you have the following examples.
 <div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

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

-{% example html %}
+{% capture example %}
 <div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Labels

 Add labels to your progress bars by placing text within the `.progress-bar`.

-{% example html %}
+{% capture example %}
 <div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Height

 We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.

-{% example html %}
+{% capture example %}
 <div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 <div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Backgrounds

 Use background utility classes to change the appearance of individual progress bars.

-{% example html %}
+{% capture example %}
 <div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
@@ -83,25 +87,27 @@ Use background utility classes to change the appearance of individual progress b
 <div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Multiple bars

 Include multiple progress bars in a progress component if you need.

-{% example html %}
+{% capture example %}
 <div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Striped

 Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.

-{% example html %}
+{% capture example %}
 <div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
@@ -117,7 +123,8 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
 <div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

 ## Animated stripes

@@ -117,11 +117,12 @@ Additionally, do not rely solely on `hover` as the trigger for your tooltip, as
 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 `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.

 <div class="tooltip-demo">
-{% example html %}
+{% capture example %}
 <span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
 </span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>

 ### Options