rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Remove custom example plugin. (#25784)

Browse Source
This commit is contained in:
m5o 2018-03-14 16:44:38 +01:00 committed by XhmikosR
parent 03b7f52e82
commit d01b4eb025
41 changed files with 923 additions and 695 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
_includes/example.html Normal file
View File

@ -0,0 +1,23 @@
{%- 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 -%}

95
_plugins/example.rb
View File

@ -1,95 +0,0 @@
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)

20
docs/4.0/components/alerts.md
View File

@ -10,12 +10,13 @@ toc: true
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
A simple {{ color.name }} alert—check it out!
</div>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% include callout-warning-color-assistive-technologies.md %}
@ -23,25 +24,27 @@ Alerts are available for any length of text, as well as an optional dismiss butt
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
A simple {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Additional content
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
{% example html %}
{% capture example %}
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Dismissing
@ -56,14 +59,15 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
You can see this in action with a live demo:
{% example html %}
{% capture example %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## JavaScript behavior

25
docs/4.0/components/badge.md
View File

@ -30,31 +30,34 @@ Badges scale to match the size of the immediate parent element by using relative
Badges can be used as part of links or buttons to provide a counter.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% include callout-warning-color-assistive-technologies.md %}
@ -62,16 +65,18 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Links
Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}

5
docs/4.0/components/breadcrumb.md
View File

