mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-24 20:41:33 +02:00
Code Issues Releases Wiki Activity

More new groups, split pages

Browse Source
This commit is contained in:
Mark Otto
2025-09-21 23:16:25 -07:00
parent 48c1041019
commit a6877754f4
12 changed files with 1153 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
site/data/sidebar.yml
View File

@@ -117,12 +117,20 @@
icon_color: red
pages:
- title: API
- title: Aspect ratio
- title: Background
- title: Border
- title: Border radius
- title: Colors
- title: Display
- group: Layout
pages:
- title: Aspect ratio
- title: Display
- title: Float
- title: Object fit
- title: Overflow
- title: Position
- title: Visibility
- title: Z-index
- group: Flex & Grid
pages:
- title: Align content
@@ -132,20 +140,29 @@
- title: Justify content
- title: Justify items
- title: Place items
- title: Float
- title: Interactions
- title: Link
- title: Object fit
- title: Opacity
- title: Overflow
- title: Position
- title: Shadows
- title: Sizing
- title: Spacing
- title: Text
- title: Vertical align
- title: Visibility
- title: Z-index
- group: Sizing
pages:
- title: Width
- title: Height
- group: Spacing
pages:
- title: Margin
- title: Padding
- group: Type
pages:
- title: Font style
- title: Text alignment
- title: Text decoration
- title: Text wrapping
- title: Vertical align
- group: Interactions
pages:
- title: Pointer events
- title: User select
- group: Effects
pages:
- title: Opacity
- title: Shadows
- title: Extend
icon: tools

122
site/src/content/docs/utilities/font-style.mdx Normal file
View File

@@ -0,0 +1,122 @@
---
title: Font style
description: Utilities for controlling font properties including size, weight, style, line height, and font family.
toc: true
reference:
- class: fs-1
styles:
font-size: 'calc(1.375rem + 1.5vw)'
- class: fs-6
styles:
font-size: '1rem'
- class: fw-bold
styles:
font-weight: '700'
- class: fw-normal
styles:
font-weight: '400'
- class: fst-italic
styles:
font-style: 'italic'
- class: fst-normal
styles:
font-style: 'normal'
- class: lh-1
styles:
line-height: '1'
- class: font-monospace
styles:
font-family: 'var(--bs-font-monospace)'
---
import { getData } from '@libs/data'
## Font size
Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
<Example code={`<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>`} />
Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
## Font weight and italics
Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
<Example code={`<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-medium">Medium weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>`} />
## Line height
Change the line height with `.lh-*` utilities.
<Example code={`<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>`} />
## Font family
Change a selection to our monospace font stack with `.font-monospace`.
<Example code={`<p class="font-monospace">This is in monospace</p>`} />
## CSS
### Sass utilities API
Font style utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal,
medium: $font-weight-medium,
semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
```

148
site/src/content/docs/utilities/height.mdx Normal file
View File

@@ -0,0 +1,148 @@
---
title: Height
description: Use height utilities to control the height of elements with responsive height classes.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/height
reference:
- class: h-25
styles:
height: '25%'
- class: h-50
styles:
height: '50%'
- class: h-75
styles:
height: '75%'
- class: h-100
styles:
height: '100%'
- class: h-auto
styles:
height: 'auto'
- class: h-min
styles:
height: 'min-content'
- class: h-max
styles:
height: 'max-content'
- class: h-fit
styles:
height: 'fit-content'
- class: max-h-100
styles:
max-height: '100%'
- class: min-h-0
styles:
min-height: '0'
- class: min-h-100
styles:
min-height: '100%'
- class: vh-100
styles:
height: '100vh'
- class: min-vh-100
styles:
min-height: '100vh'
---
## Overview
Use height utilities to set the height of elements. Height utilities are generated from the utility API and include support for percentage values, intrinsic sizing keywords, and viewport units.
## Relative height
Set height relative to the parent element using percentage-based utilities. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default.
<Example class="bd-example-flex" code={`<div style="height: 100px;">
<div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>`} />
## Intrinsic sizing
Use intrinsic sizing keywords to set height based on content.
<Example class="bd-example-flex" code={`<div style="height: 200px;">
<div class="h-min d-inline-block p-3" style="width: 120px;">Height min-content</div>
<div class="h-max d-inline-block p-3" style="width: 120px;">Height max-content</div>
<div class="h-fit d-inline-block p-3" style="width: 120px;">Height fit-content</div>
</div>`} />
## Max height
Set maximum height using `max-height` utilities.
<Example class="bd-example-flex" code={`<div style="height: 100px;">
<div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>`} />
## Min height
Set minimum height using `min-height` utilities.
<Example class="bd-example-flex" code={`<div class="min-h-0 p-3" style="width: 200px;">
Min-height 0 (allows content to determine height)
</div>
<div class="min-h-100 p-3" style="width: 200px;">Min-height 100%</div>`} />
## Viewport height
Set height relative to the viewport using viewport units.
```html
<div class="vh-100">Height 100vh</div>
<div class="min-vh-100">Min-height 100vh</div>
```
<Callout>
**Full viewport height sections!** Using `vh-100` makes an element take up the entire viewport height, which is useful for hero sections and full-screen layouts.
</Callout>
## CSS
### Sass utilities API
Height utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"height": (
property: height,
class: h,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
)
),
"max-height": (
property: max-height,
class: max-h,
values: (100: 100%)
),
"min-height": (
property: min-height,
class: min-h,
values: (
0: 0,
100: 100%,
),
),
"viewport-height": (
property: height,
class: vh,
values: (100: 100vh)
),
"min-viewport-height": (
property: min-height,
class: min-vh,
values: (100: 100vh)
),
```

