// 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: (
+// scss-docs-start breakpoints
+$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
- xxl: 1400px
+ 2xl: 1400px
) !default;
-// scss-docs-end grid-breakpoints
+// scss-docs-end breakpoints
// Grid columns
//
md: 720px,
lg: 960px,
xl: 1140px,
- xxl: 1320px
+ 2xl: 1320px
) !default;
// scss-docs-end container-max-widths
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
- @each $breakpoint in map.keys($grid-breakpoints) {
+ @each $breakpoint in map.keys($breakpoints) {
@include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") {
@if length($map) > 0 {
$values: map-values($map);
$first-value: nth($values, 1);
//
// Change the layout of list group items from vertical (default) to horizontal.
- @each $breakpoint in map.keys($grid-breakpoints) {
+ @each $breakpoint in map.keys($breakpoints) {
@include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
.list-group-horizontal#{$infix} {
flex-direction: row;
}
// scss-docs-start modal-fullscreen-loop
- @each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
- @each $breakpoint in map.keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $next: breakpoint-next($breakpoint, $breakpoints);
+ $infix: breakpoint-infix($next, $breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
// scss-docs-end offcanvas-css-vars
}
- @each $breakpoint in map.keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $next: breakpoint-next($breakpoint, $breakpoints);
+ $infix: breakpoint-infix($next, $breakpoints);
.offcanvas#{$infix} {
@extend %offcanvas-css-vars;
}
}
- @each $breakpoint in map.keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $next: breakpoint-next($breakpoint, $breakpoints);
+ $infix: breakpoint-infix($next, $breakpoints);
.offcanvas#{$infix} {
@include media-breakpoint-down($next) {
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
- --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
- --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+ --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-xxl),
+ 5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
// // adapting to different screen sizes, for use in media queries.
// // scss-docs-start grid-breakpoints
-// $grid-breakpoints: (
+// $breakpoints: (
// xs: 0,
// sm: 576px,
// md: 768px,
// lg: 992px,
// xl: 1200px,
-// xxl: 1400px
+// 2xl: 1400px
// ) !default;
// // scss-docs-end grid-breakpoints
-// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-ascending($breakpoints, "$breakpoints");
+// @include _assert-starts-at-zero($breakpoints, "$breakpoints");
// // Grid containers
// md: 720px,
// lg: 960px,
// xl: 1140px,
-// xxl: 1320px
+// 2xl: 1320px
// ) !default;
// // scss-docs-end container-max-widths
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
-$border-radius-xxl: 2rem !default;
+$border-radius-2xl: 2rem !default;
$border-radius-pill: 50rem !default;
// scss-docs-end border-radius-variables
// fusv-disable
-$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
+$border-radius-2xl: $border-radius-2xl !default; // Deprecated in v5.3.0
// fusv-enable
// scss-docs-start box-shadow-variables
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
- @each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-down($breakpoint) {
.table-responsive#{$infix} {
}
// Responsive sticky top and bottom
- @each $breakpoint in map.keys($grid-breakpoints) {
+ @each $breakpoint in map.keys($breakpoints) {
@include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
.sticky#{$infix}-top {
position: sticky;
@use "sass:map";
@use "../config" as *;
-
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
-// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)
//
-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+// The map defined in the `$breakpoints` global variable is used as the `$breakpoints` argument by default.
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
-// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// md
-// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
// md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
-// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// 576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-min($name, $breakpoints: $breakpoints) {
$min: map.get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width.
-// The maximum value is reduced by 0.02px to work around the limitations of
-// `min-` and `max-` prefixes and viewports with fractional widths.
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
-// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// 767.98px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-max($name, $breakpoints: $breakpoints) {
$max: map.get($breakpoints, $name);
- @return if($max and $max > 0, $max - .02, null);
+ @return if($max and $max > 0, $max, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
-// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// "" (Returns a blank string)
-// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px))
// "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+@function breakpoint-infix($name, $breakpoints: $breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
- @media (min-width: $min) {
+ @media (width >= $min) {
@content;
}
} @else {
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
- @media (max-width: $max) {
+ @media (width < $max) {
@content;
}
} @else {
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@if $min != null and $max != null {
- @media (min-width: $min) and (max-width: $max) {
+ @media ($min <= width < $max) {
@content;
}
} @else if $max == null {
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+@mixin media-breakpoint-only($name, $breakpoints: $breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next, $breakpoints);
@if $min != null and $max != null {
- @media (min-width: $min) and (max-width: $max) {
+ @media ($min <= width < $max) {
@content;
}
} @else if $max == null {
@extend .container-fluid;
}
- @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}
// Extend each breakpoint which is smaller or equal to the current breakpoint
$extend-breakpoint: true;
- @each $name, $width in $grid-breakpoints {
+ @each $name, $width in $breakpoints {
@if ($extend-breakpoint) {
- .container#{breakpoint-infix($name, $grid-breakpoints)} {
+ .container#{breakpoint-infix($name, $breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
@layer layout {
:root {
- @each $name, $value in $grid-breakpoints {
+ @each $name, $value in $breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}
gap: var(--#{$prefix}gap);
}
- @each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
- @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
@if $grid-columns > 0 {
@for $i from 1 through $grid-columns {
.col#{$infix}-#{$i} {
)
) !global;
- $grid-breakpoints: (
+ $breakpoints: (
xs: 0,
sm: 333px,
md: 666px
@layer utilities {
// Loop over each breakpoint
- @each $breakpoint in map.keys($grid-breakpoints) {
+ @each $breakpoint in map.keys($breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities {
// RFS rescaling
@media (min-width: $rfs-mq-value) {
- @each $breakpoint in map.keys($grid-breakpoints) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+ @each $breakpoint in map.keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
- @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ @if (map.get($breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
<div class="b-example-divider"></div>
-<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
+<div class="col-lg-6 col-2xl-4 my-5 mx-auto">
<div class="d-grid gap-2">
<button class="btn btn-outline-secondary" type="button">Secondary action</button>
<button class="btn btn-primary" type="button">Primary action</button>
</div>
<div class="row mb-3 text-center">
- <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 class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+ <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+ <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
</div>
<h2 class="mt-4">Three equal columns</h2>
<div class="container-md themed-container text-center">.container-md</div>
<div class="container-lg themed-container text-center">.container-lg</div>
<div class="container-xl themed-container text-center">.container-xl</div>
- <div class="container-xxl themed-container text-center">.container-xxl</div>
+ <div class="container-2xl themed-container text-center">.container-2xl</div>
<div class="container-fluid themed-container text-center">.container-fluid</div>
</main>
<div class="b-example-divider"></div>
- <div class="container col-xxl-8 px-4 py-5">
+ <div class="container col-2xl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
<div class="b-example-divider"></div>
- <div class="container col-xl-10 col-xxl-8 px-4 py-5">
+ <div class="container col-xl-10 col-2xl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
</div>
</nav>
- <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
+ <nav class="navbar navbar-expand-2xl navbar-dark bg-dark" aria-label="Seventh navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xxl</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
---
<header class="navbar navbar-expand-lg bd-navbar sticky-top">
- <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+ <nav class="container-2xl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
{
layout === 'docs' && (
<div class="bd-navbar-toggle">
---
<div class="bd-masthead mb-3" id="content">
- <div class="container-xxl bd-gutter">
+ <div class="container-2xl bd-gutter">
<div class="col-md-8 mx-auto text-center">
<a
class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none"
*/
name?:
| 'danger-async-methods'
- | 'info-mediaqueries-breakpoints'
| 'info-npm-starter'
| 'info-prefersreducedmotion'
| 'info-sanitizer'
+++ /dev/null
-**Why subtract .02px?** Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so 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.
If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-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|-xxl}-end`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-end`.
<Example code={`<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
</ul>
</div>`} />
-To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-start`.
<Example code={`<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
## 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|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.**
+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|2xl}` 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.
| `.modal-fullscreen-md-down` | `768px` |
| `.modal-fullscreen-lg-down` | `992px` |
| `.modal-fullscreen-xl-down` | `1200px` |
-| `.modal-fullscreen-xxl-down` | `1400px` |
+| `.modal-fullscreen-2xl-down` | `1400px` |
</BsTable>
<Example showMarkup={false} code={`<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>`} />
+ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen2xl">Full screen below 2xl</button>
+</div>
```html
<!-- Full screen modal -->
</div>
</div>
-<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
- <div class="modal-dialog modal-fullscreen-xxl-down">
+<div class="modal fade" id="exampleModalFullscreen2xl" tabindex="-1" aria-labelledby="exampleModalFullscreen2xlLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-2xl-down">
<div class="modal-content">
<div class="modal-header">
- <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
+ <h1 class="modal-title fs-4" id="exampleModalFullscreen2xlLabel">Full screen below 2xl</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
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|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` 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 use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine 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 use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` classes to determine 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.
- `.offcanvas-md`
- `.offcanvas-lg`
- `.offcanvas-xl`
-- `.offcanvas-xxl`
+- `.offcanvas-2xl`
To make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
## 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|-xxl}`.
+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|-2xl}`.
<Callout type="warning">
##### Vertical clipping/truncation
### Breakpoint specific
-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.
+Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` 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.**
## Responsive
-These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.
+These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$breakpoints` Sass map with a media query include.
<ScssDocs name="responsive-breakpoints" file="scss/_dropdown.scss" />
-Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
+Should you modify your `$breakpoints`, your changes will apply to all the loops iterating over that map.
<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
+<div class="sticky-2xl-top">Stick to the top on viewports sized 2xl (extra-extra-large) or wider</div>
```
## Sticky bottom
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
+<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2xl (extra-extra-large) or wider</div>
```
---
title: Breakpoints
-description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
+description: Breakpoints are customizable viewport widths that determine how your responsive layout behaves across device or window sizes in Bootstrap.
aliases: "/docs/[[config:docs_version]]/layout/"
toc: true
---
- **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size.
-- **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `min-width` in our media queries.
+- **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `width` in our media queries.
- **Mobile first, responsive design is the goal.** Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
| Medium | `md` | ≥768px |
| Large | `lg` | ≥992px |
| Extra large | `xl` | ≥1200px |
-| Extra extra large | `xxl` | ≥1400px |
+| Extra extra large | `2xl` | ≥1400px |
</BsTable>
-
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
These breakpoints are customizable via Sass—you’ll find them in a Sass map in our `_variables.scss` stylesheet.
-<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
+<ScssDocs name="breakpoints" file="scss/_config.scss" />
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).
## Media queries
-Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
+As Bootstrap is developed to be mobile first, we use range [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These media queries are generated and available to use as Sass mixins.
+
+It's worth noting that range media query syntax can be flexible. The following media queries all yield the same result.
+
+```scss
+// This range media query…
+@media (width >= 1400px) {
+ // ...
+}
+
+// …and this one as well…
+@media (1400px <= width) {
+ //...
+}
+
+// …are the same as this
+@media (min-width: 1400px) {
+ //...
+}
+```
-### Min-width
+### Minimum viewport width
-Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
+Bootstrap primarily uses media queries that target a specific minimum `width`, or breakpoint, to start applying styles. When used, these styles apply to the breakpoint passed as an argument, as well as every breakpoint larger than that. So for example, using a `md` breakpoint would target all viewports that are 768px or larger (`lg`, `xl`, and `2xl`).
```scss
// Source mixins
+<<<<<<< HEAD
// No media query necessary for xs breakpoint as it’s effectively `@media (min-width: 0) { ... }`
+=======
+// No media query necessary for xs breakpoint as it's effectively `@media (width > 0) { ... }`
+>>>>>>> ca2d5f613 (Breakpoints edits)
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
-@include media-breakpoint-up(xxl) { ... }
+@include media-breakpoint-up(2xl) { ... }
// Usage
-// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
+// Example: Hide starting at `width > 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) { ... }
+@media (width >= 576px) { ... }
// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) { ... }
+@media (width >= 768px) { ... }
// Large devices (desktops, 992px and up)
-@media (min-width: 992px) { ... }
+@media (width >= 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
+@media (width >= 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
-@media (min-width: 1400px) { ... }
+@media (width >= 1400px) { ... }
```
-### Max-width
+### Maximum viewport width
We occasionally use media queries that go in the other direction (the given screen size _or smaller_):
```scss
+<<<<<<< HEAD
// No media query necessary for xs breakpoint as it’s effectively `@media (max-width: 0) { ... }`
+=======
+// No media query necessary for xs breakpoint as it's effectively `@media (width < 0) { ... }`
+>>>>>>> ca2d5f613 (Breakpoints edits)
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
-@include media-breakpoint-down(xxl) { ... }
+@include media-breakpoint-down(2xl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) { ... }
+@media (width < 576px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
-@media (max-width: 767.98px) { ... }
+@media (width < 768px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
-@media (max-width: 991.98px) { ... }
+@media (width < 992px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
-@media (max-width: 1199.98px) { ... }
+@media (width < 1200px) { ... }
-// `xxl` applies to x-large devices (large desktops, less than 1400px)
-@media (max-width: 1399.98px) { ... }
+// `2xl` applies to x-large devices (large desktops, less than 1400px)
+@media (width < 1400px) { ... }
```
-<Callout name="info-mediaqueries-breakpoints" type="warning" />
-
### Single breakpoint
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
-@include media-breakpoint-only(xxl) { ... }
+@include media-breakpoint-only(2xl) { ... }
+```
+
+For example, targeting only the medium breakpoint like so:
+
+```scss
+@include media-breakpoint-only(md) { ... }
```
-For example the `@include media-breakpoint-only(md) { ... }` will result in :
+Results in:
```scss
-@media (min-width: 768px) and (max-width: 991.98px) { ... }
+@media (768px <= width < 992px) { ... }
```
### Between breakpoints
-Similarly, media queries may span multiple breakpoint widths:
+Similarly, media queries may span multiple breakpoint widths. These media query ranges start as greater than or equal to the first breakpoint, and up to but not including the second.
```scss
@include media-breakpoint-between(md, xl) { ... }
Which results in:
```scss
-// Example
-// Apply styles starting from medium devices and up to extra large devices
-@media (min-width: 768px) and (max-width: 1199.98px) { ... }
+@media (768px <= width < 1200px) { ... }
```
| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
-| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
+| `.container-2xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
</BsTable>
## Responsive containers
-Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
+Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `2xl`.
```html
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
-<div class="container-xxl">100% wide until extra extra large breakpoint</div>
+<div class="container-2xl">100% wide until extra extra large breakpoint</div>
```
## Fluid containers
Breaking it down, here's how the grid system comes together:
-- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
+- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control container and column sizing and behavior by each breakpoint.
- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
- Medium (md)
- Large (lg)
- Extra large (xl)
-- Extra extra large (xxl)
+- Extra extra large (2xl)
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
<span class="fw-normal">≥1200px</span>
</th>
<th scope="col">
- xxl<br/>
+ 2xl<br/>
<span class="fw-normal">≥1400px</span>
</th>
</tr>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
<td><code>.col-xl-</code></td>
- <td><code>.col-xxl-</code></td>
+ <td><code>.col-2xl-</code></td>
</tr>
<tr>
<th class="text-nowrap" scope="row"># of columns</th>
### Equal-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.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `2xl`. 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" code={`<div class="container text-center">
<div class="row">
### Grid tiers
-Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
+Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$breakpoints` and `$container-max-widths` to something like this:
```scss
-$grid-breakpoints: (
+$breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
- **Introduced new `$enable-container-classes` option. —** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. Containers also now keep their gutter values.
-- **Offcanvas component now has [responsive variations]([[docsref:/components/offcanvas#responsive]]).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|xxl}` class.
+- **Offcanvas component now has [responsive variations]([[docsref:/components/offcanvas#responsive]]).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|2xl}` class.
- **Thicker table dividers are now opt-in. —** We’ve removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, `.table-group-divider`. [See the table docs for an example.]([[docsref:/content/tables#table-group-dividers]])
### Grid updates
-- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
+- **New breakpoint!** Added new `2xl` breakpoint for `1400px` and up. No changes to all other breakpoints.
- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system’s gutters with our spacing utilities.
- Added new [gutter class]([[docsref:/layout/gutters]]) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
}
@media (min-width: 1400px) {
- .opacity-xxl-0 { opacity: 0 !important; }
- .opacity-xxl-25 { opacity: .25 !important; }
- .opacity-xxl-50 { opacity: .5 !important; }
- .opacity-xxl-75 { opacity: .75 !important; }
- .opacity-xxl-100 { opacity: 1 !important; }
+ .opacity-2xl-0 { opacity: 0; }
+ .opacity-2xl-25 { opacity: .25; }
+ .opacity-2xl-50 { opacity: .5; }
+ .opacity-2xl-75 { opacity: .75; }
+ .opacity-2xl-100 { opacity: 1; }
}
```
}
@media (min-width: 1400px) {
- .border-xxl { ... }
- .border-xxl-0 { ... }
+ .border-2xl { ... }
+ .border-2xl-0 { ... }
}
```
## Notation
-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.
+Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `2xl`, 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`, `xl`, and `xxl`.
+- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
Where *value* is one of:
The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
-The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
+The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `2xl` 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,xxl}-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,2xl}-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-2xl-none` will hide the element for all screen sizes except on medium and large devices.
<BsTable>
| Screen size | Class |
| Hidden only on sm | `.d-sm-none .d-md-block` |
| Hidden only on md | `.d-md-none .d-lg-block` |
| Hidden only on lg | `.d-lg-none .d-xl-block` |
-| Hidden only on xl | `.d-xl-none .d-xxl-block` |
-| Hidden only on xxl | `.d-xxl-none` |
+| Hidden only on xl | `.d-xl-none .d-2xl-block` |
+| Hidden only on 2xl | `.d-2xl-none` |
| Visible on all | `.d-block` |
| Visible only on xs | `.d-block .d-sm-none` |
| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
| Visible only on md | `.d-none .d-md-block .d-lg-none` |
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
-| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
-| Visible only on xxl | `.d-none .d-xxl-block` |
+| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
+| Visible only on 2xl | `.d-none .d-2xl-block` |
</BsTable>
<Example code={`<div class="d-lg-none">hide on lg and wider screens</div>
## Responsive
-Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need.
<Example class="d-flex overflow-auto" code={`<Placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" />
<Placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" />
<Placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" />
<Placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" />
-<Placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" />`} />
+<Placeholder width="140" height="80" class="object-fit-2xl-contain border rounded" text="Contain on 2xl" markup="img" />`} />
## Video
### Notation
-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.
+Spacing utilities that apply to all breakpoints, from `xs` to `2xl`, 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`, `xl`, and `xxl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
Where *property* is one of:
---
<BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
- <div slot="main" class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
+ <div slot="main" class="container-2xl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<div class="offcanvas-header border-bottom">
<BaseLayout {...Astro.props} layout="single">
<Fragment slot="main">
<header class="py-5 border-bottom">
- <div class="container-xxl bd-gutter pt-md-1 pb-md-4">
+ <div class="container-2xl bd-gutter pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">{title}</h1>
</header>
<main class="bd-content order-1 py-5" id="content">
- <div class="container-xxl bd-gutter">
+ <div class="container-2xl bd-gutter">
<slot />
<slot name="main-content" />
</div>
<BaseLayout>
<MastHead />
- <div class="container-xxl bd-gutter masthead-followup">
+ <div class="container-2xl bd-gutter masthead-followup">
<GetStarted />
<Customize />
<CSSVariables />
// @use "../../../scss/functions";
// @use "../../../scss/mixins";
// @use "../../../scss/variables";
-// @use "../../../scss/layout/breakpoints";
+@use "../../../scss/layout/breakpoints" as *;
// // fusv-disable
// $enable-grid-classes: false;
projects / thirdparty / bootstrap.git / commitdiff
