--- /dev/null
+{%- comment -%}
+Usage: {% include example.html content=markup %},
+where content is a capture with the HTML content
+id - null (default)
+class - "bd-example" (default)
+optional: hide_preview - disabled (default)
+optional: hide_markup - disabled (default)
+{%- endcomment -%}
+
+{%- assign preview_id = include.id -%}
+{%- assign preview_class = include.class -%}
+
+{%- if include.hide_preview == null -%}
+<div{% if preview_id %} id="{{ preview_id }}"{% endif %} class="bd-example{% if preview_class %} {{ preview_class }}{% endif %}">
+ {{- include.content -}}
+</div>
+{%- endif -%}
+
+{%- if include.hide_markup == null -%}
+ {%- highlight html -%}
+ {{- include.content | replace: 'data-src="holder.js', 'src="...' -}}
+ {%- endhighlight -%}
+{%- endif -%}
+++ /dev/null
-module Jekyll
- module Tags
- class ExampleBlock < Liquid::Block
- include Liquid::StandardFilters
-
- # The regular expression syntax checker. Start with the language specifier.
- # Follow that by zero or more space separated options that take one of three
- # forms: name, name=value, or name="<quoted list>"
- #
- # <quoted list> is a space-separated list of numbers
- SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+\w+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
-
- def initialize(tag_name, markup, tokens)
- super
- if markup.strip =~ SYNTAX
- @lang = $1.downcase
- @options = {}
- if defined?($2) && $2 != ''
- # Split along 3 possible forms -- key="<quoted list>", key=value, or key
- $2.scan(/(?:\w+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
- key, value = opt.split('=')
- # If a quoted list, convert to array
- if value && value.include?("\"")
- value.gsub!(/"/, "")
- value = value.split
- end
- @options[key.to_sym] = value || true
- end
- end
- @options[:linenos] = false
- else
- raise SyntaxError.new <<-eos
-Syntax Error in tag 'example' while parsing the following markup:
-
- #{markup}
-
-Valid syntax: example <lang> [id=foo]
-eos
- end
- end
-
- def render(context)
- prefix = context["highlighter_prefix"] || ""
- suffix = context["highlighter_suffix"] || ""
- code = super.to_s.strip
-
- output = case context.registers[:site].highlighter
-
- when 'rouge'
- render_rouge(code)
- end
-
- rendered_output = example(code) + add_code_tag(output)
- prefix + rendered_output + suffix
- end
-
- def example(output)
- "<div class=\"bd-example\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n#{output}\n</div>"
- end
-
- def remove_holderjs(code)
- code = code.gsub(/data-src="holder.js.+?"/, 'src="..."')
- end
-
- def remove_example_classes(code)
- # Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also
- # remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too.
- # To fix the bug, replace `(?=")` with `(?=("|\ ))`.
- code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "")
- # Find empty class attributes after the previous regex and remove those too.
- code = code.gsub(/\ class=""/, "")
- end
-
- def render_rouge(code)
- require 'rouge'
- formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
- lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
- code = remove_holderjs(code)
- code = remove_example_classes(code)
- code = formatter.format(lexer.lex(code))
- "<div class=\"highlight\"><pre>#{code}</pre></div>"
- end
-
- def add_code_tag(code)
- # Add nested <code> tags to code blocks
- code = code.sub(/<pre>\n*/,'<pre><code class="language-' + @lang.to_s.gsub("+", "-") + '" data-lang="' + @lang.to_s + '">')
- code = code.sub(/\n*<\/pre>/,"</code></pre>")
- code.strip
- end
-
- end
- end
-end
-
-Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)
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 %}
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
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">×</span>
</button>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## JavaScript behavior
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 %}
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 %}
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>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Accessibility
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
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>
<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>
<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
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>
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Vertical variation
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 %}
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:
- 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
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
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
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Methods
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">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Content types
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
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>
<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>
<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
<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">
<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
<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">
<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
</blockquote>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<div class="card text-center">
<div class="card-header">
Featured
2 days ago
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sizing
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">
</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>
<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>
<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>
<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">
<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">
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Images
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">
</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">
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Card styles
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>
<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 %}
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>
<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">
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Card layout
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">
</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">
</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">
</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">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Card columns
**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">
</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.
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">
</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">
<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>
<span class="sr-only">Next</span>
</a>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### With captions
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">
<span class="sr-only">Next</span>
</a>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Usage
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
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>
</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">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Accessibility
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
<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
<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:
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
<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
{% 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
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Menu content
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>
<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.
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">
<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>
</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">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Usage
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>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Form controls
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>
<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>
<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>
</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>
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Checkboxes and radios
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">
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">
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>
<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>
<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
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>
<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">
</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">
</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">
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
#### Horizontal form
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>
</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>
</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">
</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">
</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">
</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">
</div>
</div>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Inline forms
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">
<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">
<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
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>
</small>
</div>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Disabled forms
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
-{% example html %}
+{% capture example %}
<form>
<fieldset disabled>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
{% capture callout %}
##### Caveat with anchors
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">
}, false);
})();
</script>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Browser defaults
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">
</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">
</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>
<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">
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Custom forms
#### 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).
#### 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>
<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>
<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>
<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>
<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.
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.
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>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sizing
**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>
</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">
</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>
<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>
<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>
<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>
</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>
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Custom forms
### 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>
<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>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Accessibility
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>
<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 %}
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>
<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>
<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>
<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
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
<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
<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>
<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 %}
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
<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">
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## JavaScript behavior
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>
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
{% highlight js %}
$('#exampleModal').on('show.bs.modal', function (event) {
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">
</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.
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>
<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="#">
Bootstrap
</a>
</nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Nav
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">
</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">
</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">
</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">
<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">
</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">
</span>
</div>
</nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Color schemes
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
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
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>
</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">
</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>
</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">
</button>
</nav>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
{% 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>
<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
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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
### Tabs with dropdowns
-{% example html %}
+{% capture example %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
<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>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## JavaScript behavior
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>
<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">
</li>
</ul>
</nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Disabled and active states
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">
</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">
</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">
<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">
<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">
</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">
</li>
</ul>
</nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## 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
{% 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({
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
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>
<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>
<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>
<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
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
Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
-{% example html %}
+{% capture example %}
For example, <code><section></code> should be wrapped as inline.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Code blocks
Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
-{% example html %}
+{% capture example %}
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Variables
For indicating variables use the `<var>` tag.
-{% example html %}
+{% capture example %}
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## User input
Use the `<kbd>` to indicate input that is typically entered via keyboard.
-{% example html %}
+{% capture example %}
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Sample output
For indicating sample output from a program use the `<samp>` tag.
-{% example html %}
+{% capture example %}
<samp>This text is meant to be treated as sample output from a computer program.</samp>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
-{% example html %}
+{% capture example %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
-{% example html %}
+{% capture example %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
-{% example html %}
+{% capture example %}
<table class="table">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
-{% example html %}
+{% capture example %}
<table class="table table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Table head options
Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.
-{% example html %}
+{% capture example %}
<table class="table">
<thead class="thead-dark">
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Striped rows
Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
-{% example html %}
+{% capture example %}
<table class="table table-striped">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<table class="table table-striped table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Bordered table
Add `.table-bordered` for borders on all sides of the table and cells.
-{% example html %}
+{% capture example %}
<table class="table table-bordered">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<table class="table table-bordered table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Borderless table
Add `.table-borderless` for a table without borders.
-{% example html %}
+{% capture example %}
<table class="table table-borderless">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
`.table-borderless` can also be used on dark tables.
-{% example html %}
+{% capture example %}
<table class="table table-borderless table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
-{% example html %}
+{% capture example %}
<table class="table table-hover">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<table class="table table-hover table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Small table
Add `.table-sm` to make tables more compact by cutting cell padding in half.
-{% example html %}
+{% capture example %}
<table class="table table-sm">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<table class="table table-sm table-dark">
<thead>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Contextual classes
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
-{% example html %}
+{% capture example %}
<table class="table">
<caption>List of users</caption>
<thead>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Responsive tables
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
-{% example html %}
+{% capture example %}
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Customizing headings
Make a paragraph stand out by adding `.lead`.
-{% example html %}
+{% capture example %}
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Inline text elements
Styling for common inline HTML5 elements.
-{% example html %}
+{% capture example %}
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring.
Add `.initialism` to an abbreviation for a slightly smaller font-size.
-{% example html %}
+{% capture example %}
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Blockquotes
For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
-{% example html %}
+{% capture example %}
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Naming a source
Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
-{% example html %}
+{% capture example %}
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Alignment
Use text utilities as needed to change the alignment of your blockquote.
-{% example html %}
+{% capture example %}
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Lists
Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
-{% example html %}
+{% capture example %}
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Inline
Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
-{% example html %}
+{% capture example %}
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Description list alignment
Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
-{% example html %}
+{% capture example %}
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
</dl>
</dd>
</dl>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Responsive typography
**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col-sm">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Variable width content
Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Responsive classes
For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Stacked to horizontal
Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Mix and match
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Alignment
### Vertical alignment
<div class="bd-example-row bd-example-row-flex-cols">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row align-items-start">
<div class="col">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
<div class="bd-example-row bd-example-row-flex-cols">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col align-self-start">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Horizontal alignment
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### No gutters
In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
You may also apply this break at specific breakpoints with our [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Reordering
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="container">
<div class="row">
<div class="col order-last">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Offsetting columns
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/).
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
#### Margin utilities
With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Nesting
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
<div class="bd-example-row">
-{% example html %}
+{% capture example %}
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Sass mixins
}
{% endhighlight %}
-{% example html %}
+{% capture example %}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Customizing the grid
Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/).
-{% example html %}
+{% capture example %}
<div class="media">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
{% capture callout %}
##### Flexbug #12: Inline elements aren't treated as flex items
Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.
-{% example html %}
+{% capture example %}
<div class="media">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
</div>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Alignment
Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content.
-{% example html %}
+{% capture example %}
<div class="media">
<img class="align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<div class="media">
<img class="align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<div class="media">
<img class="align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Order
Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing).
-{% example html %}
+{% capture example %}
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
</div>
<img class="ml-3" data-src="holder.js/64x64" alt="Generic placeholder image">
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Media list
Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your `<ul>` or `<ol>`, add the `.list-unstyled` to remove any browser default list styles, and then apply `.media` to your `<li>`s. As always, use spacing utilities wherever needed to fine tune.
-{% example html %}
+{% capture example %}
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
</div>
</li>
</ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### Additive
<div class="bd-example-border-utils">
-{% example html %}
+{% capture example %}
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
### Subtractive
<div class="bd-example-border-utils bd-example-border-utils-0">
-{% example html %}
+{% capture example %}
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Border color
Change the border color using utilities built on our theme colors.
<div class="bd-example-border-utils">
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
<span class="border border-{{ color.name }}"></span>{% endfor %}
<span class="border border-white"></span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
</div>
## Border-radius
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
-{% example html %}
+{% capture example %}
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
**Be sure to include text for screen readers**, as we've done with `aria-label`.
-{% example html %}
+{% capture example %}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Color
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
<p class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">.text-{{ color.name }}</p>{% endfor %}
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no link styling.**
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
<p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Background color
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
<div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Background gradient
When `$enable-gradients` is set to true, you'll be able to use `.bg-gradient-` utility classes. **By default, `$enable-gradients` is disabled and the example below is intentionally broken.** This is done for easier customization from the moment you start using Bootstrap. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more.
-{% example html %}
+{% capture example %}
{% for color in site.data.theme-colors %}
<div class="p-3 mb-2 bg-gradient-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-gradient-{{ color.name }}</div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
{% capture callout %}
#### Dealing with specificity
## Examples
-{% example html %}
+{% capture example %}
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Hiding elements
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
| Visible only on xl | `.d-none .d-xl-block` |
-{% example html %}
+{% capture example %}
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Display in print
The print and display classes can be combined.
-{% example html %}
+{% capture example %}
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` and an aspect ratio. The `.embed-responsive-item` isn't strictly required, but we encourage it.
-{% example html %}
+{% capture example %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Aspect ratios
Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
-{% example html %}
+{% capture example %}
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
-{% example html %}
+{% capture example %}
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
-{% example html %}
+{% capture example %}
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Responsive variations also exist for `flex-direction`.
Use the `.flex-fill` class on a series of sibling elements to force them into equal widths while taking up all available horizontal space. [Especially useful for equal-width, or justified, navigation.]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/#working-with-flex-utilities)
-{% example html %}
+{% capture example %}
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Responsive variations also exist for `flex-fill`.
**Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
-{% example html %}
+{% capture example %}
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
### With align-items
Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
-{% example html %}
+{% capture example %}
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Wrap
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed.
-{% example html %}
+{% capture example %}
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Responsive variations also exist for `order`.
Toggle a float with a class:
-{% example html %}
+{% capture example %}
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Mixins
Responsive variations also exist for each `float` value.
-{% example html %}
+{% capture example %}
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Here are all the support classes;
Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text.
-{% example html %}
+{% capture example %}
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
{%- endcomment -%}
-{% example html %}
+{% capture example %}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
{% highlight scss %}
// Usage as a mixin
Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
-{% example html %}
+{% capture example %}
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
-{% example html %}
+{% capture example %}
<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
-{% example html %}
+{% capture example %}
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Easily realign text to components with text alignment classes.
-{% example html %}
+{% capture example %}
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
-{% example html %}
+{% capture example %}
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Text wrapping and overflow
Prevent text from wrapping with a `.text-nowrap` class.
-{% example html %}
+{% capture example %}
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
-{% example html %}
+{% capture example %}
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
## Text transform
Transform text in components with text capitalization classes.
-{% example html %}
+{% capture example %}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
Quickly change the weight (boldness) of text or italicize text.
-{% example html %}
+{% capture example %}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
With inline elements:
-{% example html %}
+{% capture example %}
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
With table cells:
-{% example html %}
+{% capture example %}
<table style="height: 100px;">
<tbody>
<tr>
</tr>
</tbody>
</table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
projects / thirdparty / bootstrap.git / commitdiff