208
site/src/content/docs/utilities/margin.mdx Normal file
View File

@@ -0,0 +1,208 @@
---
title: Margin
description: Use margin utilities to control the space around elements with responsive margin classes.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/margin
reference:
- class: m-0
styles:
margin: '0'
- class: m-1
styles:
margin: '0.25rem'
- class: m-2
styles:
margin: '0.5rem'
- class: m-3
styles:
margin: '1rem'
- class: m-4
styles:
margin: '1.5rem'
- class: m-5
styles:
margin: '3rem'
- class: m-auto
styles:
margin: 'auto'
- class: mt-0
styles:
margin-top: '0'
- class: me-0
styles:
margin-right: '0'
- class: mb-0
styles:
margin-bottom: '0'
- class: ms-0
styles:
margin-left: '0'
- class: mx-0
styles:
margin-right: '0'
margin-left: '0'
- class: my-0
styles:
margin-top: '0'
margin-bottom: '0'
---
import { getData } from '@libs/data'
## 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`.
<Callout>
**Using the CSS Grid layout module?** Consider using [the gap utility]([[docsref:/utilities/spacing#gap]]) instead.
</Callout>
## 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.
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *property* is:
- `m` - for classes that set `margin`
Where *sides* is one of:
- `t` - for classes that set `margin-top`
- `b` - for classes that set `margin-bottom`
- `s` - (start) for classes that set `margin-left` in LTR, `margin-right` in RTL
- `e` - (end) for classes that set `margin-right` in LTR, `margin-left` in RTL
- `x` - for classes that set both `*-left` and `*-right`
- `y` - for classes that set both `*-top` and `*-bottom`
- blank - for classes that set a `margin` on all 4 sides of the element
Where *size* is one of:
- `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`
- `auto` - for classes that set the `margin` to auto
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
## Examples
Here are some representative examples of these classes:
```scss
.mt-0 {
margin-top: 0;
}
.ms-1 {
margin-left: ($spacer * .25);
}
.mx-2 {
margin-left: ($spacer * .5);
margin-right: ($spacer * .5);
}
.m-3 {
margin: $spacer;
}
```
## Horizontal centering
Bootstrap includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
<Example showMarkup={false} code={`<div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-violet-rgb),.15); border: rgba(var(--bd-violet-rgb),.3) solid 1px;">
Centered element
</div>`} />
```html
<div class="mx-auto p-2" style="width: 200px;">
Centered element
</div>
```
## Negative margin
When using `display: grid`, you can make use of negative margin utilities along the parent grid container. This can sometimes be helpful to match visual alignment of a child grid with the rest of your layout. Remember that [CSS Grid has a gap property]([[docsref:/utilities/spacing#gap]]) that might be an alternative solution.
<Example showMarkup={false} code={`<div class="grid text-center" style="--bs-columns: 3; --bs-gap: .25rem;">
<div class="g-col-1">.g-col-1</div>
<div class="g-col-1">.g-col-1</div>
<div class="g-col-1">.g-col-1</div>
</div>`} />
```html
<div class="grid" style="--bs-columns: 3; --bs-gap: .25rem;">
<div class="g-col-1">.g-col-1</div>
<div class="g-col-1">.g-col-1</div>
<div class="g-col-1">.g-col-1</div>
</div>
```
## Responsive
All margin utilities are responsive and include all breakpoints.
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
<li key={breakpoint.abbr}><code>.m{breakpoint.abbr}-0</code> through <code>.m{breakpoint.abbr}-5</code> and <code>.m{breakpoint.abbr}-auto</code></li>
)
})}
</ul>
## CSS
### Sass utilities API
Margin utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"margin": (
responsive: true,
property: margin,
class: m,
values: map.merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map.merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map.merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map.merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map.merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map.merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map.merge($spacers, (auto: auto))
),
```

180
site/src/content/docs/utilities/padding.mdx Normal file
View File

@@ -0,0 +1,180 @@
---
title: Padding
description: Use padding utilities to control the inner space of elements with responsive padding classes.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/padding
reference:
- class: p-0
styles:
padding: '0'
- class: p-1
styles:
padding: '0.25rem'
- class: p-2
styles:
padding: '0.5rem'
- class: p-3
styles:
padding: '1rem'
- class: p-4
styles:
padding: '1.5rem'
- class: p-5
styles:
padding: '3rem'
- class: pt-0
styles:
padding-top: '0'
- class: pe-0
styles:
padding-right: '0'
- class: pb-0
styles:
padding-bottom: '0'
- class: ps-0
styles:
padding-left: '0'
- class: px-0
styles:
padding-right: '0'
padding-left: '0'
- class: py-0
styles:
padding-top: '0'
padding-bottom: '0'
---
import { getData } from '@libs/data'
## 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`.
## 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.
The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *property* is:
- `p` - for classes that set `padding`
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`
- 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`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
## Examples
Here are some representative examples of these classes:
```scss
.pt-0 {
padding-top: 0;
}
.ps-1 {
padding-left: ($spacer * .25);
}
.px-2 {
padding-left: ($spacer * .5);
padding-right: ($spacer * .5);
}
.p-3 {
padding: $spacer;
}
```
## Basic usage
<Example code={`<div class="p-3 mb-2 bg-light">
Regular padding on all sides
</div>
<div class="py-2 px-4 mb-2 bg-light">
Horizontal and vertical padding
</div>
<div class="pt-4 mb-2 bg-light">
Top padding only
</div>`} />
## Responsive
All padding utilities are responsive and include all breakpoints.
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
<li key={breakpoint.abbr}><code>.p{breakpoint.abbr}-0</code> through <code>.p{breakpoint.abbr}-5</code></li>
)
})}
</ul>
## CSS
### Sass utilities API
Padding utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),
```

62
site/src/content/docs/utilities/pointer-events.mdx Normal file
View File

@@ -0,0 +1,62 @@
---
title: Pointer events
description: Control how elements respond to mouse and touch interactions with pointer-events utilities.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
reference:
- class: pe-none
styles:
pointer-events: 'none'
- class: pe-auto
styles:
pointer-events: 'auto'
---
## Overview
Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions through the `pointer-events` CSS property.
## Basic usage
<Example code={`<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>`} />
## Important considerations
The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users.
To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as:
- `tabindex="-1"` (to prevent them from receiving keyboard focus)
- `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies)
- JavaScript to completely prevent them from being actionable
## Better alternatives
If possible, the simpler solution is:
- **For form controls**: Add the `disabled` HTML attribute
- **For links**: Remove the `href` attribute, making it a non-interactive anchor or placeholder link
<Callout type="warning">
**Accessibility warning:** Using `pointer-events: none` can create accessibility barriers. Always ensure that disabled elements are properly marked up with appropriate ARIA attributes and that keyboard users can't accidentally focus them.
</Callout>
## Use cases
- **`.pe-none`** - Disable interactions on overlays, loading states, or temporarily disabled elements
- **`.pe-auto`** - Re-enable interactions on child elements when parent has `pe-none`
## CSS
### Sass utilities API
Pointer events utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),
```

73
site/src/content/docs/utilities/text-alignment.mdx Normal file
View File

@@ -0,0 +1,73 @@
---
title: Text alignment
description: Easily realign text with text alignment utilities for start, end, and center alignment.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
reference:
- class: text-start
styles:
text-align: 'left'
- class: text-center
styles:
text-align: 'center'
- class: text-end
styles:
text-align: 'right'
---
import { getData } from '@libs/data'
## Overview
Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
## Basic usage
<Example code={`<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
<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>`} />
<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.
</Callout>
## Responsive
Responsive variations also exist for `text-align`.
<ul>
{getData('breakpoints').map((breakpoint) => {
return (
<Fragment key={breakpoint.abbr}>
<li><code>.text{breakpoint.abbr}-start</code></li>
<li><code>.text{breakpoint.abbr}-center</code></li>
<li><code>.text{breakpoint.abbr}-end</code></li>
</Fragment>
)
})}
</ul>
## CSS
### Sass utilities API
Text alignment utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
```

