// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
+// scss-docs-start grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
xl: 1200px,
xxl: 1400px
) !default;
+// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
//
// Define the maximum width of `.container` for different screen sizes.
+// scss-docs-start container-max-widths
$container-max-widths: (
sm: 540px,
md: 720px,
xl: 1140px,
xxl: 1320px
) !default;
+// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
+// scss-docs-start zindex-stack
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
+// scss-docs-end zindex-stack
// Navs
--- /dev/null
+.bd-layout {
+ @include media-breakpoint-up(md) {
+ display: grid;
+ gap: $grid-gutter-width;
+ grid-template-areas:
+ "sidebar intro"
+ "sidebar toc"
+ "sidebar content";
+ grid-template-columns: 1fr 3fr;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "sidebar intro toc"
+ "sidebar content toc";
+ grid-template-columns: 1fr 4fr 1fr;
+ }
+}
+
+.bd-sidebar {
+ grid-area: sidebar;
+}
+
+.bd-intro {
+ grid-area: intro;
+}
+
+.bd-toc {
+ grid-area: toc;
+}
+
+.bd-content {
+ grid-area: content;
+ min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}
-// stylelint-disable selector-max-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type
-.bd-toc-wrap {
+.bd-toc {
@include media-breakpoint-up(lg) {
@supports (position: sticky) {
position: sticky;
overflow-y: auto;
}
}
-}
-
-.bd-toc nav {
- @include font-size(.875rem);
- ul {
- padding-left: 0;
- list-style: none;
+ nav {
+ @include font-size(.875rem);
ul {
- padding-left: 1rem;
- margin-top: .25rem;
+ padding-left: 0;
+ list-style: none;
+
+ ul {
+ padding-left: 1rem;
+ margin-top: .25rem;
+ }
}
- }
- li {
- margin-bottom: .25rem;
- }
+ li {
+ margin-bottom: .25rem;
+ }
- a {
- color: inherit;
- }
+ a {
+ color: inherit;
- a:not(:hover) {
- text-decoration: none;
- }
+ &:not(:hover) {
+ text-decoration: none;
+ }
- a code {
- font: inherit;
+ code {
+ font: inherit;
+ }
+ }
}
}
@import "content";
@import "skippy";
@import "sidebar";
+@import "layout";
@import "toc";
@import "footer";
@import "component-examples";
If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes.
-To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-right`.
{{< example >}}
<div class="btn-group">
</div>
{{< /example >}}
-To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl}-left`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-left`.
{{< example >}}
<div class="btn-group">
## Horizontal
-Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
Here's what you need to know before getting started with the navbar:
-- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
## Responsive behaviors
-Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
## 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}`.
+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|-xxl}`.
{{< callout warning >}}
##### Vertical clipping/truncation
### Breakpoint specific
-Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
**These tables may appear broken until their responsive styles apply at specific viewport widths.**
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
</div>
+ <div class="row mb-3">
+ <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+ <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+ <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+ </div>
+
<h2 class="mt-4">Three equal columns</h2>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row mb-3">
<hr class="my-4">
<h2 class="mt-4">Containers</h2>
- <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
+ <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
</div>
<div class="container themed-container">.container</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
+<div class="container-xxl themed-container">.container-xxl</div>
<div class="container-fluid themed-container">.container-fluid</div>
</div>
</nav>
+<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#">Expand at xxl</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+ <ul class="navbar-nav mr-auto mb-2 mb-xl-0">
+ <li class="nav-item active">
+ <a class="nav-link" aria-current="page" href="#">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
+ <ul class="dropdown-menu" aria-labelledby="dropdownXxl">
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form>
+ <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+ </form>
+ </div>
+ </div>
+</nav>
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.
-{{< highlight scss >}}
-$grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
- xxl: 1400px
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
-{{< highlight scss >}}
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px,
- xxl: 1320px
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
### Equal-width
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
{{< example class="bd-example-row" >}}
<div class="container">
{{< highlight scss >}}
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
+{{< /highlight >}}
-$grid-breakpoints: (
- // Extra small screen / phone
- xs: 0,
- // Small screen / phone
- sm: 576px,
- // Medium screen / tablet
- md: 768px,
- // Large screen / desktop
- lg: 992px,
- // Extra large screen / wide desktop
- xl: 1200px,
- // Extra extra large screen / wide desktop
- xxl: 1400px
-);
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px,
- xxl: 1320px
-);
-{{< /highlight >}}
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
### Mixins
We don't encourage customization of these individual values; should you change one, you likely need to change them all.
-{{< highlight scss >}}
-{{< zindex.inline >}}
-{{- $file := readFile "scss/_variables.scss" -}}
-{{- $matches := findRE `\$zindex\-.+;` $file -}}
-
-{{- if (eq (len $matches) 0) -}}
-{{- errorf "Got no matches for $zindex- in %q!" $.Page.Path -}}
-{{- end -}}
-
-{{- range $matches }}
-{{ . | replaceRE "\\s{13}" " " }}
-{{- end -}}
-
-{{< /zindex.inline >}}
-{{< /highlight >}}
+{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}
To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.
## Notation
-Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
* `.d-{value}` for `xs`
-* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
+* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *value* is one of:
The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
-The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.
+The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg`, `xl`, and `xxl` screens.
## Examples
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
-To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
+To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
<table class="table">
<thead>
<td>Hidden only on xl</td>
<td><code>.d-xl-none</code></td>
</tr>
+ <tr>
+ <td>Hidden only on xxl</td>
+ <td><code>.d-xxl-none</code></td>
+ </tr>
<tr>
<td>Visible on all</td>
<td><code>.d-block</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
- <td><code>.d-none .d-xl-block</code></td>
+ <td><code>.d-none .d-xl-block .d-xxl-none</code></td>
+ </tr>
+ <tr>
+ <td>Visible only on xxl</td>
+ <td><code>.d-none .d-xxl-block</code></td>
</tr>
</tbody>
</table>
## Notation
-Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *property* is one of:
- breakpoint: xs
abbr: ""
- name: Extra small
+ name: X-Small
min-width: 0px
container: ""
- breakpoint: xl
abbr: -xl
- name: Extra large
+ name: X-Large
min-width: 1200px
container: 1140px
+
+- breakpoint: xxl
+ abbr: -xxl
+ name: XX-Large
+ min-width: 1400px
+ container: 1320px
{{ partial "docs-navbar" . }}
{{ partial "docs-subnav" . }}
- <div class="container-xxl my-4">
- <div class="row flex-xl-nowrap">
- <div class="col-md-3 col-xl-2 bd-sidebar">
- {{ partial "docs-sidebar" . }}
- </div>
+ <div class="container-xxl my-4 bd-layout">
+ <div class="bd-sidebar">
+ {{ partial "docs-sidebar" . }}
+ </div>
- <main class="col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
- <div class="col-xl-10 px-0">
- <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
- <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
- {{ partial "ads" . }}
- </div>
+ <div class="bd-intro pt-md-3 pl-lg-4">
+ <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+ <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
+ {{ partial "ads" . }}
+ </div>
- {{ if .Page.Params.sections }}
- <div class="row my-5">
- {{ range .Page.Params.sections }}
- <div class="col-md-6 mb-4">
- <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
- <strong class="d-block h5 mb-0">{{ .title }}</strong>
- <span class="text-secondary">{{ .description }}</span>
- </a>
- </div>
- {{ end }}
- </div>
- {{ end }}
+ {{ if (eq .Page.Params.toc true) }}
+ <div class="bd-toc pl-xl-3 text-muted mb-lg-5">
+ <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
+ {{ .TableOfContents }}
+ </div>
+ {{ end }}
- <div class="row position-relative flex-xl-row-reverse">
- <div class="col-xl-3">
- {{ if (eq .Page.Params.toc true) }}
- <div class="bd-toc-wrap pl-xl-3 text-muted">
- <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
- <div class="bd-toc mb-5 mb-xl-0">
- {{ .TableOfContents }}
- </div>
- </div>
- {{ end }}
- </div>
- <div class="col-xl-9">
- {{ .Content }}
+ <main class="bd-content pl-lg-4">
+ {{ if .Page.Params.sections }}
+ <div class="row g-3">
+ {{ range .Page.Params.sections }}
+ <div class="col-md-6">
+ <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
+ <strong class="d-block h5 mb-0">{{ .title }}</strong>
+ <span class="text-secondary">{{ .description }}</span>
+ </a>
</div>
+ {{ end }}
</div>
+ {{ end }}
- </main>
- </div>
+ {{ .Content }}
+ </main>
</div>
{{ partial "footer" . }}
projects / thirdparty / bootstrap.git / commitdiff