@ -9,7 +9,7 @@ group: components
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
{% example html %}
{% capture example %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
@ -30,7 +30,8 @@ Separators are automatically added in CSS through [`::before`](https://developer
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Accessibility

20
docs/4.0/components/button-group.md
View File

@ -10,13 +10,14 @@ toc: true
Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
{% example html %}
{% capture example %}
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% capture callout %}
##### Ensure correct `role` and provide a label
@ -31,7 +32,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
{% example html %}
{% capture example %}
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
@ -48,11 +49,12 @@ Combine sets of button groups into button toolbars for more complex components.
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
{% example html %}
{% capture example %}
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
@ -82,7 +84,8 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Sizing
@ -118,7 +121,7 @@ Instead of applying button sizing classes to every button in a group, just add `
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
{% example html %}
{% capture example %}
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
@ -133,7 +136,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Vertical variation

60
docs/4.0/components/buttons.md
View File

@ -11,12 +11,13 @@ toc: true
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
<button type="button" class="btn btn-link">Link</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% include callout-warning-color-assistive-technologies.md %}
@ -26,61 +27,68 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
When using button classes on `<a>` elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a `role="button"` to appropriately convey their purpose to assistive technologies such as screen readers.
{% example html %}
{% capture example %}
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Sizes
Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
{% example html %}
{% capture example %}
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Disabled state
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Disabled buttons using the `<a>` element behave a bit different:
@ -88,10 +96,11 @@ Disabled buttons using the `<a>` element behave a bit different:
- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all.
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
{% example html %}
{% capture example %}
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% capture callout %}
##### Link functionality caveat
@ -108,11 +117,12 @@ Do more with buttons. Control button states or create groups of buttons for more
Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `<button>`.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Checkbox and radio buttons
@ -122,15 +132,16 @@ The checked state for these buttons is **only updated via `click` event** on the
Note that pre-checked buttons require you to manually add the `.active` class to the input's `<label>`.
{% example html %}
{% capture example %}
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
@ -142,7 +153,8 @@ Note that pre-checked buttons require you to manually add the `.active` class to
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Methods

135
docs/4.0/components/card.md
View File

@ -16,7 +16,7 @@ Cards are built with as little markup and styles as possible, but still manage t
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
@ -25,7 +25,8 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Content types
@ -35,13 +36,14 @@ Cards support a wide variety of content, including images, text, list groups, li
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
{% example html %}
{% capture example %}
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Titles, text, and links
@ -49,7 +51,7 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
@ -59,26 +61,28 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
<a href="#" class="card-link">Another link</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Images
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### List groups
Create lists of content in a card with a flush list group.
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
@ -86,9 +90,10 @@ Create lists of content in a card with a flush list group.
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
@ -99,13 +104,14 @@ Create lists of content in a card with a flush list group.
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body">
@ -122,13 +128,14 @@ Mix and match multiple content types to create the card you need, or throw every
<a href="#" class="card-link">Another link</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Header and footer
Add an optional header and/or footer within a card.
{% example html %}
{% capture example %}
<div class="card">
<div class="card-header">
Featured
@ -139,11 +146,12 @@ Add an optional header and/or footer within a card.
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %}
{% capture example %}
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
@ -152,9 +160,10 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="card">
<div class="card-header">
Quote
@ -166,9 +175,10 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
</blockquote>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="card text-center">
<div class="card-header">
Featured
@ -182,7 +192,8 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
2 days ago
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Sizing
@ -192,7 +203,7 @@ Cards assume no specific `width` to start, so they'll be 100% wide unless otherw
Using the grid, wrap cards in columns and rows as needed.
{% example html %}
{% capture example %}
<div class="row">
<div class="col-sm-6">
<div class="card">
@ -213,13 +224,14 @@ Using the grid, wrap cards in columns and rows as needed.
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Using utilities
Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/) to quickly set a card's width.
{% example html %}
{% capture example %}
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
@ -235,13 +247,14 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Using custom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
@ -249,13 +262,14 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Text alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
{% example html %}
{% capture example %}
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
@ -279,13 +293,14 @@ You can quickly change the text alignment of any card—in its entirety or speci
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Navigation
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/).
{% example html %}
{% capture example %}
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
@ -306,9 +321,10 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
@ -329,7 +345,8 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Images
@ -339,7 +356,7 @@ Cards include a few options for working with images. Choose from appending "imag
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
{% example html %}
{% capture example %}
<div class="card mb-3">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
@ -356,13 +373,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
</div>
<img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Image overlays
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
{% example html %}
{% capture example %}
<div class="card bg-dark text-white">
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
<div class="card-img-overlay">
@ -371,7 +389,8 @@ Turn an image into a card background and overlay your card's text. Depending on
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Card styles
@ -381,7 +400,7 @@ Cards include various options for customizing their backgrounds, borders, and co
Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to change the appearance of a card.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
@ -390,7 +409,8 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% include callout-warning-color-assistive-technologies.md %}
@ -398,7 +418,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
{% example html %}
{% capture example %}
{% for color in site.data.theme-colors %}
<div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
@ -407,13 +427,14 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>{% endfor %}
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Mixins utilities
You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.
{% example html %}
{% capture example %}
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
@ -422,7 +443,8 @@ You can also change the borders on the card header and footer as needed, and eve
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Card layout
@ -432,7 +454,7 @@ In addition to styling the content within cards, Bootstrap includes a few option
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
{% example html %}
{% capture example %}
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
@ -459,11 +481,12 @@ Use card groups to render cards as a single, attached element with equal width a
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
When using card groups with footers, their content will automatically line up.
{% example html %}
{% capture example %}
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
@ -496,13 +519,14 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Card decks
Need a set of equal width and height cards that aren't attached to one another? Use card decks.
{% example html %}
{% capture example %}
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
@ -529,11 +553,12 @@ Need a set of equal width and height cards that aren't attached to one another?
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Just like with card groups, card footers in decks will automatically line up.
{% example html %}
{% capture example %}
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
@ -566,7 +591,8 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Card columns
@ -574,7 +600,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
{% example html %}
{% capture example %}
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
@ -639,7 +665,8 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

20
docs/4.0/components/carousel.md
View File

@ -26,7 +26,7 @@ Carousels don't automatically normalize slide dimensions. As such, you may need
Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
{% example html %}
{% capture example %}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
@ -40,13 +40,14 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### With controls
Adding in the previous and next controls:
{% example html %}
{% capture example %}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
@ -68,13 +69,14 @@ Adding in the previous and next controls:
<span class="sr-only">Next</span>
</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### With indicators
You can also add the indicators to the carousel, alongside the controls, too.
{% example html %}
{% capture example %}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
@ -101,7 +103,8 @@ You can also add the indicators to the carousel, alongside the controls, too.
<span class="sr-only">Next</span>
</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### With captions
@ -162,7 +165,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
{% example html %}
{% capture example %}
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
@ -184,7 +187,8 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
<span class="sr-only">Next</span>
</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Usage

15
docs/4.0/components/collapse.md
View File

@ -16,7 +16,7 @@ Click the buttons below to show and hide another element via class changes:
You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
{% example html %}
{% capture example %}
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
@ -30,14 +30,15 @@ You can use a link with the `href` attribute, or a button with the `data-target`
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Multiple targets
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute
{% example html %}
{% capture example %}
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
@ -59,13 +60,14 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Accordion example
Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
{% example html %}
{% capture example %}
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
@ -111,7 +113,8 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Accessibility

65
docs/4.0/components/dropdowns.md
View File

@ -30,7 +30,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
{% example html %}
{% capture example %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
@ -41,11 +41,12 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
And with `<a>` elements:
{% example html %}
{% capture example %}
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
@ -57,7 +58,8 @@ And with `<a>` elements:
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
The best part is you can do this with any button variant, too:
@ -539,7 +541,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
{% example html %}
{% capture example %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
@ -550,42 +552,46 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Active
Add `.active` to items in the dropdown to **style them as active**.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Disabled
Add `.disabled` to items in the dropdown to **style them as disabled**.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Menu alignment
@ -596,7 +602,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% endcapture %}
{% include callout.html content=callout type="info" %}
{% example html %}
{% capture example %}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
@ -607,7 +613,8 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Menu content
@ -615,19 +622,20 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
Add a header to label sections of actions in any dropdown menu.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Dividers
Separate groups of related menu items with a divider.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -635,13 +643,14 @@ Separate groups of related menu items with a divider.
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Text
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Note that you'll likely need additional sizing styles to constrain the menu width.
{% example html %}
{% capture example %}
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
@ -650,13 +659,14 @@ Place any freeform text within a dropdown menu with text and use [spacing utilit
And this is more example text.
</p>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Forms
Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require.
{% example html %}
{% capture example %}
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
@ -679,9 +689,10 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
@ -699,13 +710,14 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Dropdown options
Use `data-offset` or `data-reference` to change the location of the dropdown.
{% example html %}
{% capture example %}
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
@ -731,7 +743,8 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Usage

235
docs/4.0/components/forms.md
View File

@ -14,7 +14,7 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for
Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.
{% example html %}
{% capture example %}
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
@ -31,7 +31,8 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Form controls
@ -39,7 +40,7 @@ Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are st
Be sure to explore our [custom forms](#custom-forms) to further style `<select>`s.
{% example html %}
{% capture example %}
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
@ -70,30 +71,33 @@ Be sure to explore our [custom forms](#custom-forms) to further style `<select>`
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
For file inputs, swap the `.form-control` for `.form-control-file`.
{% example html %}
{% capture example %}
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Sizing
Set heights using classes like `.form-control-lg` and `.form-control-sm`.
{% example html %}
{% capture example %}
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
@ -103,34 +107,37 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Range Inputs
Set horizontally scrollable range inputs using `.form-control-range`.
{% example html %}
{% capture example %}
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Readonly
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
{% example html %}
{% capture example %}
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Readonly plain text
If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.
{% example html %}
{% capture example %}
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
@ -145,9 +152,10 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
@ -159,7 +167,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Checkboxes and radios
@ -173,7 +182,7 @@ Checkboxes and radios use are built to support HTML-based form validation and pr
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
{% example html %}
{% capture example %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
@ -186,9 +195,10 @@ By default, any number of checkboxes and radios that are immediate sibling will
Disabled checkbox
</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
@ -207,13 +217,14 @@ By default, any number of checkboxes and radios that are immediate sibling will
Disabled radio
</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Inline
Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
{% example html %}
{% capture example %}
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
@ -226,9 +237,10 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
@ -241,20 +253,22 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Without labels
Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
{% example html %}
{% capture example %}
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Layout
@ -264,7 +278,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `<fieldset>`s, `<div>`s, or nearly any other element.
{% example html %}
{% capture example %}
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
@ -275,13 +289,14 @@ The `.form-group` class is the easiest way to add some structure to forms. It pr
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
{% example html %}
{% capture example %}
<form>
<div class="row">
<div class="col">
@ -292,13 +307,14 @@ More complex forms can be built using our grid classes. Use these for form layou
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
#### Form row
You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
{% example html %}
{% capture example %}
<form>
<div class="form-row">
<div class="col">
@ -309,11 +325,12 @@ You may also swap `.row` for `.form-row`, a variation of our standard grid row t
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
More complex layouts can also be created with the grid system.
{% example html %}
{% capture example %}
<form>
<div class="form-row">
<div class="form-group col-md-6">
@ -360,7 +377,8 @@ More complex layouts can also be created with the grid system.
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
#### Horizontal form
@ -368,7 +386,7 @@ Create horizontal forms with the grid by adding the `.row` class to form groups
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
{% example html %}
{% capture example %}
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
@ -424,13 +442,14 @@ At times, you maybe need to use margin or padding utilities to create that perfe
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
##### Horizontal form label sizing
Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
{% example html %}
{% capture example %}
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
@ -451,13 +470,14 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
#### Column sizing
As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row` or `.form-row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-7`.
{% example html %}
{% capture example %}
<form>
<div class="form-row">
<div class="col-7">
@ -471,13 +491,14 @@ As shown in the previous examples, our grid system allows you to place any numbe
</div>
</div>
</form>
{% endexample html %}
{% endcapture %}
{% include example.html content=example %}
#### Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
{% example html %}
{% capture example %}
<form>
<div class="form-row align-items-center">
<div class="col-auto">
@ -506,11 +527,12 @@ The example below uses a flexbox utility to vertically center the contents and c
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You can then remix that once again with size-specific column classes.
{% example html %}
{% capture example %}
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
@ -539,11 +561,12 @@ You can then remix that once again with size-specific column classes.
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
And of course [custom form controls](#custom-forms) are supported.
{% example html %}
{% capture example %}
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
@ -566,7 +589,8 @@ And of course [custom form controls](#custom-forms) are supported.
</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Inline forms
@ -578,7 +602,7 @@ Use the `.form-inline` class to display a series of labels, form controls, and b
You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
{% example html %}
{% capture example %}
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
@ -600,11 +624,12 @@ You may need to manually address the width and alignment of individual form cont
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Custom form controls and selects are also supported.
{% example html %}
{% capture example %}
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
@ -621,7 +646,8 @@ Custom form controls and selects are also supported.
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% capture callout %}
##### Alternatives to hidden labels
@ -642,17 +668,18 @@ Help text should be explicitly associated with the form control it relates to us
Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
{% example html %}
{% capture example %}
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class.
{% example html %}
{% capture example %}
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
@ -662,7 +689,8 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
</small>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Disabled forms
@ -674,7 +702,7 @@ Add the `disabled` boolean attribute on an input to prevent user interactions an
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
{% example html %}
{% capture example %}
<form>
<fieldset disabled>
<div class="form-group">
@ -696,7 +724,8 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% capture callout %}
##### Caveat with anchors
@ -742,7 +771,7 @@ For custom Bootstrap form validation messages, you'll need to add the `novalidat
When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
{% example html %}
{% capture example %}
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
@ -829,7 +858,8 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
}, false);
})();
</script>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Browser defaults
@ -837,7 +867,7 @@ Not interested in custom validation feedback messages or writing JavaScript to c
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
{% example html %}
{% capture example %}
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
@ -882,13 +912,14 @@ While these feedback styles cannot be styled with CSS, you can still customize t
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Server side
We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
{% example html %}
{% capture example %}
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
@ -954,13 +985,14 @@ We recommend using client side validation, but in case you require server side,
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Supported elements
Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.
{% example html %}
{% capture example %}
<form class="was-validated">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
@ -994,13 +1026,14 @@ Our example forms show native textual `<input>`s above, but form validation styl
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Tooltips
If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
{% example html %}
{% capture example %}
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
@ -1055,7 +1088,8 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Custom forms
@ -1073,12 +1107,13 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
#### Checkboxes
{% example html %}
{% capture example %}
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
@ -1097,7 +1132,7 @@ $('.your-checkbox').prop('indeterminate', true)
#### Radios
{% example html %}
{% capture example %}
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
@ -1106,11 +1141,12 @@ $('.your-checkbox').prop('indeterminate', true)
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
#### Inline
{% example html %}
{% capture example %}
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
@ -1119,13 +1155,14 @@ $('.your-checkbox').prop('indeterminate', true)
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
#### Disabled
Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.
{% example html %}
{% capture example %}
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
@ -1135,24 +1172,26 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
<input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Select menu
Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.
{% example html %}
{% capture example %}
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You may also choose from small and large custom selects to match our similarly sized text inputs.
{% example html %}
{% capture example %}
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
@ -1166,63 +1205,70 @@ You may also choose from small and large custom selects to match our similarly s
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
The `multiple` attribute is also supported:
{% example html %}
{% capture example %}
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
As is the `size` attribute:
{% example html %}
{% capture example %}
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Range
Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
{% example html %}
{% capture example %}
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
{% example html %}
{% capture example %}
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
{% example html %}
{% capture example %}
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
{% example html %}
{% capture example %}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
@ -1239,11 +1285,12 @@ $custom-file-text: (
Here's `lang(es)` in action on the custom file input for a Spanish translation:
{% example html %}
{% capture example %}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.

50
docs/4.0/components/input-group.md
View File

@ -10,7 +10,7 @@ toc: true
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
@ -49,7 +49,8 @@ Place one add-on or button on either side of an input. You may also place one on
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Sizing
@ -57,7 +58,7 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
**Sizing on the individual input group elements isn't supported.**
{% example html %}
{% capture example %}
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
@ -78,13 +79,14 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Checkboxes and radios
Place any checkbox or radio option within an input group's addon instead of text.
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
@ -102,13 +104,14 @@ Place any checkbox or radio option within an input group's addon instead of text
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Multiple inputs
While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
{% example html %}
{% capture example %}
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
@ -116,13 +119,14 @@ While multiple `<input>`s are supported visually, validation styles are only ava
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
@ -138,11 +142,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<span class="input-group-text">0.00</span>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Button addons
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
@ -172,11 +177,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Buttons with dropdowns
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
@ -204,11 +210,12 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Segmented buttons
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">Action</button>
@ -242,7 +249,8 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Custom forms
@ -250,7 +258,7 @@ Input groups include support for custom selects and custom file inputs. Browser
### Custom select
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
@ -298,11 +306,12 @@ Input groups include support for custom selects and custom file inputs. Browser
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Custom file input
{% example html %}
{% capture example %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
@ -342,7 +351,8 @@ Input groups include support for custom selects and custom file inputs. Browser
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Accessibility

10
docs/4.0/components/jumbotron.md
View File

@ -7,7 +7,7 @@ group: components
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
{% example html %}
{% capture example %}
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
@ -17,15 +17,17 @@ A lightweight, flexible component that can optionally extend the entire viewport
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
{% example html %}
{% capture example %}
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}

50
docs/4.0/components/list-group.md
View File

@ -10,7 +10,7 @@ toc: true
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
{% example html %}
{% capture example %}
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
@ -18,13 +18,14 @@ The most basic list group is an unordered list with list items and the proper cl
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Active items
Add `.active` to a `.list-group-item` to indicate the current active selection.
{% example html %}
{% capture example %}
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
@ -32,13 +33,14 @@ Add `.active` to a `.list-group-item` to indicate the current active selection.
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Disabled items
Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that some elements with `.disabled` will also require custom JavaScript to fully disable their click events (e.g., links).
{% example html %}
{% capture example %}
<ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
@ -46,7 +48,8 @@ Add `.disabled` to a `.list-group-item` to make it _appear_ disabled. Note that
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Links and buttons
@ -54,7 +57,7 @@ Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, di
Be sure to **not use the standard `.btn` classes here**.
{% example html %}
{% capture example %}
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
@ -64,11 +67,12 @@ Be sure to **not use the standard `.btn` classes here**.
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
With `<button>`s, you can also make use of the `disabled` attribute instead of the `.disabled` class. Sadly, `<a>`s don't support the disabled attribute.
{% example html %}
{% capture example %}
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
@ -78,13 +82,14 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Flush
Add `.list-group-flush` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
{% example html %}
{% capture example %}
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
@ -92,31 +97,34 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Contextual classes
Use contextual classes to style list items with a stateful background and color.
{% example html %}
{% capture example %}
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
{% for color in site.data.theme-colors %}
<li class="list-group-item list-group-item-{{ color.name }}">A simple {{ color.name }} list group item</li>{% endfor %}
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
{% example html %}
{% capture example %}
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
{% for color in site.data.theme-colors %}
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ color.name }}">A simple {{ color.name }} list group item</a>{% endfor %}
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% include callout-warning-color-assistive-technologies.md %}
@ -124,7 +132,7 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
Add badges to any list group item to show unread counts, activity, and more with the help of some [utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
{% example html %}
{% capture example %}
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
@ -139,13 +147,14 @@ Add badges to any list group item to show unread counts, activity, and more with
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Custom content
Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
{% example html %}
{% capture example %}
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
@ -172,7 +181,8 @@ Add nearly any HTML within, even for linked list groups like the one below, with
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## JavaScript behavior

5
docs/4.0/components/modal.md
View File

@ -400,7 +400,7 @@ Have a bunch of buttons that all trigger the same modal with slightly different
Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
{% example html %}
{% capture example %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
@ -433,7 +433,8 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% highlight js %}
$('#exampleModal').on('show.bs.modal', function (event) {

115
docs/4.0/components/navbar.md
View File

@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -68,7 +68,8 @@ Here's an example of all the sub-components included in a responsive light-theme
</form>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
@ -76,7 +77,7 @@ This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilit
The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
{% example html %}
{% capture example %}
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
@ -86,20 +87,22 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
{% example html %}
{% capture example %}
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
@ -107,7 +110,8 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
Bootstrap
</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Nav
@ -115,7 +119,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@ -138,11 +142,12 @@ Active states—with `.active`—to indicate the current page can be applied dir
</ul>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@ -157,11 +162,12 @@ And because we use classes for our navs, you can avoid the list-based approach e
</div>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@ -191,24 +197,26 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
</ul>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Forms
Place various form controls and components within a navbar with `.form-inline`.
{% example html %}
{% capture example %}
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Align the contents of your inline forms with utilities as needed.
{% example html %}
{% capture example %}
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
@ -216,11 +224,12 @@ Align the contents of your inline forms with utilities as needed.
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Input groups work, too:
{% example html %}
{% capture example %}
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
@ -231,34 +240,37 @@ Input groups work, too:
</div>
</form>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{% example html %}
{% capture example %}
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Text
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{% example html %}
{% capture example %}
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Mix and match with other components and utilities as needed.
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@ -281,7 +293,8 @@ Mix and match with other components and utilities as needed.
</span>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Color schemes
@ -391,23 +404,25 @@ Theming the navbar has never been easier thanks to the combination of theming cl
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
{% example html %}
{% capture example %}
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Placement
@ -415,29 +430,33 @@ Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/uti
Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**.
{% example html %}
{% capture example %}
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Responsive behaviors
@ -451,7 +470,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown in lowest breakpoint:
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -475,11 +494,12 @@ With no `.navbar-brand` shown in lowest breakpoint:
</form>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
With a brand name shown on the left and toggler on the right:
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@ -504,11 +524,12 @@ With a brand name shown on the left and toggler on the right:
</form>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
With a toggler on the left and brand name on the right:
{% example html %}
{% capture example %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -533,13 +554,14 @@ With a toggler on the left and brand name on the right:
</form>
</div>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### External content
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
{% example html %}
{% capture example %}
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
@ -553,4 +575,5 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
</button>
</nav>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}

75
docs/4.0/components/navs.md
View File

@ -17,7 +17,7 @@ The base `.nav` component does not include any `.active` state. The following ex
{% endcapture %}
{% include callout.html content=callout type="info" %}
{% example html %}
{% capture example %}
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -32,18 +32,20 @@ The base `.nav` component does not include any `.active` state. The following ex
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.
{% example html %}
{% capture example %}
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Available styles
@ -55,7 +57,7 @@ Change the horizontal alignment of your nav with [flexbox utilities]({{ site.bas
Centered with `.justify-content-center`:
{% example html %}
{% capture example %}
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -70,11 +72,12 @@ Centered with `.justify-content-center`:
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Right-aligned with `.justify-content-end`:
{% example html %}
{% capture example %}
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -89,13 +92,14 @@ Right-aligned with `.justify-content-end`:
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Vertical
Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
{% example html %}
{% capture example %}
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -110,24 +114,26 @@ Stack your navigation by changing the flex item direction with the `.flex-column
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
As always, vertical navigation is possible without `<ul>`s, too.
{% example html %}
{% capture example %}
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Tabs
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
{% example html %}
{% capture example %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -142,13 +148,14 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Pills
Take that same HTML, but use `.nav-pills` instead:
{% example html %}
{% capture example %}
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -163,13 +170,14 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Fill and justify
Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
{% example html %}
{% capture example %}
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -184,33 +192,36 @@ Force your `.nav`'s contents to extend the full available width one of two modif
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
{% example html %}
{% capture example %}
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
{% example html %}
{% capture example %}
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
{% example html %}
{% capture example %}
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
@ -218,19 +229,21 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Working with flex utilities
If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
{% example html %}
{% capture example %}
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Regarding accessibility
@ -244,7 +257,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
### Tabs with dropdowns
{% example html %}
{% capture example %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -266,11 +279,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Pills with dropdowns
{% example html %}
{% capture example %}
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
@ -292,7 +306,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## JavaScript behavior

40
docs/4.0/components/pagination.md
View File

@ -12,7 +12,7 @@ We use a large block of connected links for our pagination, making links hard to
In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `<nav>` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.
{% example html %}
{% capture example %}
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
@ -22,13 +22,14 @@ In addition, as pages likely have more than one such navigation section, it's ad
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Working with icons
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility.
{% example html %}
{% capture example %}
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
@ -48,7 +49,8 @@ Looking to use an icon or symbol in place of text for some pagination links? Be
</li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Disabled and active states
@ -56,7 +58,7 @@ Pagination links are customizable for different circumstances. Use `.disabled` f
While the `.disabled` class uses `pointer-events: none` to _try_ to disable the link functionality of `<a>`s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, you should always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality.
{% example html %}
{% capture example %}
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
@ -72,11 +74,12 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
</li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
{% example html %}
{% capture example %}
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
@ -95,13 +98,14 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
</li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Sizing
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
{% example html %}
{% capture example %}
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
@ -111,9 +115,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
@ -123,13 +128,14 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Alignment
Change the alignment of pagination components with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/).
{% example html %}
{% capture example %}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
@ -143,9 +149,10 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b
</li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
@ -159,4 +166,5 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b
</li>
</ul>
</nav>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}

15
docs/4.0/components/popovers.md
View File

@ -47,9 +47,10 @@ $(function () {
## Example
{% example html %}
{% capture example %}
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
### Four directions
@ -102,9 +103,10 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag
{% endcapture %}
{% include callout.html content=callout type="danger" %}
{% example html %}
{% capture example %}
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% highlight js %}
$('.popover-dismiss').popover({
@ -118,11 +120,12 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
For disabled popover triggers, you may also prefer `data-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
{% example html %}
{% capture example %}
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Usage

35
docs/4.0/components/progress.md
View File

@ -17,7 +17,7 @@ Progress components are built with two HTML elements, some CSS to set the width,
Put that all together, and you have the following examples.
{% example html %}
{% capture example %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
@ -33,44 +33,48 @@ Put that all together, and you have the following examples.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
{% example html %}
{% capture example %}
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Labels
Add labels to your progress bars by placing text within the `.progress-bar`.
{% example html %}
{% capture example %}
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Height
We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.
{% example html %}
{% capture example %}
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Backgrounds
Use background utility classes to change the appearance of individual progress bars.
{% example html %}
{% capture example %}
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
@ -83,25 +87,27 @@ Use background utility classes to change the appearance of individual progress b
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Multiple bars
Include multiple progress bars in a progress component if you need.
{% example html %}
{% capture example %}
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Striped
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
{% example html %}
{% capture example %}
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
@ -117,7 +123,8 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Animated stripes

5
docs/4.0/components/tooltips.md
View File

@ -117,11 +117,12 @@ Additionally, do not rely solely on `hover` as the trigger for your tooltip, as
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.
<div class="tooltip-demo">
{% example html %}
{% capture example %}
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
### Options

25
docs/4.0/content/code.md
View File

@ -10,41 +10,46 @@ toc: true
Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
{% example html %}
{% capture example %}
For example, <code>&lt;section&gt;</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>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</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 %}

10
docs/4.0/content/figures.md
View File

@ -9,18 +9,20 @@ Anytime you need to display a piece of content—like an image with an optional
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<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 %}

70
docs/4.0/content/tables.md
View File

@ -12,7 +12,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
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>
@ -43,11 +43,12 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
</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>
@ -78,13 +79,14 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
</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>
@ -146,13 +148,14 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
</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>
@ -183,9 +186,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<table class="table table-striped table-dark">
<thead>
<tr>
@ -216,13 +220,14 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
</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>
@ -252,9 +257,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<table class="table table-bordered table-dark">
<thead>
<tr>
@ -284,13 +290,14 @@ Add `.table-bordered` for borders on all sides of the table and cells.
</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>
@ -320,11 +327,12 @@ Add `.table-borderless` for a table without borders.
</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>
@ -354,13 +362,14 @@ Add `.table-borderless` for a table without borders.
</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>
@ -390,9 +399,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<table class="table table-hover table-dark">
<thead>
<tr>
@ -422,13 +432,14 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
</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>
@ -458,9 +469,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
{% example html %}
{% capture example %}
<table class="table table-sm table-dark">
<thead>
<tr>
@ -490,7 +502,8 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Contextual classes
@ -630,7 +643,7 @@ Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-m
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>
@ -662,7 +675,8 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Responsive tables

55
docs/4.0/content/typography.md
View File

@ -80,14 +80,15 @@ All HTML headings, `<h1>` through `<h6>`, are available.
`.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
@ -141,17 +142,18 @@ Traditional heading elements are designed to work best in the meat of your page
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>
@ -160,7 +162,8 @@ Styling for common inline HTML5 elements.
<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.
@ -176,49 +179,54 @@ Stylized implementation of HTML's `<abbr>` element for abbreviations and acronym
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
@ -226,7 +234,7 @@ Use text utilities as needed to change the alignment of your blockquote.
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>
@ -244,25 +252,27 @@ Remove the default `list-style` and left margin on list items (immediate childre
<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>
@ -287,7 +297,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
</dl>
</dd>
</dl>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
## Responsive typography

115
docs/4.0/layout/grid.md
View File

@ -13,7 +13,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
**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">
@ -27,7 +27,8 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
</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`.
@ -124,7 +125,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
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">
@ -146,13 +147,14 @@ For example, here are two grid layouts that apply to every device and viewport,
</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>
@ -162,7 +164,8 @@ Equal-width columns can be broken into multiple lines, but there was a [Safari f
<div class="col">Column</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
### Setting one column width
@ -170,7 +173,7 @@ Equal-width columns can be broken into multiple lines, but there was a [Safari f
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">
@ -195,7 +198,8 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
### Variable width content
@ -203,7 +207,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
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">
@ -228,7 +232,8 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
### Equal-width multi-row
@ -236,7 +241,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
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>
@ -244,7 +249,8 @@ Create equal-width columns that span multiple rows by inserting a `.w-100` where
<div class="col">col</div>
<div class="col">col</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
## Responsive classes
@ -256,7 +262,7 @@ Bootstrap's grid includes five tiers of predefined classes for building complex
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>
@ -267,7 +273,8 @@ For grids that are the same from the smallest of devices to the largest, use the
<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
@ -275,7 +282,7 @@ For grids that are the same from the smallest of devices to the largest, use the
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>
@ -285,7 +292,8 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
<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
@ -293,7 +301,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
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>
@ -312,7 +320,8 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
## Alignment
@ -322,7 +331,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
### 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">
@ -358,11 +367,12 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
</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">
@ -376,13 +386,14 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
</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">
@ -425,7 +436,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
### No gutters
@ -452,12 +464,13 @@ Here's the source code for creating these styles. Note that column overrides are
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
@ -465,13 +478,14 @@ In practice, here's how it looks. Note you can continue to use this with all oth
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 &gt; 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
@ -479,7 +493,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
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>
@ -490,13 +504,14 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
<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>
@ -507,7 +522,8 @@ You may also apply this break at specific breakpoints with our [responsive displ
<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
@ -517,7 +533,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
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">
@ -531,13 +547,14 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
</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">
@ -551,7 +568,8 @@ There are also responsive `.order-first` and `.order-last` classes that change t
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
### Offsetting columns
@ -563,7 +581,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes
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>
@ -575,13 +593,14 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
<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>
@ -591,7 +610,8 @@ In addition to column clearing at responsive breakpoints, you may need to reset
<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
@ -599,7 +619,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
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>
@ -612,7 +632,8 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
<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
@ -620,7 +641,7 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
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
@ -634,7 +655,8 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
</div>
</div>
</div>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}
</div>
## Sass mixins
@ -723,14 +745,15 @@ You can modify the variables to your own custom values, or just use the mixins w
}
{% 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

35
docs/4.0/layout/media-object.md
View File

@ -12,7 +12,7 @@ The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-obje
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">
@ -20,7 +20,8 @@ Below is an example of a single media object. Only two classes are required—th
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
@ -35,7 +36,7 @@ Internet Explorer 10-11 do not render inline elements like links or images (or `
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">
@ -53,13 +54,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
</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">
@ -68,9 +70,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
<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">
@ -79,9 +82,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
<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">
@ -90,13 +94,14 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
<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>
@ -104,13 +109,14 @@ Change the order of content in media objects by modifying the HTML itself, or by
</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">
@ -134,4 +140,5 @@ Because the media object has so few structural requirements, you can also use th
</div>
</li>
</ul>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}

15
docs/4.0/utilities/borders.md
View File

@ -14,25 +14,27 @@ Use border utilities to add or remove an element's borders. Choose from all bord
### 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
@ -40,11 +42,12 @@ Use border utilities to add or remove an element's borders. Choose from all bord
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

5
docs/4.0/utilities/clearfix.md
View File

@ -30,9 +30,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also
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 %}

5
docs/4.0/utilities/close-icon.md
View File

@ -8,8 +8,9 @@ toc: true
**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">&times;</span>
</button>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}

20
docs/4.0/utilities/colors.md
View File

@ -8,40 +8,44 @@ toc: true
## 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

20
docs/4.0/utilities/display.md
View File

@ -35,15 +35,17 @@ The media queries effect screen widths with the given breakpoint *or larger*. Fo
## 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
@ -68,10 +70,11 @@ To show an element only on a given interval of screen sizes you can combine one
| 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
@ -89,8 +92,9 @@ Change the `display` value of elements when printing with our print display util
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 %}

5
docs/4.0/utilities/embed.md
View File

@ -16,11 +16,12 @@ Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` e
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

40
docs/4.0/utilities/flex.md
View File

@ -10,13 +10,15 @@ toc: true
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`.
@ -30,7 +32,7 @@ Set the direction of flex items in a flex container with direction utilities. In
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>
@ -41,11 +43,12 @@ Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-r
<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>
@ -56,7 +59,8 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
<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`.
@ -217,13 +221,14 @@ Responsive variations also exist for `align-self`.
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`.
@ -236,7 +241,7 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
**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>
@ -254,13 +259,14 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
<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>
@ -272,7 +278,8 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali
<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
@ -358,13 +365,14 @@ Responsive variations also exist for `flex-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`.

10
docs/4.0/utilities/float.md
View File

@ -14,11 +14,12 @@ These utility classes float an element to the left or right, or disable floating
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
@ -40,12 +41,13 @@ Or by Sass mixin:
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;

5
docs/4.0/utilities/image-replacement.md
View File

@ -21,6 +21,7 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten
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 %}

5
docs/4.0/utilities/screenreaders.md
View File

@ -12,9 +12,10 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin
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

20
docs/4.0/utilities/sizing.md
View File

@ -8,15 +8,16 @@ toc: true
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>
@ -24,16 +25,19 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
<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 %}

30
docs/4.0/utilities/text.md
View File

@ -10,13 +10,14 @@ toc: true
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>
@ -25,21 +26,23 @@ For left, right, and center alignment, responsive classes are available that use
<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">
@ -51,17 +54,19 @@ For longer content, you can add a `.text-truncate` class to truncate the text wi
<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.
@ -69,9 +74,10 @@ Note how `text-capitalize` only changes the first letter of each word, leaving t
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 %}

10
docs/4.0/utilities/vertical-align.md
View File

@ -11,18 +11,19 @@ Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `
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>
@ -35,4 +36,5 @@ With table cells:
</tr>
</tbody>
</table>
{% endexample %}
{% endcapture %}
{% include example.html content=example %}