69
site/src/content/docs/utilities/text-decoration.mdx Normal file
View File

@@ -0,0 +1,69 @@
---
title: Text decoration
description: Utilities for controlling text decoration, text transform, and text color reset.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
reference:
- class: text-decoration-underline
styles:
text-decoration: 'underline'
- class: text-decoration-line-through
styles:
text-decoration: 'line-through'
- class: text-decoration-none
styles:
text-decoration: 'none'
- class: text-lowercase
styles:
text-transform: 'lowercase'
- class: text-uppercase
styles:
text-transform: 'uppercase'
- class: text-capitalize
styles:
text-transform: 'capitalize'
---
## Text decoration
Decorate text in components with text decoration classes.
<Example code={`<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>`} />
## Text transform
Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.
<Example code={`<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>`} />
Note how `.text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
## Reset color
Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
<Example code={`<p class="text-body-secondary">
Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>`} />
## CSS
### Sass utilities API
Text decoration utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
```

64
site/src/content/docs/utilities/text-wrapping.mdx Normal file
View File

@@ -0,0 +1,64 @@
---
title: Text wrapping
description: Utilities for controlling text wrapping, overflow, and word breaking behavior.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
reference:
- class: text-wrap
styles:
white-space: 'normal'
- class: text-nowrap
styles:
white-space: 'nowrap'
- class: text-break
styles:
word-wrap: 'break-word'
word-break: 'break-word'
---
## Text wrapping and overflow
Wrap text with a `.text-wrap` class.
<Example code={`<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>`} />
Prevent text from wrapping with a `.text-nowrap` class.
<Example code={`<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>`} />
## Word break
Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
<Example code={`<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>`} />
<Callout type="warning">
Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS.
</Callout>
## CSS
### Sass utilities API
Text wrapping utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
```

49
site/src/content/docs/utilities/user-select.mdx Normal file
View File

@@ -0,0 +1,49 @@
---
title: User select
description: Control how users can select text content with user-select utilities.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
reference:
- class: user-select-all
styles:
user-select: 'all'
- class: user-select-auto
styles:
user-select: 'auto'
- class: user-select-none
styles:
user-select: 'none'
---
## Overview
Change the way in which the content is selected when the user interacts with it using user-select utilities.
## Basic usage
<Example code={`<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>`} />
## Use cases
- **`.user-select-all`** - Useful for code snippets, IDs, or other content users might want to copy entirely
- **`.user-select-auto`** - Default browser behavior, allows normal text selection
- **`.user-select-none`** - Prevents text selection, useful for UI elements, buttons, or decorative text
<Callout>
**Accessibility note:** Be careful when using `user-select: none` as it can interfere with assistive technologies and keyboard navigation. Ensure that important content remains accessible through other means.
</Callout>
## CSS
### Sass utilities API
User select utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"user-select": (
property: user-select,
values: all auto none
),
```

