xs: 0,
sm: 576px,
md: 768px,
- lg: 992px,
- xl: 1200px,
- xxl: 1400px
+ lg: 1024px,
+ xl: 1280px,
+ 2xl: 1536px
) !default;
// scss-docs-end grid-breakpoints
sm: 540px,
md: 720px,
lg: 960px,
- xl: 1140px,
- xxl: 1320px
+ xl: 1200px,
+ 2xl: 1440px
) !default;
// scss-docs-end container-max-widths
--#{$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: #{$border-radius-2xl};
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-radius-var
$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
$modal-sm: 300px !default;
$modal-md: 500px !default;
$modal-lg: 800px !default;
-$modal-xl: 1140px !default;
+$modal-xl: 1200px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
//
// 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: 1024px, xl: 1280px, 2xl: 1536px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
//
// >> 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: 1024px, xl: 1280px, 2xl: 1536px))
// 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)) {
$n: list.index($breakpoint-names, $name);
// 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: 1024px, xl: 1280px, 2xl: 1536px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map.get($breakpoints, $name);
// 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: 1024px, xl: 1280px, 2xl: 1536px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map.get($breakpoints, $name);
// 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: 1024px, xl: 1280px, 2xl: 1536px))
// "" (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: 1024px, xl: 1280px, 2xl: 1536px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
- breakpoint: lg
abbr: -lg
name: Large
- min-width: 992px
+ min-width: 1024px
container: 960px
- breakpoint: xl
abbr: -xl
name: X-Large
- min-width: 1200px
- container: 1140px
+ min-width: 1280px
+ container: 1200px
-- breakpoint: xxl
- abbr: -xxl
- name: XX-Large
- min-width: 1400px
- container: 1320px
+- breakpoint: 2xl
+ abbr: -2xl
+ name: 2X-Large
+ min-width: 1536px
+ container: 1440px
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.
| Small | `.modal-sm` | `300px` |
| Default | <span class="text-body-secondary">None</span> | `500px` |
| Large | `.modal-lg` | `800px` |
-| Extra large | `.modal-xl` | `1140px` |
+| Extra large | `.modal-xl` | `1200px` |
</BsTable>
Our default modal without modifier class constitutes the “medium” size modal.
| `.modal-fullscreen` | Always |
| `.modal-fullscreen-sm-down` | `576px` |
| `.modal-fullscreen-md-down` | `768px` |
-| `.modal-fullscreen-lg-down` | `992px` |
-| `.modal-fullscreen-xl-down` | `1200px` |
-| `.modal-fullscreen-xxl-down` | `1400px` |
+| `.modal-fullscreen-lg-down` | `1024px` |
+| `.modal-fullscreen-xl-down` | `1280px` |
+| `.modal-fullscreen-2xl-down` | `1536px` |
</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>`} />
```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.**
font-size: calc(1.525rem + 3.3vw);
}
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
.title {
font-size: 4rem;
}
<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>
```
| Extra small | <em>None</em> |<576px |
| Small | `sm` | ≥576px |
| Medium | `md` | ≥768px |
-| Large | `lg` | ≥992px |
-| Extra large | `xl` | ≥1200px |
-| Extra extra large | `xxl` | ≥1400px |
+| Large | `lg` | ≥1024px |
+| Extra large | `xl` | ≥1280px |
+| Extra extra large | `2xl` | ≥1536px |
</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.
@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
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) { ... }
+// Large devices (desktops, 1024px and up)
+@media (min-width: 1024px) { ... }
-// X-Large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
+// X-Large devices (large desktops, 1280px and up)
+@media (min-width: 1280px) { ... }
-// XX-Large devices (larger desktops, 1400px and up)
-@media (min-width: 1400px) { ... }
+// XX-Large devices (larger desktops, 1536px and up)
+@media (min-width: 1536px) { ... }
```
### Max-width
@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) {
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
-// `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 1600px)
+@media (max-width: 1599.98px) { ... }
```
<Callout name="info-mediaqueries-breakpoints" type="warning" />
@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 the `@include media-breakpoint-only(md) { ... }` will result in :
See them in action and compare them in our [Grid example]([[docsref:/examples/grid/#containers]]).
<BsTable>
-| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥992px</div> | X-Large<div class="fw-normal">≥1200px</div> | XX-Large<div class="fw-normal">≥1400px</div> |
+| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥1024px</div> | X-Large<div class="fw-normal">≥1280px</div> | 2X-Large<div class="fw-normal">≥1536px</div> |
| --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.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` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1440px |
+| `.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 | 1440px |
+| `.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 | 1440px |
+| `.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> | 1440px |
| `.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:
<th scope="col">xs<br/><span class="fw-normal"><576px</span></th>
<th scope="col">sm<br/><span class="fw-normal">≥576px</span></th>
<th scope="col">md<br/><span class="fw-normal">≥768px</span></th>
- <th scope="col">lg<br/><span class="fw-normal">≥992px</span></th>
- <th scope="col">xl<br/><span class="fw-normal">≥1200px</span></th>
- <th scope="col">xxl<br/><span class="fw-normal">≥1400px</span></th>
+ <th scope="col">lg<br/><span class="fw-normal">≥1024px</span></th>
+ <th scope="col">xl<br/><span class="fw-normal">≥1280px</span></th>
+ <th scope="col">2xl<br/><span class="fw-normal">≥1536px</span></th>
</tr>
</thead>
<tbody>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
- <td>1320px</td>
+ <td>1440px</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Class prefix</th>
<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">
- Removed `_variables-dark.scss`
- Added `_colors.scss`, splitting them out from `_variables.scss`,
- Added `_theme.scss` where we setup all our global theming for how colors are applied
+- **Updated lg, xl, and 2xl breakpoints and containers.**
+ - Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
+ - Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
+ - Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
+ - Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
### Sass
.opacity-md-100 { opacity: 1; }
}
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
.opacity-lg-0 { opacity: 0; }
.opacity-lg-25 { opacity: .25; }
.opacity-lg-50 { opacity: .5; }
.opacity-lg-100 { opacity: 1; }
}
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
.opacity-xl-0 { opacity: 0; }
.opacity-xl-25 { opacity: .25; }
.opacity-xl-50 { opacity: .5; }
.opacity-xl-100 { opacity: 1; }
}
-@media (min-width: 1400px) {
- .opacity-xxl-0 { opacity: 0; }
- .opacity-xxl-25 { opacity: .25; }
- .opacity-xxl-50 { opacity: .5; }
- .opacity-xxl-75 { opacity: .75; }
- .opacity-xxl-100 { opacity: 1; }
+@media (min-width: 1536px) {
+ .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; }
}
```
.border-md-0 { ... }
}
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
.border-lg { ... }
.border-lg-0 { ... }
}
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
.border-xl { ... }
.border-xl-0 { ... }
}
-@media (min-width: 1400px) {
- .border-xxl { ... }
- .border-xxl-0 { ... }
+@media (min-width: 1536px) {
+ .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.
## Clearfix
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.
| 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>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
-<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>`} />
+<div class="float-2xl-end">Float end on viewports sized 2XL (extra extra large) or wider</div><br>`} />
Here are all the support classes:
## 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:
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
-<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>`} />
+<p class="text-2xl-end">End aligned text on viewports sized 2XL (extra extra large) or wider.</p>`} />
<Callout>
Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
projects / thirdparty / bootstrap.git / commitdiff
