`. Be sure to escape HTML angle brackets.
12 |
13 | {% capture example %}
14 | For example, <section> should be wrapped as inline.
15 | {% endcapture %}
16 | {% include example.html content=example %}
17 |
18 | ## Code blocks
19 |
20 | Use ``s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
21 |
22 | {% capture example %}
23 | <p>Sample text here...</p>
24 | <p>And another line of sample text here...</p>
25 |
26 | {% endcapture %}
27 | {% include example.html content=example %}
28 |
29 | ## Variables
30 |
31 | For indicating variables use the `` tag.
32 |
33 | {% capture example %}
34 | y = mx + b
35 | {% endcapture %}
36 | {% include example.html content=example %}
37 |
38 | ## User input
39 |
40 | Use the `` to indicate input that is typically entered via keyboard.
41 |
42 | {% capture example %}
43 | To switch directories, type cd followed by the name of the directory.
44 | To edit settings, press ctrl + ,
45 | {% endcapture %}
46 | {% include example.html content=example %}
47 |
48 | ## Sample output
49 |
50 | For indicating sample output from a program use the `` tag.
51 |
52 | {% capture example %}
53 | This text is meant to be treated as sample output from a computer program.
54 | {% endcapture %}
55 | {% include example.html content=example %}
56 |
--------------------------------------------------------------------------------
/site/docs/4.5/content/figures.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Figures
4 | description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
5 | group: content
6 | ---
7 |
8 | Anytime you need to display a piece of content—like an image with an optional caption, consider using a ``.
9 |
10 | Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `![]()
` to make it responsive.
11 |
12 | {% capture example %}
13 |
14 | {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %}
15 | A caption for the above image.
16 |
17 | {% endcapture %}
18 | {% include example.html content=example %}
19 |
20 | Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
21 |
22 | {% capture example %}
23 |
24 | {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %}
25 | A caption for the above image.
26 |
27 | {% endcapture %}
28 | {% include example.html content=example %}
29 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "stylelint-config-twbs-bootstrap/css"
4 | ],
5 | "rules": {
6 | "at-rule-no-vendor-prefix": null,
7 | "comment-empty-line-before": null,
8 | "media-feature-name-no-vendor-prefix": null,
9 | "property-blacklist": null,
10 | "property-no-vendor-prefix": null,
11 | "selector-no-qualifying-type": null,
12 | "selector-no-vendor-prefix": null,
13 | "value-no-vendor-prefix": null
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/album/album.css:
--------------------------------------------------------------------------------
1 | .jumbotron {
2 | padding-top: 3rem;
3 | padding-bottom: 3rem;
4 | margin-bottom: 0;
5 | background-color: #fff;
6 | }
7 | @media (min-width: 768px) {
8 | .jumbotron {
9 | padding-top: 6rem;
10 | padding-bottom: 6rem;
11 | }
12 | }
13 |
14 | .jumbotron p:last-child {
15 | margin-bottom: 0;
16 | }
17 |
18 | .jumbotron h1 {
19 | font-weight: 300;
20 | }
21 |
22 | .jumbotron .container {
23 | max-width: 40rem;
24 | }
25 |
26 | footer {
27 | padding-top: 3rem;
28 | padding-bottom: 3rem;
29 | }
30 |
31 | footer p {
32 | margin-bottom: .25rem;
33 | }
34 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/album/album.rtl.css:
--------------------------------------------------------------------------------
1 | .jumbotron {
2 | padding-top: 3rem;
3 | padding-bottom: 3rem;
4 | margin-bottom: 0;
5 | background-color: #fff;
6 | }
7 | @media (min-width: 768px) {
8 | .jumbotron {
9 | padding-top: 6rem;
10 | padding-bottom: 6rem;
11 | }
12 | }
13 |
14 | .jumbotron p:last-child {
15 | margin-bottom: 0;
16 | }
17 |
18 | .jumbotron h1 {
19 | font-weight: 300;
20 | }
21 |
22 | .jumbotron .container {
23 | max-width: 40rem;
24 | }
25 |
26 | footer {
27 | padding-top: 3rem;
28 | padding-bottom: 3rem;
29 | }
30 |
31 | footer p {
32 | margin-bottom: .25rem;
33 | }
34 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/checkout/form-validation.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 960px;
3 | }
4 |
5 | .lh-condensed { line-height: 1.25; }
6 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/checkout/form-validation.js:
--------------------------------------------------------------------------------
1 | // Example starter JavaScript for disabling form submissions if there are invalid fields
2 | (function () {
3 | 'use strict'
4 |
5 | window.addEventListener('load', function () {
6 | // Fetch all the forms we want to apply custom Bootstrap validation styles to
7 | var forms = document.getElementsByClassName('needs-validation')
8 |
9 | // Loop over them and prevent submission
10 | Array.prototype.filter.call(forms, function (form) {
11 | form.addEventListener('submit', function (event) {
12 | if (form.checkValidity() === false) {
13 | event.preventDefault()
14 | event.stopPropagation()
15 | }
16 |
17 | form.classList.add('was-validated')
18 | }, false)
19 | })
20 | }, false)
21 | })()
22 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/checkout/form-validation.rtl.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 960px;
3 | }
4 |
5 | .lh-condensed { line-height: 1.25; }
6 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/cover/cover.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Globals
3 | */
4 |
5 | /* Links */
6 | a,
7 | a:focus,
8 | a:hover {
9 | color: #fff;
10 | }
11 |
12 | /* Custom default button */
13 | .btn-secondary,
14 | .btn-secondary:hover,
15 | .btn-secondary:focus {
16 | color: #333;
17 | text-shadow: none; /* Prevent inheritance from `body` */
18 | background-color: #fff;
19 | border: .05rem solid #fff;
20 | }
21 |
22 |
23 | /*
24 | * Base structure
25 | */
26 |
27 | html,
28 | body {
29 | height: 100%;
30 | background-color: #333;
31 | }
32 |
33 | body {
34 | display: -ms-flexbox;
35 | display: flex;
36 | color: #fff;
37 | text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
38 | box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
39 | }
40 |
41 | .cover-container {
42 | max-width: 42em;
43 | }
44 |
45 |
46 | /*
47 | * Header
48 | */
49 | .masthead {
50 | margin-bottom: 2rem;
51 | }
52 |
53 | .masthead-brand {
54 | margin-bottom: 0;
55 | }
56 |
57 | .nav-masthead .nav-link {
58 | padding: .25rem 0;
59 | font-weight: 700;
60 | color: rgba(255, 255, 255, .5);
61 | background-color: transparent;
62 | border-bottom: .25rem solid transparent;
63 | }
64 |
65 | .nav-masthead .nav-link:hover,
66 | .nav-masthead .nav-link:focus {
67 | border-bottom-color: rgba(255, 255, 255, .25);
68 | }
69 |
70 | .nav-masthead .nav-link + .nav-link {
71 | margin-left: 1rem;
72 | }
73 |
74 | .nav-masthead .active {
75 | color: #fff;
76 | border-bottom-color: #fff;
77 | }
78 |
79 | @media (min-width: 48em) {
80 | .masthead-brand {
81 | float: left;
82 | }
83 | .nav-masthead {
84 | float: right;
85 | }
86 | }
87 |
88 |
89 | /*
90 | * Cover
91 | */
92 | .cover {
93 | padding: 0 1.5rem;
94 | }
95 | .cover .btn-lg {
96 | padding: .75rem 1.25rem;
97 | font-weight: 700;
98 | }
99 |
100 |
101 | /*
102 | * Footer
103 | */
104 | .mastfoot {
105 | color: rgba(255, 255, 255, .5);
106 | }
107 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/cover/cover.rtl.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Globals
3 | */
4 |
5 | /* Links */
6 | a,
7 | a:focus,
8 | a:hover {
9 | color: #fff;
10 | }
11 |
12 | /* Custom default button */
13 | .btn-secondary,
14 | .btn-secondary:hover,
15 | .btn-secondary:focus {
16 | color: #333;
17 | text-shadow: none; /* Prevent inheritance from `body` */
18 | background-color: #fff;
19 | border: .05rem solid #fff;
20 | }
21 |
22 |
23 | /*
24 | * Base structure
25 | */
26 |
27 | html,
28 | body {
29 | height: 100%;
30 | background-color: #333;
31 | }
32 |
33 | body {
34 | display: -ms-flexbox;
35 | display: flex;
36 | color: #fff;
37 | text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
38 | box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
39 | }
40 |
41 | .cover-container {
42 | max-width: 42em;
43 | }
44 |
45 |
46 | /*
47 | * Header
48 | */
49 | .masthead {
50 | margin-bottom: 2rem;
51 | }
52 |
53 | .masthead-brand {
54 | margin-bottom: 0;
55 | }
56 |
57 | .nav-masthead .nav-link {
58 | padding: .25rem 0;
59 | font-weight: 700;
60 | color: rgba(255, 255, 255, .5);
61 | background-color: transparent;
62 | border-bottom: .25rem solid transparent;
63 | }
64 |
65 | .nav-masthead .nav-link:hover,
66 | .nav-masthead .nav-link:focus {
67 | border-bottom-color: rgba(255, 255, 255, .25);
68 | }
69 |
70 | .nav-masthead .nav-link + .nav-link {
71 | margin-right: 1rem;
72 | }
73 |
74 | .nav-masthead .active {
75 | color: #fff;
76 | border-bottom-color: #fff;
77 | }
78 |
79 | @media (min-width: 48em) {
80 | .masthead-brand {
81 | float: right;
82 | }
83 | .nav-masthead {
84 | float: left;
85 | }
86 | }
87 |
88 |
89 | /*
90 | * Cover
91 | */
92 | .cover {
93 | padding: 0 1.5rem;
94 | }
95 | .cover .btn-lg {
96 | padding: .75rem 1.25rem;
97 | font-weight: 700;
98 | }
99 |
100 |
101 | /*
102 | * Footer
103 | */
104 | .mastfoot {
105 | color: rgba(255, 255, 255, .5);
106 | }
107 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/cover/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: examples
3 | title: Cover Template
4 | extra_css: "cover.rtl.css"
5 | body_class: "text-center"
6 | include_js: false
7 | ---
8 |
9 |
10 |
20 |
21 |
22 | Cover your page.
23 | Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
24 |
25 | Learn more
26 |
27 |
28 |
29 |
34 |
7 |
8 |
Bottom Navbar example
9 |
This example is a quick exercise to illustrate how the bottom navbar works.
10 |
View navbar docs »
11 |
12 |
33 |
Navbar example
34 |
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
35 |
View navbar docs »
36 |
33 |
Navbar example
34 |
This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
35 |
View navbar docs »
36 |
13 |
Sticky footer
14 |
Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
15 |
Use the sticky footer with a fixed navbar if need be, too.
16 |
...
12 | {% endhighlight %}
13 |
14 | {% highlight scss %}
15 | // Mixin itself
16 | @mixin clearfix() {
17 | &::after {
18 | display: block;
19 | content: "";
20 | clear: both;
21 | }
22 | }
23 |
24 | // Usage as a mixin
25 | .element {
26 | @include clearfix;
27 | }
28 | {% endhighlight %}
29 |
30 | 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.
31 |
32 | {% capture example %}
33 |
34 |
35 |
36 |
37 | {% endcapture %}
38 | {% include example.html content=example %}
39 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/close-icon.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Close icon
4 | description: Use a generic close icon for dismissing content like modals and alerts.
5 | group: utilities
6 | ---
7 |
8 | **Be sure to include text for screen readers**, as we've done with `aria-label`.
9 |
10 | {% capture example %}
11 |
14 | {% endcapture %}
15 | {% include example.html content=example %}
16 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/float.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Float
4 | description: Toggle floats on any element, across any breakpoint, using our responsive float utilities.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Overview
10 |
11 | These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
12 |
13 | ## Classes
14 |
15 | Toggle a float with a class:
16 |
17 | {% capture example %}
18 | Float left on all viewport sizes
19 | Float right on all viewport sizes
20 | Don't float on all viewport sizes
21 | {% endcapture %}
22 | {% include example.html content=example %}
23 |
24 | ## Mixins
25 |
26 | Or by Sass mixin:
27 |
28 | {% highlight scss %}
29 | .element {
30 | @include float-left;
31 | }
32 | .another-element {
33 | @include float-right;
34 | }
35 | .one-more {
36 | @include float-none;
37 | }
38 | {% endhighlight %}
39 |
40 | ## Responsive
41 |
42 | Responsive variations also exist for each `float` value.
43 |
44 | {% capture example %}
45 | Float left on viewports sized SM (small) or wider
46 | Float left on viewports sized MD (medium) or wider
47 | Float left on viewports sized LG (large) or wider
48 | Float left on viewports sized XL (extra-large) or wider
49 | {% endcapture %}
50 | {% include example.html content=example %}
51 |
52 | Here are all the support classes;
53 |
54 | {% for bp in site.data.breakpoints %}
55 | - `.float{{ bp.abbr }}-left`
56 | - `.float{{ bp.abbr }}-right`
57 | - `.float{{ bp.abbr }}-none`{% endfor %}
58 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/image-replacement.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Image replacement
4 | description: Swap text for background images with the image replacement class.
5 | group: utilities
6 | ---
7 |
8 | {% capture callout %}
9 | ##### Warning
10 |
11 | The `text-hide()` class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.
12 | {% endcapture %}
13 | {% include callout.html content=callout type="warning" %}
14 |
15 | Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
16 |
17 | {% highlight html %}
18 | Custom heading
19 | {% endhighlight %}
20 |
21 | {% highlight scss %}
22 | // Usage as a mixin
23 | .heading {
24 | @include text-hide;
25 | }
26 | {% endhighlight %}
27 |
28 | 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.
29 |
30 |
31 |
Bootstrap
32 |
33 |
34 | {% highlight html %}
35 | Bootstrap
36 | {% endhighlight %}
37 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/interactions.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Interactions
4 | description: Utility classes that change how users interact with the contents of a website.
5 | group: utilities
6 | ---
7 |
8 | ## Text selection
9 |
10 | Change how the content is selected when the user interacts with it.
11 |
12 | {% capture example %}
13 | This paragraph will be entirely selected when clicked by the user.
14 | This paragraph has the default select behavior.
15 | This paragraph will not be selectable when clicked by the user.
16 | {% endcapture %}
17 | {% include example.html content=example %}
18 |
19 | Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss`.
20 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/overflow.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Overflow
4 | description: Use these shorthand utilities for quickly configuring how content overflows an element.
5 | group: utilities
6 | ---
7 |
8 | Barebones `overflow` functionality is provided for two values by default, and they are not responsive.
9 |
10 |
11 |
12 | This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
13 |
14 |
15 | This is an example of using .overflow-hidden on an element with set width and height dimensions.
16 |
17 |
...
21 | ...
22 | {% endhighlight %}
23 |
24 | Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
25 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/position.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Position
4 | description: Use these shorthand utilities for quickly configuring the position of an element.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Common values
10 |
11 | Quick positioning classes are available, though they are not responsive.
12 |
13 | {% highlight html %}
14 | ...
15 | ...
16 | ...
17 | ...
18 | ...
19 | {% endhighlight %}
20 |
21 | ## Fixed top
22 |
23 | Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
24 |
25 | {% highlight html %}
26 | ...
27 | {% endhighlight %}
28 |
29 | ## Fixed bottom
30 |
31 | Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
32 |
33 | {% highlight html %}
34 | ...
35 | {% endhighlight %}
36 |
37 | ## Sticky top
38 |
39 | Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
40 |
41 | **IE11 and IE10 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that can render it properly.
42 |
43 | {% highlight html %}
44 | ...
45 | {% endhighlight %}
46 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/screen-readers.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Screen readers
4 | description: Use screen reader utilities to hide elements on all devices except screen readers.
5 | group: utilities
6 | ---
7 |
8 | Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
9 |
10 | {%- comment -%}
11 | Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
12 | {%- endcomment -%}
13 |
14 | {% capture example %}
15 | Skip to main content
16 | {% endcapture %}
17 | {% include example.html content=example %}
18 |
19 | {% highlight scss %}
20 | // Usage as a mixin
21 | .skip-navigation {
22 | @include sr-only;
23 | @include sr-only-focusable;
24 | }
25 | {% endhighlight %}
26 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/shadows.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Shadows
4 | description: Add or remove shadows to elements with box-shadow utilities.
5 | group: utilities
6 | ---
7 |
8 | ## Examples
9 |
10 | While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
11 |
12 | {% capture example %}
13 | No shadow
14 | Small shadow
15 | Regular shadow
16 | Larger shadow
17 | {% endcapture %}
18 | {% include example.html content=example %}
19 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/vertical-align.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Vertical alignment
4 | description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
5 | group: utilities
6 | ---
7 |
8 | Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
9 |
10 | Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
11 |
12 | With inline elements:
13 |
14 | {% capture example %}
15 | baseline
16 | top
17 | middle
18 | bottom
19 | text-top
20 | text-bottom
21 | {% endcapture %}
22 | {% include example.html content=example %}
23 |
24 | With table cells:
25 |
26 | {% capture example %}
27 |
28 |
29 |
30 | | baseline |
31 | top |
32 | middle |
33 | bottom |
34 | text-top |
35 | text-bottom |
36 |
37 |
38 |
39 | {% endcapture %}
40 | {% include example.html content=example %}
41 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/visibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Visibility
4 | description: Control the visibility, without modifying the display, of elements with visibility utilities.
5 | group: utilities
6 | ---
7 |
8 | Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.
9 |
10 | Apply `.visible` or `.invisible` as needed.
11 |
12 | {% highlight html %}
13 | ...
14 | ...
15 | {% endhighlight %}
16 |
17 | {% highlight scss %}
18 | // Class
19 | .visible {
20 | visibility: visible !important;
21 | }
22 | .invisible {
23 | visibility: hidden !important;
24 | }
25 |
26 | // Usage as a mixin
27 | // Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
28 | .element {
29 | @include invisible(visible);
30 | }
31 | .element {
32 | @include invisible(hidden);
33 | }
34 | {% endhighlight %}
35 |
--------------------------------------------------------------------------------
/site/docs/versions.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: simple
3 | title: Versions
4 | description: An appendix of hosted documentation for nearly every release of Bootstrap, from v1 through v4.
5 | ---
6 |
7 |
8 | {% assign releases = site.data.docs-versions | reverse %}
9 | {% for release in releases %}
10 |
11 |
{{ release.group }}
12 |
{{ release.description }}
13 | {% assign versions = release.versions | reverse %}
14 | {% for version in versions %}
15 | {% if forloop.first %}
{% endif %}
27 | {% endfor %}
28 |
29 | {% endfor %}
30 |