<main class="form-signin w-100 m-auto">
<form>
- <img class="mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
+ <img class="mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="Bootstrap" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
When `backdrop` is set to `static`, the dialog will not close when clicking outside of it. Click the button below to try it.
-<Example code={`<button type="button" class="btn-solid theme-primary"data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static"><!-- [!code highlight] -->
+<Example code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static"><!-- [!code highlight] -->
Open static backdrop dialog
</button>
Here’s what you need to know before getting started with the navbar:
-- Navbars require a wrapping `.navbar` with `.navbar-expand-{breakpoint}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.{breakpoint}:navbar-expand` (e.g. `.md:navbar-expand`) 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 [margin]([[docsref:/utilities/margin]]), [padding]([[docsref:/utilities/padding]]), and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default using our **drawer component**. On mobile, navigation links slide in from the side as a drawer.
## Horizontal form
-Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they’re vertically centered with their associated form controls.
+Create horizontal forms with the grid by adding the `.row` class to form groups and using `.{breakpoint}:col-*` classes (e.g. `.sm:col-2`) to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they’re vertically centered with their associated form controls.
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
- Manage repetitive snippets of code with mixins and functions.
- Toggle global options like `$enable-smooth-scroll`, `$enable-reduced-motion`, etc.
- Configure and generate component variants (theme colors, sizes, etc) through Sass maps, loops, and more.
-- Bulk-generate CSS variables for all every tint and shade of our colors.
+- Bulk-generate CSS variables for every tint and shade of our colors.
- Manage component token lists (e.g., `$alert-tokens`) and apply them to specific classes.
- Power the utilities API to customize and generate utility classes.
### Classes
-Aside from [Reboot]([[docsref:content/reboot]]), we strive to use only classes as selectors. Where we can, we avoid type selectors and extraneous parent selectors for greater flexibility.
+Aside from [Reboot]([[docsref:/content/reboot]]), we strive to use only classes as selectors. Where we can, we avoid type selectors and extraneous parent selectors for greater flexibility.
-Components are typically built with a base class for shared property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-solid` to add more styles.
+Components are typically built with a base class for shared property-value pairs. For example, `.btn`, `.btn-solid`, and `.theme-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use variant and theme modifiers like `.btn-solid.theme-primary` to add more styles.
This reduces complexity, streamlines code, and makes for more scalable systems.
Curious which components explicitly require our JavaScript and Floating UI or Vanilla Calendar Pro?
-- Accordions for extending our Collapse plugin
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Datepicker for date selection (also requires [Vanilla Calendar Pro](https://vanilla-calendar.pro/))
+- [Dialog]([[docsref:/components/dialog]]) for displaying, positioning, and scroll behavior
- Menus for displaying and positioning (also requires [Floating UI](https://floating-ui.com/))
-- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse and Drawer plugins to implement responsive behaviors
- [Nav]([[docsref:/components/nav]]) for navigation markup and styles; [Tab]([[docsref:/components/tab]]) plugin for toggling tab panes
- Drawers for displaying, positioning, and scroll behavior
- Removed `_variables.scss`, consolidating all variables into `_config.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.
+ - Increased the `lg` breakpoint from 992px to 1024px; its container remains the same at 960px.
+ - Increased the `xl` breakpoint from 1200px to 1280px, and its 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.
+ - Increased the `2xl` breakpoint from 1400px to 1536px, and its container from 1320px to 1440px.
- **Adopted modern CSS color functions.** All Sass color variables now use `oklch()` notation (e.g., `$blue: oklch(60% 0.24 240)`) and tint/shade scales are generated with `color-mix(in lab, ...)` in the compiled CSS. The v5 `$*-rgb` CSS custom properties and `rgba()` patterns have been removed. This requires browser support for `color-mix()` and `oklch()`.
- **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, cards, accordions, and more.
- **Responsive and state classes now use a prefix instead of an infix or suffix.** Class names follow the Tailwind-style `prefix:class` pattern (e.g., `md:d-none` instead of `d-md-none`, `hover:opacity-50` instead of `opacity-50-hover`). In HTML, use the unescaped colon: `class="md:d-none"`. This applies to utilities, grid, pseudo-state variants, and all responsive components.
Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element.
<Example code={`<div class="d-flex position-relative">
- <Placeholder width="144" height="144" class="flex-shrink-0 me-3" text={false} title="Generic placeholder image22222" />
+ <Placeholder width="144" height="144" class="flex-shrink-0 me-3" text={false} title="Generic placeholder image" />
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we’re using it here to give the component a bit of body and size.</p>
This approach allows us to also easily support translucency with our `.bg-{opacity}` utilities as we can use `color-mix()` with the CSS variable to generate the appropriate color. See the [opacity section](#opacity) for more details.
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} color-on-${themeColor.name}">.bg-${themeColor.name}</div>
-<div class="p-3 mb-2 bg-muted-${themeColor.name} color-${themeColor.name}">.bg-muted-${themeColor.name}</div>
-<div class="p-3 mb-2 bg-subtle-${themeColor.name} color-${themeColor.name}">.bg-subtle-${themeColor.name}</div>`),
+ ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} fg-contrast-${themeColor.name}">.bg-${themeColor.name}</div>
+<div class="p-3 mb-2 bg-muted-${themeColor.name} fg-${themeColor.name}">.bg-muted-${themeColor.name}</div>
+<div class="p-3 mb-2 bg-subtle-${themeColor.name} fg-${themeColor.name}">.bg-subtle-${themeColor.name}</div>`),
`<div class="p-3 mb-2 bg-body fg-body">.bg-body</div>
<div class="p-3 mb-2 bg-1">.bg-1</div>
<div class="p-3 mb-2 bg-2">.bg-2</div>
<Example class="d-flex flex-column gap-2" code={[
...getData('theme-colors').map((themeColor) => `<div class="p-3 bg-${themeColor.name} bg-gradient fg-contrast-${themeColor.name}">.bg-${themeColor.name}.bg-gradient</div>`),
- `<div class="p-3 bg-black bg-gradient fg-contrast">.bg-black.bg-gradient</div>`
+ `<div class="p-3 bg-black bg-gradient fg-white">.bg-black.bg-gradient</div>`
]} />
## Opacity
## Overview
-Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
+Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `0` to `3rem` (`.gap-0` through `.gap-9`). Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
<Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
<div class="d-flex gap-3 p-3 bd-pattern-diagonal rounded-3">
- `0` - for classes that eliminate the `gap` by setting it to `0`
- `1` - (by default) for classes that set the `gap` to `$spacer * .25`
- `2` - (by default) for classes that set the `gap` to `$spacer * .5`
-- `3` - (by default) for classes that set the `gap` to `$spacer`
-- `4` - (by default) for classes that set the `gap` to `$spacer * 1.5`
-- `5` - (by default) for classes that set the `gap` to `$spacer * 3`
+- `3` - (by default) for classes that set the `gap` to `$spacer * .75`
+- `4` - (by default) for classes that set the `gap` to `$spacer`
+- `5` - (by default) for classes that set the `gap` to `$spacer * 1.25`
+- `6` - (by default) for classes that set the `gap` to `$spacer * 1.5`
+- `7` - (by default) for classes that set the `gap` to `$spacer * 2`
+- `8` - (by default) for classes that set the `gap` to `$spacer * 2.5`
+- `9` - (by default) for classes that set the `gap` to `$spacer * 3`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
- <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-5</code></li>
+ <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-9</code></li>
)
})}
</ul>
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
- <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-5</code></li>
+ <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-9</code></li>
)
})}
</ul>
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
- <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-5</code></li>
+ <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-9</code></li>
)
})}
</ul>
## Overview
-Use margin utilities to control the outer space around elements. Margin utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.m-3` and `.m-5` to control the margin on all sides of an element:
+Use margin utilities to control the outer space around elements. Margin utilities are built from a default Sass map ranging from `0` to `3rem` (`.m-0` through `.m-9`). Use utilities like `.m-3` and `.m-5` to control the margin on all sides of an element:
<Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
<div class="bd-pattern-diagonal rounded-3">
- `0` - for classes that eliminate the `margin` by setting it to `0`
- `1` - (by default) for classes that set the `margin` to `$spacer * .25`
- `2` - (by default) for classes that set the `margin` to `$spacer * .5`
-- `3` - (by default) for classes that set the `margin` to `$spacer`
-- `4` - (by default) for classes that set the `margin` to `$spacer * 1.5`
-- `5` - (by default) for classes that set the `margin` to `$spacer * 3`
+- `3` - (by default) for classes that set the `margin` to `$spacer * .75`
+- `4` - (by default) for classes that set the `margin` to `$spacer`
+- `5` - (by default) for classes that set the `margin` to `$spacer * 1.25`
+- `6` - (by default) for classes that set the `margin` to `$spacer * 1.5`
+- `7` - (by default) for classes that set the `margin` to `$spacer * 2`
+- `8` - (by default) for classes that set the `margin` to `$spacer * 2.5`
+- `9` - (by default) for classes that set the `margin` to `$spacer * 3`
- `auto` - for classes that set the `margin` to auto
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
## Negative margin
-In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`.
+In CSS, `margin` properties can utilize negative values (`padding` cannot). In v6, negative margins are limited to `margin-inline-start` and `margin-inline-end` only, using spacers `-1` (`-0.25rem`) and `-2` (`-0.5rem`):
-The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here’s an example class that’s the opposite of `.mt-1`:
-
-```scss
-.mt-n1 {
- margin-top: -0.25rem !important;
-}
+```html
+<div class="ms--1">.ms--1</div>
+<div class="me--2">.me--2</div>
```
+The v5 full negative margin utilities across all sides (like `.mt-n1`) have been removed.
+
## Responsive
All margin utilities are responsive and include all breakpoints.
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
- <li><code>.{breakpoint.abbr}m-0</code> through <code>.{breakpoint.abbr}m-5</code> and <code>.{breakpoint.abbr}m-auto</code></li>
+ <li><code>.{breakpoint.abbr}m-0</code> through <code>.{breakpoint.abbr}m-9</code> and <code>.{breakpoint.abbr}m-auto</code></li>
)
})}
</ul>
## Overview
-Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.p-3` and `.p-5` to control the padding on all sides of an element:
+Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from `0` to `3rem` (`.p-0` through `.p-9`). Use utilities like `.p-3` and `.p-5` to control the padding on all sides of an element:
<Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
<div class="p-3 bg-primary bd-pattern-diagonal-inner fg-contrast-accent rounded-3">
Where *sides* is one of:
-- `t` - for classes that set `padding-top`
-- `b` - for classes that set `padding-bottom`
-- `s` - (start) for classes that set `padding-left` in LTR, `padding-right` in RTL
-- `e` - (end) for classes that set `padding-right` in LTR, `padding-left` in RTL
-- `x` - for classes that set both `*-left` and `*-right`
-- `y` - for classes that set both `*-top` and `*-bottom`
+- `t` - for classes that set `padding-block-start`
+- `b` - for classes that set `padding-block-end`
+- `s` - (start) for classes that set `padding-inline-start`
+- `e` - (end) for classes that set `padding-inline-end`
+- `x` - for classes that set `padding-inline`
+- `y` - for classes that set `padding-block`
- blank - for classes that set a `padding` on all 4 sides of the element
Where *size* is one of:
- `0` - for classes that eliminate the `padding` by setting it to `0`
- `1` - (by default) for classes that set the `padding` to `$spacer * .25`
- `2` - (by default) for classes that set the `padding` to `$spacer * .5`
-- `3` - (by default) for classes that set the `padding` to `$spacer`
-- `4` - (by default) for classes that set the `padding` to `$spacer * 1.5`
-- `5` - (by default) for classes that set the `padding` to `$spacer * 3`
+- `3` - (by default) for classes that set the `padding` to `$spacer * .75`
+- `4` - (by default) for classes that set the `padding` to `$spacer`
+- `5` - (by default) for classes that set the `padding` to `$spacer * 1.25`
+- `6` - (by default) for classes that set the `padding` to `$spacer * 1.5`
+- `7` - (by default) for classes that set the `padding` to `$spacer * 2`
+- `8` - (by default) for classes that set the `padding` to `$spacer * 2.5`
+- `9` - (by default) for classes that set the `padding` to `$spacer * 3`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
- <li><code>.{breakpoint.abbr}p-0</code> through <code>.{breakpoint.abbr}p-5</code></li>
+ <li><code>.{breakpoint.abbr}p-0</code> through <code>.{breakpoint.abbr}p-9</code></li>
)
})}
</ul>
),
"padding-x": (
responsive: true,
- property: padding-right padding-left,
+ property: padding-inline,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
- property: padding-top padding-bottom,
+ property: padding-block,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
- property: padding-top,
+ property: padding-block-start,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
- property: padding-right,
+ property: padding-inline-end,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
- property: padding-bottom,
+ property: padding-block-end,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
- property: padding-left,
+ property: padding-inline-start,
class: ps,
values: $spacers
),
projects / thirdparty / bootstrap.git / commitdiff