144
site/src/content/docs/utilities/width.mdx Normal file
View File

@@ -0,0 +1,144 @@
---
title: Width
description: Use width utilities to control the width of elements with responsive width classes.
toc: true
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/width
reference:
- class: w-25
styles:
width: '25%'
- class: w-50
styles:
width: '50%'
- class: w-75
styles:
width: '75%'
- class: w-100
styles:
width: '100%'
- class: w-auto
styles:
width: 'auto'
- class: w-min
styles:
width: 'min-content'
- class: w-max
styles:
width: 'max-content'
- class: w-fit
styles:
width: 'fit-content'
- class: max-w-100
styles:
max-width: '100%'
- class: min-w-0
styles:
min-width: '0'
- class: min-w-100
styles:
min-width: '100%'
- class: vw-100
styles:
width: '100vw'
- class: min-vw-100
styles:
min-width: '100vw'
---
## Overview
Use width utilities to set the width of elements. Width utilities are generated from the utility API and include support for percentage values, intrinsic sizing keywords, and viewport units.
## Relative width
Set width relative to the parent element using percentage-based utilities. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default.
<Example class="bd-example-flex" code={`<div class="w-25 p-3">Width 25%</div>
<div class="w-50 p-3">Width 50%</div>
<div class="w-75 p-3">Width 75%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>`} />
## Intrinsic sizing
Use intrinsic sizing keywords to set width based on content.
<Example class="bd-example-flex" code={`<div class="w-min p-3">Width min-content</div>
<div class="w-max p-3">Width max-content</div>
<div class="w-fit p-3">Width fit-content</div>`} />
## Max width
Set maximum width using `max-width` utilities.
<Example class="bd-example-flex" code={`<div style="width: 50%;">
<div class="max-w-100" style="width: 200%;">Max-width 100%</div>
</div>`} />
## Min width
Set minimum width using `min-width` utilities.
<Example class="bd-example-flex" code={`<div class="min-w-0 p-3" style="overflow: hidden;">
<div style="width: 200px;">This content is wider than the min-width: 0 container</div>
</div>
<div class="min-w-100 p-3">Min-width 100%</div>`} />
## Viewport width
Set width relative to the viewport using viewport units.
```html
<div class="vw-100">Width 100vw</div>
<div class="min-vw-100">Min-width 100vw</div>
```
<Callout type="warning">
**Beware of the viewport width!** Using `vw-100` can cause horizontal scrollbars if the content is wider than the viewport, particularly on smaller screens.
</Callout>
## CSS
### Sass utilities API
Width utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
```scss
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
min: min-content,
max: max-content,
fit: fit-content,
)
),
"max-width": (
property: max-width,
class: max-w,
values: (100: 100%)
),
"min-width": (
property: min-width,
class: min-w,
values: (
0: 0,
100: 100%
)
),
"viewport-width": (
property: width,
class: vw,
values: (100: 100vw)
),
"min-viewport-width": (
property: min-width,
class: min-vw,
values: (100: 100vw)
),
```

2
site/src/scss/_variables.scss
View File

@@ -24,7 +24,7 @@ $bd-callout-variants: info, warning, danger !default;
// --bd-teal-rgb: #{to-rgb($teal-500)};
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
--bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bd-sidebar-link-bg: light-dark(color-mix(in srgb, var(--bd-violet), transparent 90%), color-mix(in srgb, var(--bd-violet), transparent 70%));
--bd-callout-link: #{$blue-600};
--bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
--bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));