`. Be sure to escape HTML angle brackets.
-{% capture example %}
+{{< example >}}
For example, <section>
should be wrapped as inline.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Code blocks
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.
-{% capture example %}
+{{< example >}}
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Variables
For indicating variables use the `` tag.
-{% capture example %}
+{{< example >}}
y = mx + b
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## User input
Use the `` to indicate input that is typically entered via keyboard.
-{% capture example %}
+{{< example >}}
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Sample output
For indicating sample output from a program use the `` tag.
-{% capture example %}
+{{< example >}}
This text is meant to be treated as sample output from a computer program.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/content/docs/4.3/content/figures.md b/site/content/docs/4.3/content/figures.md
new file mode 100644
index 0000000000..04a33fcc5c
--- /dev/null
+++ b/site/content/docs/4.3/content/figures.md
@@ -0,0 +1,26 @@
+---
+layout: docs
+title: Figures
+description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
+group: content
+---
+
+Anytime you need to display a piece of content—like an image with an optional caption, consider using a ``.
+
+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.
+
+{{< example >}}
+
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+ A caption for the above image.
+
+{{< /example >}}
+
+Aligning the figure's caption is easy with our [text utilities](/docs/{{< param docs_version >}}/utilities/text/#text-alignment).
+
+{{< example >}}
+
+ {{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
+ A caption for the above image.
+
+{{< /example >}}
diff --git a/site/content/docs/4.3/content/images.md b/site/content/docs/4.3/content/images.md
new file mode 100644
index 0000000000..fd37b843d2
--- /dev/null
+++ b/site/content/docs/4.3/content/images.md
@@ -0,0 +1,77 @@
+---
+layout: docs
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
+group: content
+toc: true
+---
+
+## Responsive images
+
+Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
+
+
+ {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+## Image thumbnails
+
+In addition to our [border-radius utilities](/docs/{{< param docs_version >}}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+
+ {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+## Aligning images
+
+Align images with the [helper float classes](/docs/{{< param docs_version >}}/utilities/float/) or [text alignment classes](/docs/{{< param docs_version >}}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class](/docs/{{< param docs_version >}}/utilities/spacing/#horizontal-centering).
+
+
+ {{< placeholder width="200" height="200" class="rounded float-left" >}}
+ {{< placeholder width="200" height="200" class="rounded float-right" >}}
+
+
+{{< highlight html >}}
+
+
+{{< /highlight >}}
+
+
+ {{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
+
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+
+
+ {{< placeholder width="200" height="200" class="rounded" >}}
+
+
+
+{{< highlight html >}}
+
+

+
+{{< /highlight >}}
+
+
+## Picture
+
+If you are using the `` element to specify multiple `` elements for a specific `
`, make sure to add the `.img-*` classes to the `
` and not to the `` tag.
+
+{{< highlight html >}}
+
+
+
+
+{{< /highlight >}}
diff --git a/site/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md
similarity index 94%
rename from site/docs/4.3/content/reboot.md
rename to site/content/docs/4.3/content/reboot.md
index bd8070f639..38e22baaae 100644
--- a/site/docs/4.3/content/reboot.md
+++ b/site/content/docs/4.3/content/reboot.md
@@ -3,7 +3,7 @@ layout: docs
title: Reboot
description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
group: content
-redirect_from: "/docs/4.3/content/"
+aliases: "/docs/4.3/content/"
toc: true
---
@@ -31,7 +31,7 @@ The `` and `` elements are updated to provide better page-wide defau
The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
-{% highlight sass %}
+{{< highlight scss >}}
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
@@ -45,7 +45,7 @@ $font-family-sans-serif:
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-{% endhighlight %}
+{{< /highlight >}}
This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
@@ -63,37 +63,37 @@ All heading elements—e.g., ``—and `
` are reset to have their `margin-
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h1. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h2. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h3. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h4. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h5. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h6. Bootstrap heading |
@@ -105,7 +105,7 @@ All heading elements—e.g., ``—and `
` are reset to have their `margin-
All lists—`
`, ``, and ``—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
-{% capture markdown %}
+{{< markdown >}}
* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* Integer molestie lorem at massa
@@ -127,8 +127,7 @@ All lists—`
`, ``, and ``—have their `margin-top` removed and a `
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
-{% endcapture %}
-{{ markdown | markdownify }}
+{{< /markdown >}}
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `- `s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
- `s are **bolded**.
@@ -159,7 +158,7 @@ The `
` element is reset to remove its `margin-top` and use `rem` units for
## Tables
-Tables are slightly adjusted to style ``s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/tables/).
+Tables are slightly adjusted to style ``s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/docs/{{< param docs_version >}}/content/tables/).
@@ -353,15 +352,14 @@ The default `cursor` on summary is `text`, so we reset that to `pointer` to conv
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
-{% highlight html %}
+{{< highlight html >}}
-{% endhighlight %}
+{{< /highlight >}}
-{% capture callout %}
+{{< callout warning >}}
##### jQuery incompatibility
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+{{< /callout >}}
-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class](/docs/{{< param docs_version >}}/utilities/visibility/) instead.
diff --git a/site/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md
similarity index 82%
rename from site/docs/4.3/content/tables.md
rename to site/content/docs/4.3/content/tables.md
index 8799d47f25..b7ec0c8a64 100644
--- a/site/docs/4.3/content/tables.md
+++ b/site/content/docs/4.3/content/tables.md
@@ -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.
-{% capture example %}
+{{< example >}}
@@ -43,12 +43,11 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
-{% capture example %}
+{{< example >}}
@@ -79,14 +78,13 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Table head options
Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make ``s appear light or dark gray.
-{% capture example %}
+{{< example >}}
@@ -148,14 +146,13 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Striped rows
Use `.table-striped` to add zebra-striping to any table row within the ``.
-{% capture example %}
+{{< example >}}
@@ -186,10 +183,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `
`
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
@@ -220,14 +216,13 @@ Use `.table-striped` to add zebra-striping to any table row within the `
`
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Bordered table
Add `.table-bordered` for borders on all sides of the table and cells.
-{% capture example %}
+{{< example >}}
@@ -257,10 +252,9 @@ Add `.table-bordered` for borders on all sides of the table and cells.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
@@ -290,14 +284,13 @@ Add `.table-bordered` for borders on all sides of the table and cells.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Borderless table
Add `.table-borderless` for a table without borders.
-{% capture example %}
+{{< example >}}
@@ -327,12 +320,11 @@ Add `.table-borderless` for a table without borders.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
`.table-borderless` can also be used on dark tables.
-{% capture example %}
+{{< example >}}
@@ -362,14 +354,13 @@ Add `.table-borderless` for a table without borders.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a ``.
-{% capture example %}
+{{< example >}}
@@ -399,10 +390,9 @@ Add `.table-hover` to enable a hover state on table rows within a `
`.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
@@ -432,14 +422,13 @@ Add `.table-hover` to enable a hover state on table rows within a `
`.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Small table
Add `.table-sm` to make tables more compact by cutting cell padding in half.
-{% capture example %}
+{{< example >}}
@@ -469,10 +458,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
@@ -502,8 +490,7 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Contextual classes
@@ -530,31 +517,40 @@ Use contextual classes to color table rows or individual cells.
Cell |
- {% for color in site.data.theme-colors %}
-
- {{ color.name | capitalize }} |
+ {{< table.inline >}}
+ {{- range (index $.Site.Data "theme-colors") }}
+
+ {{ .name | title }} |
Cell |
Cell |
-
{% endfor %}
+
+ {{- end -}}
+ {{< /table.inline >}}
-{% highlight html %}
+{{< highlight html >}}
...
-{% for color in site.data.theme-colors %}
-...
{% endfor %}
+{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+...
+{{- end -}}
+{{< /table.inline >}}
... |
- {% for color in site.data.theme-colors %}
- ... | {% endfor %}
+{{< table.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+ ... |
+{{- end -}}
+{{< /table.inline >}}
-{% endhighlight %}
+{{< /highlight >}}
-Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles.
+Regular table background variants are not available with the dark table, however, you may use [text or background utilities](/docs/{{< param docs_version >}}/utilities/colors/) to achieve similar styles.
@@ -615,7 +611,7 @@ Regular table background variants are not available with the dark table, however
-{% highlight html %}
+{{< highlight html >}}
...
...
@@ -631,19 +627,23 @@ Regular table background variants are not available with the dark table, however
... |
... |
-{% endhighlight %}
+{{< /highlight >}}
-{% include callout-warning-color-assistive-technologies.md %}
+{{< callout info >}}
+{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
-{% include callout-info-mediaqueries-breakpoints.md %}
+{{< callout info >}}
+{{< partial "callout-info-mediaqueries-breakpoints.md" >}}
+{{< /callout >}}
## Captions
A `` 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.
-{% capture example %}
+{{< example >}}
List of users
@@ -675,19 +675,17 @@ A `` functions like a heading for a table. It helps users with screen r
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.
-{% capture callout %}
+{{< callout warning >}}
##### Vertical clipping/truncation
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+{{< /callout >}}
### Always responsive
@@ -752,13 +750,13 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
-{% highlight html %}
+{{< highlight html >}}
-{% endhighlight %}
+{{< /highlight >}}
### Breakpoint specific
@@ -766,66 +764,77 @@ Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables u
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
-{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+{{< tables.inline >}}
+{{ range $bp := $.Site.Data.breakpoints }}
+{{ if not (eq $bp "xs") }}
-
-
-
-
- # |
- Heading |
- Heading |
- Heading |
- Heading |
- Heading |
- Heading |
- Heading |
- Heading |
-
-
-
-
- 1 |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
-
-
- 2 |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
-
-
- 3 |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
- Cell |
-
-
-
+
+
+
+
+ # |
+ Heading |
+ Heading |
+ Heading |
+ Heading |
+ Heading |
+ Heading |
+ Heading |
+ Heading |
+
+
+
+
+ 1 |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+
+
+ 2 |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+
+
+ 3 |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+ Cell |
+
+
+
+
-
-{% highlight html %}
-
+{{ end -}}
+{{- end -}}
+{{< /tables.inline >}}
+
+{{< highlight html >}}
+{{< tables.inline >}}
+{{- range $bp := $.Site.Data.breakpoints -}}
+{{- if not (eq $bp "xs") }}
+
-{% endhighlight %}
-{% endunless %}{% endfor %}
+{{ end -}}
+{{- end -}}
+{{< /tables.inline >}}
+{{< /highlight >}}
diff --git a/site/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md
similarity index 84%
rename from site/docs/4.3/content/typography.md
rename to site/content/docs/4.3/content/typography.md
index 19a783d8e7..8e88a6b3bd 100644
--- a/site/docs/4.3/content/typography.md
+++ b/site/content/docs/4.3/content/typography.md
@@ -8,9 +8,9 @@ toc: true
## Global settings
-Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/).
+Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes](/docs/{{< param docs_version >}}/utilities/text/).
-- Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
+- Use a [native font stack](/docs/{{< param docs_version >}}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
- For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``.
- Set the global link color via `$link-color` and apply link underlines only on `:hover`.
@@ -32,75 +32,73 @@ All HTML headings, `
` through ``, are available.
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h1. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h2. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h3. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h4. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h5. Bootstrap heading |
- {{ "``" | markdownify }}
+ {{< markdown >}}``{{< /markdown >}}
|
h6. Bootstrap heading |
-{% highlight html %}
+{{< highlight html >}}
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
-{% endhighlight %}
+{{< /highlight >}}
`.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.
-{% capture example %}
+{{< example >}}
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Customizing headings
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
-{% capture example %}
+{{< example >}}
Fancy display heading
With faded secondary text
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Display headings
@@ -125,29 +123,28 @@ Traditional heading elements are designed to work best in the meat of your page
-{% highlight html %}
+{{< highlight html >}}
Display 1
Display 2
Display 3
Display 4
-{% endhighlight %}
+{{< /highlight >}}
## Lead
Make a paragraph stand out by adding `.lead`.
-{% capture example %}
+{{< example >}}
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Inline text elements
Styling for common inline HTML5 elements.
-{% capture example %}
+{{< example >}}
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
@@ -156,8 +153,7 @@ Styling for common inline HTML5 elements.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
`.mark` and `.small` classes are also available to apply the same styles as `` and `` while avoiding any unwanted semantic implications that the tags would bring.
@@ -165,7 +161,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant
## Text utilities
-Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/) and [color utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/).
+Change text alignment, transform, style, weight, and color with our [text utilities](/docs/{{< param docs_version >}}/utilities/text/) and [color utilities](/docs/{{< param docs_version >}}/utilities/colors/).
## Abbreviations
@@ -173,54 +169,49 @@ Stylized implementation of HTML's `` element for abbreviations and acronym
Add `.initialism` to an abbreviation for a slightly smaller font-size.
-{% capture example %}
+{{< example >}}
attr
HTML
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Blockquotes
For quoting blocks of content from another source within your document. Wrap `` around any HTML as the quote.
-{% capture example %}
+{{< example >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Naming a source
Add a `
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Responsive font sizes
diff --git a/site/docs/4.3/examples/.stylelintrc b/site/content/docs/4.3/examples/.stylelintrc
similarity index 100%
rename from site/docs/4.3/examples/.stylelintrc
rename to site/content/docs/4.3/examples/.stylelintrc
diff --git a/site/content/docs/4.3/examples/_index.md b/site/content/docs/4.3/examples/_index.md
new file mode 100644
index 0000000000..e063c7a8a3
--- /dev/null
+++ b/site/content/docs/4.3/examples/_index.md
@@ -0,0 +1,8 @@
+---
+layout: single
+title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
+aliases: "/examples/"
+---
+
+{{< list-examples >}}
diff --git a/site/docs/4.3/examples/album/album.css b/site/content/docs/4.3/examples/album/album.css
similarity index 100%
rename from site/docs/4.3/examples/album/album.css
rename to site/content/docs/4.3/examples/album/album.css
diff --git a/site/docs/4.3/examples/album/index.html b/site/content/docs/4.3/examples/album/index.html
similarity index 85%
rename from site/docs/4.3/examples/album/index.html
rename to site/content/docs/4.3/examples/album/index.html
index 6b3a53c315..5a500f79b5 100644
--- a/site/docs/4.3/examples/album/index.html
+++ b/site/content/docs/4.3/examples/album/index.html
@@ -1,7 +1,8 @@
---
layout: examples
title: Album example
-extra_css: "album.css"
+extra_css:
+ - "album.css"
---
@@ -55,7 +56,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -70,7 +71,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -85,7 +86,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -101,7 +102,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -116,7 +117,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -131,7 +132,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -147,7 +148,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -162,7 +163,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -177,7 +178,7 @@ extra_css: "album.css"
- {% include icons/placeholder.svg width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" %}
+ {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
@@ -202,6 +203,6 @@ extra_css: "album.css"
Back to top
Album example is © Bootstrap, but please download and customize it for yourself!
-
New to Bootstrap? Visit the homepage or read our getting started guide.
+
New to Bootstrap? Visit the homepage or read our getting started guide.
diff --git a/site/docs/4.3/examples/blog/blog.css b/site/content/docs/4.3/examples/blog/blog.css
similarity index 100%
rename from site/docs/4.3/examples/blog/blog.css
rename to site/content/docs/4.3/examples/blog/blog.css
diff --git a/site/docs/4.3/examples/blog/index.html b/site/content/docs/4.3/examples/blog/index.html
similarity index 97%
rename from site/docs/4.3/examples/blog/index.html
rename to site/content/docs/4.3/examples/blog/index.html
index ba4edd7452..06b8d2a64a 100644
--- a/site/docs/4.3/examples/blog/index.html
+++ b/site/content/docs/4.3/examples/blog/index.html
@@ -61,7 +61,7 @@ include_js: false
Continue reading
- {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" %}
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
@@ -75,7 +75,7 @@ include_js: false
Continue reading
- {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" %}
+ {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
diff --git a/site/docs/4.3/examples/carousel/carousel.css b/site/content/docs/4.3/examples/carousel/carousel.css
similarity index 100%
rename from site/docs/4.3/examples/carousel/carousel.css
rename to site/content/docs/4.3/examples/carousel/carousel.css
diff --git a/site/docs/4.3/examples/carousel/index.html b/site/content/docs/4.3/examples/carousel/index.html
similarity index 83%
rename from site/docs/4.3/examples/carousel/index.html
rename to site/content/docs/4.3/examples/carousel/index.html
index 5f63fa35fc..28116557b9 100644
--- a/site/docs/4.3/examples/carousel/index.html
+++ b/site/content/docs/4.3/examples/carousel/index.html
@@ -1,7 +1,8 @@
---
layout: examples
title: Carousel Template
-extra_css: "carousel.css"
+extra_css:
+ - "carousel.css"
---
@@ -40,7 +41,7 @@ extra_css: "carousel.css"
- {% include icons/placeholder.svg width="100%" height="100%" background="#777" color="#777" text=" " title=" " %}
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
Example headline.
@@ -50,7 +51,7 @@ extra_css: "carousel.css"
- {% include icons/placeholder.svg width="100%" height="100%" background="#777" color="#777" text=" " title=" " %}
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
Another example headline.
@@ -60,7 +61,7 @@ extra_css: "carousel.css"
- {% include icons/placeholder.svg width="100%" height="100%" background="#777" color="#777" text=" " title=" " %}
+ {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
One more for good measure.
@@ -90,19 +91,19 @@ extra_css: "carousel.css"
- {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" %}
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
Heading
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
View details »
- {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" %}
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
Heading
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
View details »
- {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" %}
+ {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
Heading
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
View details »
@@ -120,7 +121,7 @@ extra_css: "carousel.css"
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
- {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" %}
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -132,7 +133,7 @@ extra_css: "carousel.css"
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
- {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" %}
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -144,7 +145,7 @@ extra_css: "carousel.css"
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
- {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" %}
+ {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -158,6 +159,6 @@ extra_css: "carousel.css"
diff --git a/site/docs/4.3/examples/checkout/form-validation.css b/site/content/docs/4.3/examples/checkout/form-validation.css
similarity index 100%
rename from site/docs/4.3/examples/checkout/form-validation.css
rename to site/content/docs/4.3/examples/checkout/form-validation.css
diff --git a/site/docs/4.3/examples/checkout/form-validation.js b/site/content/docs/4.3/examples/checkout/form-validation.js
similarity index 100%
rename from site/docs/4.3/examples/checkout/form-validation.js
rename to site/content/docs/4.3/examples/checkout/form-validation.js
diff --git a/site/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html
similarity index 96%
rename from site/docs/4.3/examples/checkout/index.html
rename to site/content/docs/4.3/examples/checkout/index.html
index 396270e742..353111883f 100644
--- a/site/docs/4.3/examples/checkout/index.html
+++ b/site/content/docs/4.3/examples/checkout/index.html
@@ -1,14 +1,16 @@
---
layout: examples
title: Checkout example
-extra_css: "form-validation.css"
-extra_js: "form-validation.js"
+extra_css:
+ - "form-validation.css"
+extra_js:
+ - "form-validation.js"
body_class: "bg-light"
---
-

+
Checkout form
Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.
@@ -213,7 +215,7 @@ body_class: "bg-light"
-
© 2017-{{ site.time | date: "%Y" }}
+
© 2017-{{< year >}}
diff --git a/site/docs/4.3/examples/grid/grid.css b/site/content/docs/4.3/examples/grid/grid.css
similarity index 100%
rename from site/docs/4.3/examples/grid/grid.css
rename to site/content/docs/4.3/examples/grid/grid.css
diff --git a/site/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html
similarity index 99%
rename from site/docs/4.3/examples/grid/index.html
rename to site/content/docs/4.3/examples/grid/index.html
index b41090438d..7fc1f70fb2 100644
--- a/site/docs/4.3/examples/grid/index.html
+++ b/site/content/docs/4.3/examples/grid/index.html
@@ -1,7 +1,8 @@
---
layout: examples
title: Grid Template
-extra_css: "grid.css"
+extra_css:
+ - "grid.css"
body_class: "py-4"
include_js: false
---
diff --git a/site/docs/4.3/examples/jumbotron/index.html b/site/content/docs/4.3/examples/jumbotron/index.html
similarity index 97%
rename from site/docs/4.3/examples/jumbotron/index.html
rename to site/content/docs/4.3/examples/jumbotron/index.html
index db8803035c..efcae9cae6 100644
--- a/site/docs/4.3/examples/jumbotron/index.html
+++ b/site/content/docs/4.3/examples/jumbotron/index.html
@@ -1,7 +1,8 @@
---
layout: examples
title: Jumbotron Template
-extra_css: "jumbotron.css"
+extra_css:
+ - "jumbotron.css"
---
-{% highlight html %}
+{{< highlight html >}}
...
...
-{% endhighlight %}
+{{< /highlight >}}
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
diff --git a/site/docs/4.3/utilities/position.md b/site/content/docs/4.3/utilities/position.md
similarity index 89%
rename from site/docs/4.3/utilities/position.md
rename to site/content/docs/4.3/utilities/position.md
index c819df080d..1efaf4cf16 100644
--- a/site/docs/4.3/utilities/position.md
+++ b/site/content/docs/4.3/utilities/position.md
@@ -10,29 +10,29 @@ toc: true
Quick positioning classes are available, though they are not responsive.
-{% highlight html %}
+{{< highlight html >}}
...
...
...
...
...
-{% endhighlight %}
+{{< /highlight >}}
## Fixed top
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.
-{% highlight html %}
+{{< highlight html >}}
...
-{% endhighlight %}
+{{< /highlight >}}
## Fixed bottom
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.
-{% highlight html %}
+{{< highlight html >}}
...
-{% endhighlight %}
+{{< /highlight >}}
## Sticky top
@@ -40,6 +40,6 @@ Position an element at the top of the viewport, from edge to edge, but only afte
**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.
-{% highlight html %}
+{{< highlight html >}}
...
-{% endhighlight %}
+{{< /highlight >}}
diff --git a/site/docs/4.3/utilities/screen-readers.md b/site/content/docs/4.3/utilities/screen-readers.md
similarity index 65%
rename from site/docs/4.3/utilities/screen-readers.md
rename to site/content/docs/4.3/utilities/screen-readers.md
index c38ba3e65e..7f6faaedbe 100644
--- a/site/docs/4.3/utilities/screen-readers.md
+++ b/site/content/docs/4.3/utilities/screen-readers.md
@@ -7,19 +7,14 @@ group: utilities
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.
-{%- comment -%}
-Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
-{%- endcomment -%}
-
-{% capture example %}
+{{< example >}}
Skip to main content
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% highlight scss %}
+{{< highlight scss >}}
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
-{% endhighlight %}
+{{< /highlight >}}
diff --git a/site/docs/4.3/utilities/shadows.md b/site/content/docs/4.3/utilities/shadows.md
similarity index 89%
rename from site/docs/4.3/utilities/shadows.md
rename to site/content/docs/4.3/utilities/shadows.md
index 9c3e580440..2803031d66 100644
--- a/site/docs/4.3/utilities/shadows.md
+++ b/site/content/docs/4.3/utilities/shadows.md
@@ -9,10 +9,9 @@ group: utilities
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).
-{% capture example %}
+{{< example >}}
No shadow
Small shadow
Regular shadow
Larger shadow
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.3/utilities/sizing.md b/site/content/docs/4.3/utilities/sizing.md
similarity index 75%
rename from site/docs/4.3/utilities/sizing.md
rename to site/content/docs/4.3/utilities/sizing.md
index 1b0acf07ac..838e9b7f76 100644
--- a/site/docs/4.3/utilities/sizing.md
+++ b/site/content/docs/4.3/utilities/sizing.md
@@ -10,16 +10,15 @@ 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.
-{% capture example %}
+{{< example >}}
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Height 25%
Height 50%
@@ -27,30 +26,27 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
Height 100%
Height auto
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
-{% capture example %}
-{% include icons/placeholder.svg width="100%" height="100" class="mw-100" text="Max-width 100%" %}
-{% endcapture %}
-{% include example.html content=example %}
+{{< example >}}
+{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}}
+{{< /example >}}
-{% capture example %}
-
-
Max-height 100%
+{{< example >}}
+
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Relative to the viewport
You can also use utilities to set the width and height relative to the viewport.
-{% highlight html %}
+{{< highlight html >}}
Min-width 100vw
Min-height 100vh
Width 100vw
Height 100vh
-{% endhighlight %}
+{{< /highlight >}}
diff --git a/site/docs/4.3/utilities/spacing.md b/site/content/docs/4.3/utilities/spacing.md
similarity index 95%
rename from site/docs/4.3/utilities/spacing.md
rename to site/content/docs/4.3/utilities/spacing.md
index 09e17e0445..25e1579d68 100644
--- a/site/docs/4.3/utilities/spacing.md
+++ b/site/content/docs/4.3/utilities/spacing.md
@@ -47,7 +47,7 @@ Where *size* is one of:
Here are some representative examples of these classes:
-{% highlight scss %}
+{{< highlight scss >}}
.mt-0 {
margin-top: 0 !important;
}
@@ -64,7 +64,7 @@ Here are some representative examples of these classes:
.p-3 {
padding: $spacer !important;
}
-{% endhighlight %}
+{{< /highlight >}}
### Horizontal centering
@@ -76,11 +76,11 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
-{% highlight html %}
+{{< highlight html >}}
Centered element
-{% endhighlight %}
+{{< /highlight >}}
### Negative margin
@@ -88,18 +88,17 @@ In CSS, `margin` properties can utilize negative values (`padding` cannot). As o
The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
-{% highlight scss %}
+{{< highlight scss >}}
.mt-n1 {
margin-top: -0.25rem !important;
}
-{% endhighlight %}
+{{< /highlight >}}
Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.3/utilities/stretched-link.md b/site/content/docs/4.3/utilities/stretched-link.md
similarity index 82%
rename from site/docs/4.3/utilities/stretched-link.md
rename to site/content/docs/4.3/utilities/stretched-link.md
index 1d4d2ad317..7207bcaf5a 100644
--- a/site/docs/4.3/utilities/stretched-link.md
+++ b/site/content/docs/4.3/utilities/stretched-link.md
@@ -11,38 +11,36 @@ Cards have `position: relative` by default in Bootstrap, so in this case you can
Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required.
-{% capture example %}
+{{< example >}}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %}
+ {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
Card with stretched link
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Media objects do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the media object.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Columns are `position: relative` by default, so clickable columns only require the `.stretched-link` class on a link. However, stretching a link over an entire `.row` requires `.position-static` on the column and `.position-relative` on the row.
-{% capture example %}
+{{< example >}}
- {% include icons/placeholder.svg width="100%" height="200" class="w-100" text=" " title="Generic placeholder image" %}
+ {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
Columns with stretched link
@@ -50,8 +48,7 @@ Columns are `position: relative` by default, so clickable columns only require t
Go somewhere
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Identifying the containing block
@@ -62,9 +59,9 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
- A `will-change` value of `transform` or `perspective`
- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox)
-{% capture example %}
+{{< example >}}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %}
+ {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
Card with stretched links
Some quick example text to build on the card title and make up the bulk of the card's content.
@@ -76,5 +73,4 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.3/utilities/text.md b/site/content/docs/4.3/utilities/text.md
similarity index 80%
rename from site/docs/4.3/utilities/text.md
rename to site/content/docs/4.3/utilities/text.md
index d25564a186..76708e8316 100644
--- a/site/docs/4.3/utilities/text.md
+++ b/site/content/docs/4.3/utilities/text.md
@@ -10,14 +10,13 @@ toc: true
Easily realign text to components with text alignment classes.
-{% capture example %}
+{{< example >}}
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.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
-{% capture example %}
+{{< example >}}
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
@@ -26,32 +25,29 @@ For left, right, and center alignment, responsive classes are available that use
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Text wrapping and overflow
Wrap text with a `.text-wrap` class.
-{% capture example %}
+{{< example >}}
This text should wrap.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Prevent text from wrapping with a `.text-nowrap` class.
-{% capture example %}
+{{< example >}}
This text should overflow the parent.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /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`.**
-{% capture example %}
+{{< example >}}
@@ -63,28 +59,25 @@ For longer content, you can add a `.text-truncate` class to truncate the text wi
Praeterea iter est quasdam res quas ex communi.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Word break
Prevent long strings of text from breaking your components' layout by using `.text-break` to set `overflow-wrap: break-word` (and `word-break: break-word` for IE & Edge compatibility).
-{% capture example %}
+{{< example >}}
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Text transform
Transform text in components with text capitalization classes.
-{% capture example %}
+{{< example >}}
Lowercased text.
Uppercased text.
CapiTaliZed text.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Note how `.text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
@@ -92,41 +85,37 @@ Note how `.text-capitalize` only changes the first letter of each word, leaving
Quickly change the weight (boldness) of text or italicize text.
-{% capture example %}
+{{< example >}}
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Monospace
Change a selection to our monospace font stack with `.text-monospace`.
-{% capture example %}
+{{< example >}}
This is in monospace
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Reset color
Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
-{% capture example %}
+{{< example >}}
Muted text with a reset link.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Text decoration
Remove a text decoration with a `.text-decoration-none` class.
-{% capture example %}
+{{< example >}}
Non-underlined link
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.3/utilities/vertical-align.md b/site/content/docs/4.3/utilities/vertical-align.md
similarity index 88%
rename from site/docs/4.3/utilities/vertical-align.md
rename to site/content/docs/4.3/utilities/vertical-align.md
index bc4f0b950a..b2c16b569c 100644
--- a/site/docs/4.3/utilities/vertical-align.md
+++ b/site/content/docs/4.3/utilities/vertical-align.md
@@ -11,19 +11,18 @@ Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `
With inline elements:
-{% capture example %}
+{{< example >}}
baseline
top
middle
bottom
text-top
text-bottom
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
With table cells:
-{% capture example %}
+{{< example >}}
@@ -36,5 +35,4 @@ With table cells:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.3/utilities/visibility.md b/site/content/docs/4.3/utilities/visibility.md
similarity index 91%
rename from site/docs/4.3/utilities/visibility.md
rename to site/content/docs/4.3/utilities/visibility.md
index bbfc0cbbc6..d7d76ecf13 100644
--- a/site/docs/4.3/utilities/visibility.md
+++ b/site/content/docs/4.3/utilities/visibility.md
@@ -9,12 +9,12 @@ Set the `visibility` of elements with our visibility utilities. These utility cl
Apply `.visible` or `.invisible` as needed.
-{% highlight html %}
+{{< highlight html >}}
...
...
-{% endhighlight %}
+{{< /highlight >}}
-{% highlight scss %}
+{{< highlight scss >}}
// Class
.visible {
visibility: visible !important;
@@ -31,4 +31,4 @@ Apply `.visible` or `.invisible` as needed.
.element {
@include invisible(hidden);
}
-{% endhighlight %}
+{{< /highlight >}}
diff --git a/site/content/docs/versions.md b/site/content/docs/versions.md
new file mode 100644
index 0000000000..52940566b9
--- /dev/null
+++ b/site/content/docs/versions.md
@@ -0,0 +1,6 @@
+---
+title: Versions
+description: An appendix of hosted documentation for nearly every release of Bootstrap, from v1 through v4.
+---
+
+{{< list-versions >}}
diff --git a/site/_data/breakpoints.yml b/site/data/breakpoints.yml
similarity index 100%
rename from site/_data/breakpoints.yml
rename to site/data/breakpoints.yml
diff --git a/site/_data/browser-bugs.yml b/site/data/browser-bugs.yml
similarity index 99%
rename from site/_data/browser-bugs.yml
rename to site/data/browser-bugs.yml
index 7138c75b42..c4fa93a1f1 100644
--- a/site/_data/browser-bugs.yml
+++ b/site/data/browser-bugs.yml
@@ -166,7 +166,7 @@
upstream_bug: >
Chromium#419108
origin: >
- Offshoot of Bootstrap#8350 & Chromium#337668
+ Bootstrap#8350, Chromium#337668
-
browser: >
diff --git a/site/_data/browser-features.yml b/site/data/browser-features.yml
similarity index 100%
rename from site/_data/browser-features.yml
rename to site/data/browser-features.yml
diff --git a/site/_data/colors.yml b/site/data/colors.yml
similarity index 100%
rename from site/_data/colors.yml
rename to site/data/colors.yml
diff --git a/site/_data/core-team.yml b/site/data/core-team.yml
similarity index 100%
rename from site/_data/core-team.yml
rename to site/data/core-team.yml
diff --git a/site/data/docs-versions.yml b/site/data/docs-versions.yml
new file mode 100644
index 0000000000..e48332cea3
--- /dev/null
+++ b/site/data/docs-versions.yml
@@ -0,0 +1,44 @@
+- group: v1.x
+ baseurl: "https://getbootstrap.com"
+ description: "Every minor and patch release from v1 is listed below."
+ versions:
+ - v: "1.0.0"
+ - v: "1.1.0"
+ - v: "1.1.1"
+ - v: "1.2.0"
+ - v: "1.3.0"
+ - v: "1.4.0"
+
+- group: v2.x
+ baseurl: "https://getbootstrap.com"
+ description: "Every minor and patch release from v2 is listed below."
+ versions:
+ - v: "2.0.0"
+ - v: "2.0.1"
+ - v: "2.0.2"
+ - v: "2.0.3"
+ - v: "2.0.4"
+ - v: "2.1.0"
+ - v: "2.1.1"
+ - v: "2.2.0"
+ - v: "2.2.1"
+ - v: "2.2.2"
+ - v: "2.3.0"
+ - v: "2.3.1"
+ - v: "2.3.2"
+
+- group: v3.x
+ baseurl: "https://getbootstrap.com/docs"
+ description: "Our previous major release and its minor versions. Last update was v3.4.1."
+ versions:
+ - v: "3.3"
+ - v: "3.4"
+
+- group: v4.x
+ baseurl: "https://getbootstrap.com/docs"
+ description: "Current major release with two minor releases. Last update was v4.3.1."
+ versions:
+ - v: "4.0"
+ - v: "4.1"
+ - v: "4.2"
+ - v: "4.3"
diff --git a/site/_data/examples.yml b/site/data/examples.yml
similarity index 98%
rename from site/_data/examples.yml
rename to site/data/examples.yml
index 673fde40b6..6fb65d7f6b 100644
--- a/site/_data/examples.yml
+++ b/site/data/examples.yml
@@ -1,4 +1,4 @@
-- category: Custom components
+- category: Custom Components
description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
examples:
- name: Album
diff --git a/site/_data/grays.yml b/site/data/grays.yml
similarity index 100%
rename from site/_data/grays.yml
rename to site/data/grays.yml
diff --git a/site/_data/nav.yml b/site/data/nav.yml
similarity index 100%
rename from site/_data/nav.yml
rename to site/data/nav.yml
diff --git a/site/_data/theme-colors.yml b/site/data/theme-colors.yml
similarity index 100%
rename from site/_data/theme-colors.yml
rename to site/data/theme-colors.yml
diff --git a/site/_data/translations.yml b/site/data/translations.yml
similarity index 100%
rename from site/_data/translations.yml
rename to site/data/translations.yml
diff --git a/site/docs/4.3/about/team.md b/site/docs/4.3/about/team.md
deleted file mode 100644
index 93aecf882f..0000000000
--- a/site/docs/4.3/about/team.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: docs
-title: Team
-description: An overview of the founding team and core contributors to Bootstrap.
-group: about
----
-
-Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
-
-
-
-Get involved with Bootstrap development by [opening an issue]({{ site.repo }}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{ site.repo }}/blob/v{{ site.current_version }}/.github/CONTRIBUTING.md) for information on how we develop.
diff --git a/site/docs/4.3/content/figures.md b/site/docs/4.3/content/figures.md
deleted file mode 100644
index a647fc1d0b..0000000000
--- a/site/docs/4.3/content/figures.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: docs
-title: Figures
-description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
-group: content
----
-
-Anytime you need to display a piece of content—like an image with an optional caption, consider using a `
`.
-
-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.
-
-{% capture example %}
-
- {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %}
- A caption for the above image.
-
-{% 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).
-
-{% capture example %}
-
- {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %}
- A caption for the above image.
-
-{% endcapture %}
-{% include example.html content=example %}
diff --git a/site/docs/4.3/content/images.md b/site/docs/4.3/content/images.md
deleted file mode 100644
index fa18ec2583..0000000000
--- a/site/docs/4.3/content/images.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: docs
-title: Images
-description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
-group: content
-toc: true
----
-
-## Responsive images
-
-Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
-
-
- {% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" %}
-
-
-{% highlight html %}
-
-{% endhighlight %}
-
-## Image thumbnails
-
-In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
-
-
- {% include icons/placeholder.svg width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" %}
-
-
-{% highlight html %}
-
-{% endhighlight %}
-
-## Aligning images
-
-Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
-
-
- {% include icons/placeholder.svg width="200" height="200" class="rounded float-left" %}
- {% include icons/placeholder.svg width="200" height="200" class="rounded float-right" %}
-
-
-{% highlight html %}
-
-
-{% endhighlight %}
-
-
- {% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" %}
-
-
-{% highlight html %}
-
-{% endhighlight %}
-
-
-
- {% include icons/placeholder.svg width="200" height="200" class="rounded" %}
-
-
-
-{% highlight html %}
-
-

-
-{% endhighlight %}
-
-
-## Picture
-
-If you are using the `` element to specify multiple `` elements for a specific `
`, make sure to add the `.img-*` classes to the `
` and not to the `` tag.
-
-{% highlight html %}
-
-
-
-
-{% endhighlight %}
diff --git a/site/docs/4.3/examples/index.html b/site/docs/4.3/examples/index.html
deleted file mode 100644
index 965c275646..0000000000
--- a/site/docs/4.3/examples/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-layout: simple
-title: Examples
-description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-redirect_from: "/examples/"
----
-
-{% for entry in site.data.examples %}
- {{ entry.category | capitalize }}
- {{ entry.description }}
- {% for example in entry.examples %}
- {% if forloop.first %}{% endif %}
-
- {% if forloop.last %}
{% endif %}
- {% endfor %}
-{% endfor %}
diff --git a/site/docs/4.3/layout/utilities-for-layout.md b/site/docs/4.3/layout/utilities-for-layout.md
deleted file mode 100644
index a62a5abe04..0000000000
--- a/site/docs/4.3/layout/utilities-for-layout.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-layout: docs
-title: Utilities for layout
-description: For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
-group: layout
-toc: true
----
-
-## Changing `display`
-
-Use our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
-
-## Flexbox options
-
-Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/alerts/) are built with flexbox enabled.
-
-Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) for sizing, alignment, spacing, and more.
-
-## Margin and padding
-
-Use the `margin` and `padding` [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
-
-## Toggle `visibility`
-
-When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
diff --git a/site/docs/versions.html b/site/docs/versions.html
deleted file mode 100644
index 4f8f4ea3ac..0000000000
--- a/site/docs/versions.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: simple
-title: Versions
-description: An appendix of hosted documentation for nearly every release of Bootstrap, from v1 through v4.
----
-
-
-{% for release in site.data.docs-versions %}
-
-
{{ release.group }}
-
{{ release.description }}
- {% assign versions = release.versions | reverse %}
- {% for version in versions %}
- {% if forloop.first %}
{% endif %}
- {% endfor %}
-
-{% endfor %}
-
diff --git a/site/index.html b/site/index.html
deleted file mode 100644
index 661fc55ce2..0000000000
--- a/site/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-layout: home
----
-
-
-
-
-
- {% include icons/bootstrap-stack.svg width="512" height="430" class="img-fluid mb-3 mb-md-0" %}
-
-
-
Bootstrap
-
- Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
-
-
- Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built with VanillaJS.
-
-
-
- Currently v{{ site.current_version }}
-
-
-
- {% include ads.html %}
-
-
-
-
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
new file mode 100644
index 0000000000..7ef4925e1f
--- /dev/null
+++ b/site/layouts/_default/docs.html
@@ -0,0 +1,34 @@
+
+
+
+ {{ partial "header" . }}
+
+
+ {{ partial "skippy" . }}
+
+ {{ partial "docs-navbar" . }}
+
+
+
+
+
+ {{ if (eq .Page.Params.toc true) }}
+
+ {{ .TableOfContents }}
+
+ {{ end }}
+
+
+ {{ .Title | markdownify }}
+ {{ .Page.Params.Description | markdownify }}
+ {{ partial "ads" . }}
+ {{ .Content }}
+
+
+
+
+ {{ partial "scripts" . }}
+
+
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
new file mode 100644
index 0000000000..a62abad007
--- /dev/null
+++ b/site/layouts/_default/examples.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+ {{ .Page.Title | markdownify }} · {{ .Site.Title | markdownify }}
+
+
+
+ {{ partial "stylesheet" . }}
+
+
+
+ {{ range .Page.Params.extra_css }}
+ {{ "" | safeHTML }}
+
+ {{- end }}
+
+
+ {{ .Content }}
+
+ {{ if ne .Page.Params.include_js false }}
+ {{ if eq (getenv "HUGO_ENV") "production" }}
+
+ {{ else }}
+
+ {{ end }}
+
+ {{ range .Page.Params.extra_js }}
+
+ {{- end }}
+ {{ end }}
+
+
diff --git a/site/layouts/_default/home.html b/site/layouts/_default/home.html
new file mode 100644
index 0000000000..c03de11abb
--- /dev/null
+++ b/site/layouts/_default/home.html
@@ -0,0 +1,19 @@
+
+
+
+ {{ partial "header" . }}
+
+
+ {{ partial "skippy" . }}
+
+ {{ partial "docs-navbar" . }}
+
+ {{ partial "home/masthead" . }}
+ {{ partial "home/masthead-followup" . }}
+
+ {{ .Content }}
+
+ {{ partial "footer" . }}
+ {{ partial "scripts" . }}
+
+
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
new file mode 100644
index 0000000000..8f84570bc2
--- /dev/null
+++ b/site/layouts/_default/single.html
@@ -0,0 +1,29 @@
+
+
+
+ {{ partial "header" . }}
+
+
+ {{ partial "skippy" . }}
+
+ {{ partial "docs-navbar" . }}
+
+
+
+
+ {{ .Content }}
+
+
+ {{ partial "footer" . }}
+ {{ partial "scripts" . }}
+
+
diff --git a/site/layouts/alias.html b/site/layouts/alias.html
new file mode 100644
index 0000000000..4c4b4d87dd
--- /dev/null
+++ b/site/layouts/alias.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ {{ .Permalink }}
+
+
+
+
+
diff --git a/site/_includes/ads.html b/site/layouts/partials/ads.html
similarity index 100%
rename from site/_includes/ads.html
rename to site/layouts/partials/ads.html
diff --git a/site/_includes/analytics.html b/site/layouts/partials/analytics.html
similarity index 100%
rename from site/_includes/analytics.html
rename to site/layouts/partials/analytics.html
diff --git a/site/_includes/callout-danger-async-methods.md b/site/layouts/partials/callout-danger-async-methods.md
similarity index 54%
rename from site/_includes/callout-danger-async-methods.md
rename to site/layouts/partials/callout-danger-async-methods.md
index 083f28f238..4ac5b27b39 100644
--- a/site/_includes/callout-danger-async-methods.md
+++ b/site/layouts/partials/callout-danger-async-methods.md
@@ -1,8 +1,5 @@
-{% capture callout %}
#### Asynchronous methods and transitions
All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
-[See our JavaScript documentation for more information]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/).
-{% endcapture %}
-{% include callout.html content=callout type="danger" %}
+[See our JavaScript documentation for more information](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/).
diff --git a/site/_includes/callout-info-mediaqueries-breakpoints.md b/site/layouts/partials/callout-info-mediaqueries-breakpoints.md
similarity index 81%
rename from site/_includes/callout-info-mediaqueries-breakpoints.md
rename to site/layouts/partials/callout-info-mediaqueries-breakpoints.md
index d3988ce1a3..e3660e462a 100644
--- a/site/_includes/callout-info-mediaqueries-breakpoints.md
+++ b/site/layouts/partials/callout-info-mediaqueries-breakpoints.md
@@ -1,4 +1 @@
-{% capture callout %}
Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
diff --git a/site/layouts/partials/callout-info-prefersreducedmotion.md b/site/layouts/partials/callout-info-prefersreducedmotion.md
new file mode 100644
index 0000000000..d258fbe482
--- /dev/null
+++ b/site/layouts/partials/callout-info-prefersreducedmotion.md
@@ -0,0 +1 @@
+The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility/#reduced-motion).
diff --git a/site/_includes/callout-warning-color-assistive-technologies.md b/site/layouts/partials/callout-warning-color-assistive-technologies.md
similarity index 81%
rename from site/_includes/callout-warning-color-assistive-technologies.md
rename to site/layouts/partials/callout-warning-color-assistive-technologies.md
index 98214eb58d..f0c2e9de53 100644
--- a/site/_includes/callout-warning-color-assistive-technologies.md
+++ b/site/layouts/partials/callout-warning-color-assistive-technologies.md
@@ -1,6 +1,3 @@
-{% capture callout %}
##### Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
new file mode 100644
index 0000000000..4e340ec457
--- /dev/null
+++ b/site/layouts/partials/docs-navbar.html
@@ -0,0 +1,71 @@
+
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
new file mode 100644
index 0000000000..789b678a15
--- /dev/null
+++ b/site/layouts/partials/docs-sidebar.html
@@ -0,0 +1,43 @@
+
+
+
+ {{- $url := split .URL "/" -}}
+ {{- $page_slug := index $url (sub (len $url) 2) -}}
+
+ {{- range $group := .Site.Data.nav -}}
+ {{- $link := $group.title -}}
+ {{- $link_slug := $link | urlize -}}
+
+ {{- if $group.pages -}}
+ {{- $link = index $group.pages 0 -}}
+ {{- $link_slug = $link.title | urlize -}}
+ {{- end -}}
+
+ {{- $group_slug := $group.title | urlize -}}
+ {{- $active_group := eq $.Page.Params.group $group_slug }}
+
+
+ {{- end }}
+
diff --git a/site/layouts/partials/favicons.html b/site/layouts/partials/favicons.html
new file mode 100644
index 0000000000..61733e32db
--- /dev/null
+++ b/site/layouts/partials/favicons.html
@@ -0,0 +1,9 @@
+{{ "" | safeHTML }}
+
+
+
+
+
+
+
+
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
new file mode 100644
index 0000000000..29e80d30f6
--- /dev/null
+++ b/site/layouts/partials/footer.html
@@ -0,0 +1,12 @@
+
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
new file mode 100644
index 0000000000..c748fd82ee
--- /dev/null
+++ b/site/layouts/partials/header.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.description | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }}{{ end }}
+
+
+
+{{ partial "stylesheet" . }}
+{{ partial "favicons" . }}
+{{ partial "social" . }}
+{{ partial "analytics" . }}
diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
new file mode 100644
index 0000000000..c852850658
--- /dev/null
+++ b/site/layouts/partials/home/masthead-followup.html
@@ -0,0 +1,46 @@
+
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
new file mode 100644
index 0000000000..4069d6378f
--- /dev/null
+++ b/site/layouts/partials/home/masthead.html
@@ -0,0 +1,30 @@
+
+
+
+
+ {{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }}
+
+
+
Bootstrap
+
+ Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
+
+
+ Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built with VanillaJS.
+
+
+
+ Currently v{{ .Site.Params.current_version }}
+
+
+
+ {{ partial "ads.html" . }}
+
+
diff --git a/site/layouts/partials/icons/bootstrap-stack.svg b/site/layouts/partials/icons/bootstrap-stack.svg
new file mode 100644
index 0000000000..1e3913042e
--- /dev/null
+++ b/site/layouts/partials/icons/bootstrap-stack.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/bootstrap.svg b/site/layouts/partials/icons/bootstrap.svg
new file mode 100644
index 0000000000..0277389a6b
--- /dev/null
+++ b/site/layouts/partials/icons/bootstrap.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/download.svg b/site/layouts/partials/icons/download.svg
new file mode 100644
index 0000000000..05385434de
--- /dev/null
+++ b/site/layouts/partials/icons/download.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/github.svg b/site/layouts/partials/icons/github.svg
new file mode 100644
index 0000000000..cacd860c28
--- /dev/null
+++ b/site/layouts/partials/icons/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/import.svg b/site/layouts/partials/icons/import.svg
new file mode 100644
index 0000000000..bc38ee57cb
--- /dev/null
+++ b/site/layouts/partials/icons/import.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/lightning.svg b/site/layouts/partials/icons/lightning.svg
new file mode 100644
index 0000000000..cd9138ad83
--- /dev/null
+++ b/site/layouts/partials/icons/lightning.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/menu.svg b/site/layouts/partials/icons/menu.svg
new file mode 100644
index 0000000000..78c43d85c9
--- /dev/null
+++ b/site/layouts/partials/icons/menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/opencollective.svg b/site/layouts/partials/icons/opencollective.svg
new file mode 100644
index 0000000000..4a477a4978
--- /dev/null
+++ b/site/layouts/partials/icons/opencollective.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/slack.svg b/site/layouts/partials/icons/slack.svg
new file mode 100644
index 0000000000..67b9c7f485
--- /dev/null
+++ b/site/layouts/partials/icons/slack.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/icons/twitter.svg b/site/layouts/partials/icons/twitter.svg
new file mode 100644
index 0000000000..b102181a5f
--- /dev/null
+++ b/site/layouts/partials/icons/twitter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
new file mode 100644
index 0000000000..e2f9bc407e
--- /dev/null
+++ b/site/layouts/partials/scripts.html
@@ -0,0 +1,19 @@
+{{ if eq (getenv "HUGO_ENV") "production" -}}
+
+{{ else -}}
+
+{{- end }}
+
+{{ if eq .Page.Layout "docs" -}}
+
+{{- end }}
+
+{{- if eq (getenv "HUGO_ENV") "production" -}}
+
+{{- else -}}
+
+
+
+
+
+{{- end -}}
diff --git a/site/_includes/skippy.html b/site/layouts/partials/skippy.html
similarity index 100%
rename from site/_includes/skippy.html
rename to site/layouts/partials/skippy.html
diff --git a/site/layouts/partials/social.html b/site/layouts/partials/social.html
new file mode 100644
index 0000000000..151a629945
--- /dev/null
+++ b/site/layouts/partials/social.html
@@ -0,0 +1,18 @@
+{{ "" | safeHTML }}
+
+
+
+
+
+
+
+{{ "" | safeHTML }}
+
+
+
+
+
+
+
+
+
diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html
new file mode 100644
index 0000000000..749a3314e6
--- /dev/null
+++ b/site/layouts/partials/stylesheet.html
@@ -0,0 +1,16 @@
+{{- "" | safeHTML }}
+{{ if eq (getenv "HUGO_ENV") "production" -}}
+
+{{- else -}}
+
+{{- end }}
+
+{{ if (or (eq .Page.Layout "docs") (ne .Page.Layout "examples")) -}}
+{{- "" | safeHTML }}
+{{ if eq .Page.Layout "docs" -}}
+
+{{- end -}}
+{{- if (ne .Page.Layout "examples") }}
+
+{{- end -}}
+{{- end }}
diff --git a/site/layouts/robots.txt b/site/layouts/robots.txt
new file mode 100644
index 0000000000..e9d78f1aed
--- /dev/null
+++ b/site/layouts/robots.txt
@@ -0,0 +1,8 @@
+# www.robotstxt.org
+
+{{ if (eq (getenv "HUGO_ENV") "production") -}}
+# Allow crawling of all content
+{{- end }}
+User-agent: *
+Disallow:{{ if (ne (getenv "HUGO_ENV") "production") }} /{{ end }}
+Sitemap: {{ .Site.BaseURL }}/sitemap.xml
diff --git a/site/layouts/shortcodes/bugify.html b/site/layouts/shortcodes/bugify.html
new file mode 100644
index 0000000000..b064d29a5e
--- /dev/null
+++ b/site/layouts/shortcodes/bugify.html
@@ -0,0 +1,40 @@
+{{- $words := (split .Inner " ") -}}
+
+{{- range $word := $words -}}
+ {{- if (strings.Contains $word "#") -}}
+ {{- $separator := false -}}
+
+ {{- if (strings.Contains $word ",") -}}
+ {{- $separator = true -}}
+ {{- end -}}
+
+ {{- $data := split $word "#" -}}
+ {{- $bug_cat := replace (index $data 0) "\n" "" -}}
+ {{- $bug_id := replace (index $data 1) "\n" "" -}}
+ {{- $bug_id = replace $bug_id "," "" -}}
+
+ {{- if (eq $bug_cat "Bootstrap") -}}
+ #{{ $bug_id }}
+ {{- else if (eq $bug_cat "Edge") -}}
+ Edge issue #{{ $bug_id }}
+ {{- else if (eq $bug_cat "A11yUserVoice") -}}
+ Microsoft A11y UserVoice idea #{{ $bug_id }}
+ {{- else if (eq $bug_cat "UserVoice") -}}
+ Edge UserVoice idea #{{ $bug_id }}
+ {{- else if (eq $bug_cat "Mozilla") -}}
+ Mozilla bug #{{ $bug_id }}
+ {{- else if (eq $bug_cat "Chromium") -}}
+ Chromium issue #{{ $bug_id }}
+ {{- else if (eq $bug_cat "WebKit") -}}
+ WebKit bug #{{ $bug_id }}
+ {{- else if (eq $bug_cat "Safari") -}}
+ Apple Safari Radar #{{ $bug_id }}
+ {{- else if (eq $bug_cat "Normalize") -}}
+ Normalize #{{ $bug_id }}
+ {{- end -}}
+ {{- if (eq $separator true) }}, {{ end -}}
+
+ {{- else -}}
+ {{- $word -}}
+ {{- end -}}
+{{- end -}}
diff --git a/site/layouts/shortcodes/callout.html b/site/layouts/shortcodes/callout.html
new file mode 100644
index 0000000000..007f8a8e8e
--- /dev/null
+++ b/site/layouts/shortcodes/callout.html
@@ -0,0 +1,10 @@
+{{- /*
+ Usage: `callout "type"`,
+ where type is one of info (default), danger, warning
+*/ -}}
+
+{{- $css_class := .Get 0 | default "info" -}}
+
+
+{{ .Inner | markdownify }}
+
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
new file mode 100644
index 0000000000..67813b70fe
--- /dev/null
+++ b/site/layouts/shortcodes/example.html
@@ -0,0 +1,53 @@
+{{- /*
+ Usage: `example [args]`
+
+ `args` are optional and can be one of the following:
+ id: the `div`'s id - default: ""
+ class: any extra class(es) to be added to the `div` - default ""
+ show_preview: if the preview should be output in the HTML - default: `true`
+ show_markup: if the markup should be output in the HTML - default: `true`
+*/ -}}
+
+{{- $show_preview := .Get "show_preview" | default true -}}
+{{- $show_markup := .Get "show_markup" | default true -}}
+{{- $input := .Inner -}}
+
+{{- if eq $show_preview true -}}
+
+ {{- $input -}}
+
+{{- end -}}
+
+{{- if eq $show_markup true -}}
+ {{- $.Scratch.Set "highlight_content" $input -}}
+
+ {{- if (strings.Contains $input `✂️" -}}
+ {{- $modified_content = split $modified_content "✂️" -}}
+
+ {{- if (strings.Contains $input `