Mirrors/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-12-28 05:33:57 +00:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

Fix instances of 2xl, fix utilities generation (#41774)

Browse Source
This commit is contained in:
Mark Otto 2025-09-27 18:57:05 -07:00 committed by GitHub
parent 4fecde40b8
commit 387ea724ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_navbar.scss
View File

@ -280,7 +280,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
}
.navbar-toggler {
display: none;
display: none !important; // stylelint-disable-line declaration-no-important
}
.offcanvas {

1
scss/_utilities.scss
View File

@ -95,7 +95,6 @@ $utilities: map.merge(
print: true,
property: display,
class: d,
important: true,
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
),
// scss-docs-end utils-display

3
scss/mixins/_utilities.scss
View File

@ -38,7 +38,8 @@
}
// Calculate infix once, before the loop
$infix: if($infix == "", "", "-" + $infix);
// Note: $infix already includes the leading dash from breakpoint-infix()
// $infix: if($infix == "", "", "-" + $infix);
@each $key, $value in $values {
$properties: map.get($utility, property);

2
site/src/assets/examples/buttons/index.astro
View File

@ -26,7 +26,7 @@ export const title = 'Buttons'
<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>

14
site/src/assets/examples/grid/index.astro
View File

@ -45,9 +45,9 @@ export const body_class = 'py-4'
</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>
@ -107,8 +107,8 @@ export const body_class = 'py-4'
<hr class="my-4">
<h2 class="mt-4">Mixed: mobile and desktop</h2>
<p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
<p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and 2xl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and 2xl, you only need to specify md.</p>
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
@ -172,7 +172,7 @@ export const body_class = 'py-4'
<hr class="my-4">
<h2 class="mt-4">Containers</h2>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
</div>
<div class="container themed-container text-center">.container</div>
@ -180,6 +180,6 @@ export const body_class = 'py-4'
<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>

4
site/src/assets/examples/heroes/index.astro
View File

@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
<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">
@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
<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>

8
site/src/assets/examples/navbars/index.astro
View File

@ -199,14 +199,14 @@ export const extra_css = ['navbars.css']
</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">
<a class="navbar-brand" href="#">Expand at 2xl</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
<div class="collapse navbar-collapse" id="navbarsExample2xl">
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>

2
site/src/components/header/Navigation.astro
View File

@ -22,7 +22,7 @@ const { addedIn, layout, title } = Astro.props
---
<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">

2
site/src/components/home/MastHead.astro
View File

@ -7,7 +7,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
---
<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"

4
site/src/content/docs/migration.mdx
View File

@ -60,7 +60,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
- **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
- Renamed `2xl` 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
@ -74,7 +74,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
- Removed `muted`, `black-50`, and `white-50` from text colors utilities map
- Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
- Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
- Removed `$border-radius-2xl`, use `$border-radius-xxl`.
- Removed `$border-radius-2xl`, use `$border-radius-2xl`.
- Removed `$text-muted` for secondary color.
- Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
- Removed unused `$dropdown-header-padding` for the `-x`/`-y` split variables.

4
site/src/content/docs/utilities/margin.mdx
View File

@ -59,9 +59,9 @@ Use margin utilities to control the outer space around elements. Margin utilitie
## Notation
Margin 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.
Margin 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:

4
site/src/content/docs/utilities/padding.mdx
View File

@ -52,9 +52,9 @@ Use padding utilities to control the inner space within elements. Padding utilit
## Notation
Padding 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.
Padding 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:

2
site/src/content/docs/utilities/text-alignment.mdx
View File

@ -31,7 +31,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.

2
site/src/layouts/DocsLayout.astro
View File

@ -72,7 +72,7 @@ if (currentPageIndex < allPages.length - 1) {
---
<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">

4
site/src/layouts/SingleLayout.astro
View File

@ -13,7 +13,7 @@ const { description, title } = Astro.props
<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>
@ -28,7 +28,7 @@ const { description, title } = Astro.props
</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>

2
site/src/pages/index.astro
View File

@ -11,7 +11,7 @@ import Icons from '@components/home/Icons.astro'
<BaseLayout>
<MastHead />
<div class="container-xxl bd-gutter masthead-followup">
<div class="container-2xl bd-gutter masthead-followup">
<GetStarted />
<Customize />
<CSSVariables />