mirror of
https://github.com/twbs/bootstrap.git
synced 2025-12-28 13:40:43 +00:00
v6: New lg, xl, and 2xl breakpoints, plus some renaming (#41770)
* Update xxl breakpoint and container, rename xxl to 2xl for better scaling Co-Authored-By: mdo <98681+mdo@users.noreply.github.com> * note for lg * bump bundlewatch --------- Co-authored-by: mdo <98681+mdo@users.noreply.github.com>
This commit is contained in:
Mark Otto
GitHub
parent
5a54f29ae3
commit
4fecde40b8
@ -52,9 +52,9 @@ $grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px
|
||||
lg: 1024px,
|
||||
xl: 1280px,
|
||||
2xl: 1536px
|
||||
) !default;
|
||||
// scss-docs-end grid-breakpoints
|
||||
|
||||
@ -80,8 +80,8 @@ $container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px
|
||||
xl: 1200px,
|
||||
2xl: 1440px
|
||||
) !default;
|
||||
// scss-docs-end container-max-widths
|
||||
|
||||
|
||||
@ -170,7 +170,7 @@
|
||||
--#{$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
|
||||
|
||||
|
||||
@ -214,7 +214,7 @@ $border-radius: .375rem !default;
|
||||
$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
|
||||
|
||||
@ -519,7 +519,7 @@ $modal-footer-border-width: $modal-header-border-width !default;
|
||||
$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;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
//
|
||||
// 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.
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
//
|
||||
// >> 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);
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
// 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);
|
||||
@ -42,7 +42,7 @@
|
||||
// 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);
|
||||
@ -52,9 +52,9 @@
|
||||
// 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}");
|
||||
|
||||
@ -19,17 +19,17 @@
|
||||
- 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
|
||||
|
||||
@ -645,7 +645,7 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
|
||||
|
||||
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">
|
||||
@ -658,7 +658,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
|
||||
</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">
|
||||
|
||||
@ -112,7 +112,7 @@ These work great with custom content as well.
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -533,7 +533,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
|
||||
| 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.
|
||||
@ -600,9 +600,9 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
| `.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>
|
||||
@ -610,7 +610,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<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 -->
|
||||
@ -704,11 +704,11 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
</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">
|
||||
|
||||
@ -10,7 +10,7 @@ import { getConfig } from '@libs/config'
|
||||
|
||||
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.
|
||||
@ -499,7 +499,7 @@ Here’s an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-h
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -146,7 +146,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
|
||||
- `.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`.
|
||||
|
||||
|
||||
@ -653,7 +653,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
|
||||
|
||||
## 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
|
||||
@ -734,7 +734,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
|
||||
|
||||
### 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.**
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margi
|
||||
font-size: calc(1.525rem + 3.3vw);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1280px) {
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ Responsive variations also exist for `.sticky-top` utility.
|
||||
<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
|
||||
@ -66,5 +66,5 @@ Responsive variations also exist for `.sticky-bottom` utility.
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -23,9 +23,9 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers
|
||||
| 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.
|
||||
@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
|
||||
@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
|
||||
|
||||
@ -79,14 +79,14 @@ These Sass mixins translate in our compiled CSS using the values declared in our
|
||||
// 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
|
||||
@ -99,7 +99,7 @@ We occasionally use media queries that go in the other direction (the given scre
|
||||
@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) {
|
||||
@ -127,8 +127,8 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
|
||||
// `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" />
|
||||
@ -143,7 +143,7 @@ There are also media queries and mixins for targeting a single segment of screen
|
||||
@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 :
|
||||
|
||||
@ -19,14 +19,14 @@ The table below illustrates how each container’s `max-width` compares to the o
|
||||
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>
|
||||
|
||||
@ -42,14 +42,14 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
|
||||
|
||||
## 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
|
||||
|
||||
@ -35,7 +35,7 @@ The above example creates three equal-width columns across all devices and viewp
|
||||
|
||||
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.
|
||||
|
||||
@ -58,7 +58,7 @@ Bootstrap’s grid system can adapt across all six default breakpoints, and any
|
||||
- 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:
|
||||
|
||||
@ -70,9 +70,9 @@ As noted above, each of these breakpoints have their own container, unique class
|
||||
<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>
|
||||
@ -83,7 +83,7 @@ As noted above, each of these breakpoints have their own container, unique class
|
||||
<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>
|
||||
@ -92,7 +92,7 @@ As noted above, each of these breakpoints have their own container, unique class
|
||||
<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>
|
||||
@ -124,7 +124,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
|
||||
|
||||
### 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">
|
||||
|
||||
@ -57,6 +57,11 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
|
||||
- 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
|
||||
|
||||
|
||||
@ -296,7 +296,7 @@ Output:
|
||||
.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; }
|
||||
@ -304,7 +304,7 @@ Output:
|
||||
.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; }
|
||||
@ -312,12 +312,12 @@ Output:
|
||||
.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; }
|
||||
}
|
||||
```
|
||||
|
||||
@ -507,19 +507,19 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
|
||||
.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 { ... }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -47,12 +47,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
|
||||
|
||||
## 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:
|
||||
|
||||
@ -70,7 +70,7 @@ 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
|
||||
|
||||
@ -92,7 +92,7 @@ There's no more clearfix helper in v6 as it's an outdated technique. Instead, us
|
||||
|
||||
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.
|
||||
|
||||
@ -104,15 +104,15 @@ To show an element only on a given interval of screen sizes you can combine one
|
||||
| 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>
|
||||
|
||||
@ -34,7 +34,7 @@ Responsive variations also exist for each `float` value.
|
||||
<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:
|
||||
|
||||
|
||||
@ -44,13 +44,13 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
@ -112,9 +112,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
|
||||
|
||||
### 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:
|
||||
|
||||
|
||||
@ -114,7 +114,7 @@ Easily realign text to components with text alignment classes. For start, end, a
|
||||
<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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user