mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 12:59:05 +02:00
v6: Add sub-groups to Utilities docs (#41758)
* Split the flex.mdx file into separate pages * Add subgroups to docs utils nav * More new groups, split pages * Update MDX linter * fixes
This commit is contained in:
Mark Otto
GitHub
@@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"default": true,
|
"default": true,
|
||||||
"MD004": { "style": "dash" },
|
"MD004": { "style": "dash" },
|
||||||
|
"MD011": false,
|
||||||
"MD013": false,
|
"MD013": false,
|
||||||
"MD024": false,
|
"MD024": false,
|
||||||
"MD025": false,
|
"MD025": false,
|
||||||
|
|||||||
@@ -117,27 +117,52 @@
|
|||||||
icon_color: red
|
icon_color: red
|
||||||
pages:
|
pages:
|
||||||
- title: API
|
- title: API
|
||||||
- title: Aspect ratio
|
|
||||||
- title: Background
|
- title: Background
|
||||||
- title: Border
|
- title: Border
|
||||||
- title: Border radius
|
- title: Border radius
|
||||||
- title: Colors
|
- title: Colors
|
||||||
|
- group: Layout
|
||||||
|
pages:
|
||||||
|
- title: Aspect ratio
|
||||||
- title: Display
|
- title: Display
|
||||||
- title: Flex
|
|
||||||
- title: Float
|
- title: Float
|
||||||
- title: Interactions
|
|
||||||
- title: Link
|
|
||||||
- title: Object fit
|
- title: Object fit
|
||||||
- title: Opacity
|
|
||||||
- title: Overflow
|
- title: Overflow
|
||||||
- title: Position
|
- title: Position
|
||||||
- title: Shadows
|
|
||||||
- title: Sizing
|
|
||||||
- title: Spacing
|
|
||||||
- title: Text
|
|
||||||
- title: Vertical align
|
|
||||||
- title: Visibility
|
- title: Visibility
|
||||||
- title: Z-index
|
- title: Z-index
|
||||||
|
- group: Flex & Grid
|
||||||
|
pages:
|
||||||
|
- title: Align content
|
||||||
|
- title: Align items
|
||||||
|
- title: Align self
|
||||||
|
- title: Flex
|
||||||
|
- title: Justify content
|
||||||
|
- title: Justify items
|
||||||
|
- title: Place items
|
||||||
|
- 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
|
- title: Extend
|
||||||
icon: tools
|
icon: tools
|
||||||
|
|||||||
@@ -29,7 +29,16 @@ const sidebar = getData('sidebar')
|
|||||||
{group.title}
|
{group.title}
|
||||||
</strong>
|
</strong>
|
||||||
<ul class="list-unstyled fw-normal pb-2 small">
|
<ul class="list-unstyled fw-normal pb-2 small">
|
||||||
{group.pages?.map((page) => {
|
{group.pages?.map((item: any) => {
|
||||||
|
// Handle sub-groups
|
||||||
|
if (item.group && item.pages) {
|
||||||
|
return (
|
||||||
|
<li class="mb-2">
|
||||||
|
<div class="bd-links-subgroup fw-semibold mt-3">
|
||||||
|
{item.group}
|
||||||
|
</div>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
{item.pages.map((page: any) => {
|
||||||
const docSlug = getSlug(page.title)
|
const docSlug = getSlug(page.title)
|
||||||
const unversionedPageSlug = `${groupSlug}/${docSlug}`
|
const unversionedPageSlug = `${groupSlug}/${docSlug}`
|
||||||
|
|
||||||
@@ -60,6 +69,39 @@ const sidebar = getData('sidebar')
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle regular pages
|
||||||
|
const docSlug = getSlug(item.title)
|
||||||
|
const unversionedPageSlug = `${groupSlug}/${docSlug}`
|
||||||
|
|
||||||
|
const url = `/docs/${getConfig().docs_version}/${unversionedPageSlug}`
|
||||||
|
const active = Astro.params.slug === unversionedPageSlug
|
||||||
|
|
||||||
|
const generatedPage = docsPages.find((page) => page.slug === unversionedPageSlug)
|
||||||
|
|
||||||
|
// This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
|
||||||
|
if (!generatedPage) {
|
||||||
|
throw new Error(
|
||||||
|
`The page '${item.title}' referenced in 'site/data/sidebar.yml' does not exist at '${url}'.`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url}
|
||||||
|
class:list={['bd-links-link d-inline-block rounded', { active }]}
|
||||||
|
aria-current={active ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
const active = Astro.params.slug === groupSlug
|
const active = Astro.params.slug === groupSlug
|
||||||
|
|
||||||
|
|||||||
212
site/src/content/docs/utilities/align-content.mdx
Normal file
212
site/src/content/docs/utilities/align-content.mdx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
---
|
||||||
|
title: Align content
|
||||||
|
description: Use align-content utilities to align flex items together on the cross axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
|
||||||
|
|
||||||
|
**Heads up!** This property has no effect on single rows of flex items.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
### Start
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-start flex-wrap" style="height: 200px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-start flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### End
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-end flex-wrap" style="height: 200px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-end flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Center
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-center flex-wrap" style="height: 200px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-center flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Between
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-between flex-wrap" style="height: 200px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-between flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Around
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-around flex-wrap" style="height: 200px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-around flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stretch
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-stretch flex-wrap" style="height: 200px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-stretch flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `align-content`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-between</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-around</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Align content 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
|
||||||
|
"align-content": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-content,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
88
site/src/content/docs/utilities/align-items.mdx
Normal file
88
site/src/content/docs/utilities/align-items.mdx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
---
|
||||||
|
title: Align items
|
||||||
|
description: Use align-items utilities to change the alignment of flex items on the cross axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-items-start mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-end mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-baseline mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-stretch" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-items-start">...</div>
|
||||||
|
<div class="d-flex align-items-end">...</div>
|
||||||
|
<div class="d-flex align-items-center">...</div>
|
||||||
|
<div class="d-flex align-items-baseline">...</div>
|
||||||
|
<div class="d-flex align-items-stretch">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `align-items`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-baseline</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Align items 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
|
||||||
|
"align-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-items,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
baseline: baseline,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
89
site/src/content/docs/utilities/align-self.mdx
Normal file
89
site/src/content/docs/utilities/align-self.mdx
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
title: Align self
|
||||||
|
description: Use align-self utilities to individually change the alignment of flex items on the cross axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="align-self-start p-2">Aligned flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="align-self-end p-2">Aligned flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="align-self-center p-2">Aligned flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex mb-3" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="align-self-baseline p-2">Aligned flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex" style="height: 100px">
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
<div class="align-self-stretch p-2">Aligned flex item</div>
|
||||||
|
<div class="p-2">Flex item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="align-self-start">Aligned flex item</div>
|
||||||
|
<div class="align-self-end">Aligned flex item</div>
|
||||||
|
<div class="align-self-center">Aligned flex item</div>
|
||||||
|
<div class="align-self-baseline">Aligned flex item</div>
|
||||||
|
<div class="align-self-stretch">Aligned flex item</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `align-self`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-baseline</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Align self 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
|
||||||
|
"align-self": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-self,
|
||||||
|
values: (
|
||||||
|
auto: auto,
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
baseline: baseline,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
@@ -65,191 +65,14 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
|
|||||||
Responsive variations also exist for `flex-direction`.
|
Responsive variations also exist for `flex-direction`.
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
{getSequence(0, 5).map((i) => (
|
||||||
return (
|
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<li><code>.flex{breakpoint.abbr}-row</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-row</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-row-reverse</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-row-reverse</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-column</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-column</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-column-reverse</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-column-reverse</code></li>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
))}
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Justify content
|
|
||||||
|
|
||||||
Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex justify-content-start mb-3">
|
|
||||||
<div class="p-2 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">Start</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-end mb-3">
|
|
||||||
<div class="p-2 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">End</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-center mb-3">
|
|
||||||
<div class="p-2 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">Center</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-between mb-3">
|
|
||||||
<div class="p-2 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">Between</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-around mb-3">
|
|
||||||
<div class="p-2 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">Around</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-evenly">
|
|
||||||
<div class="p-2 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">Evenly</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex justify-content-start">...</div>
|
|
||||||
<div class="d-flex justify-content-end">...</div>
|
|
||||||
<div class="d-flex justify-content-center">...</div>
|
|
||||||
<div class="d-flex justify-content-between">...</div>
|
|
||||||
<div class="d-flex justify-content-around">...</div>
|
|
||||||
<div class="d-flex justify-content-evenly">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `justify-content`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-between</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-around</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Align items
|
|
||||||
|
|
||||||
Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-items-start mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-end mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-baseline mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-stretch" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-items-start">...</div>
|
|
||||||
<div class="d-flex align-items-end">...</div>
|
|
||||||
<div class="d-flex align-items-center">...</div>
|
|
||||||
<div class="d-flex align-items-baseline">...</div>
|
|
||||||
<div class="d-flex align-items-stretch">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `align-items`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-baseline</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Align self
|
|
||||||
|
|
||||||
Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="align-self-start p-2">Aligned flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="align-self-end p-2">Aligned flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="align-self-center p-2">Aligned flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex mb-3" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="align-self-baseline p-2">Aligned flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex" style="height: 100px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="align-self-stretch p-2">Aligned flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="align-self-start">Aligned flex item</div>
|
|
||||||
<div class="align-self-end">Aligned flex item</div>
|
|
||||||
<div class="align-self-center">Aligned flex item</div>
|
|
||||||
<div class="align-self-baseline">Aligned flex item</div>
|
|
||||||
<div class="align-self-stretch">Aligned flex item</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `align-self`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-baseline</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Fill
|
## Fill
|
||||||
@@ -274,7 +97,7 @@ Responsive variations also exist for `flex-fill`.
|
|||||||
|
|
||||||
## Grow and shrink
|
## Grow and shrink
|
||||||
|
|
||||||
Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
|
Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex">
|
<Example class="bd-example-flex" code={`<div class="d-flex">
|
||||||
<div class="p-2 flex-grow-1">Flex item</div>
|
<div class="p-2 flex-grow-1">Flex item</div>
|
||||||
@@ -282,7 +105,7 @@ Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill a
|
|||||||
<div class="p-2">Third flex item</div>
|
<div class="p-2">Third flex item</div>
|
||||||
</div>`} />
|
</div>`} />
|
||||||
|
|
||||||
Use `.flex-shrink-*` utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with `.w-100`.
|
Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex">
|
<Example class="bd-example-flex" code={`<div class="d-flex">
|
||||||
<div class="p-2 w-100">Flex item</div>
|
<div class="p-2 w-100">Flex item</div>
|
||||||
@@ -295,51 +118,15 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
|
|||||||
{getData('breakpoints').map((breakpoint) => {
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-0</code></li>
|
<li><code>.flex{breakpoint.abbr}-grow-0</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-1</code></li>
|
<li><code>.flex{breakpoint.abbr}-grow-1</code></li>
|
||||||
|
<li><code>.flex{breakpoint.abbr}-shrink-0</code></li>
|
||||||
|
<li><code>.flex{breakpoint.abbr}-shrink-1</code></li>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Auto margins
|
|
||||||
|
|
||||||
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
|
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex mb-3">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex mb-3">
|
|
||||||
<div class="me-auto p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex mb-3">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="ms-auto p-2">Flex item</div>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
### With align-items
|
|
||||||
|
|
||||||
Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
|
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
|
|
||||||
<div class="mb-auto p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="mt-auto p-2">Flex item</div>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
## Wrap
|
## Wrap
|
||||||
|
|
||||||
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
|
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
|
||||||
@@ -424,335 +211,10 @@ Responsive variations also exist for `flex-wrap`.
|
|||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Order
|
|
||||||
|
|
||||||
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
|
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex flex-nowrap">
|
|
||||||
<div class="order-3 p-2">First flex item</div>
|
|
||||||
<div class="order-2 p-2">Second flex item</div>
|
|
||||||
<div class="order-1 p-2">Third flex item</div>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
Responsive variations also exist for `order`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => getSequence(0, 5).map((value) => {
|
|
||||||
return (
|
|
||||||
<li><code>.order{breakpoint.abbr}-{value}</code></li>
|
|
||||||
)
|
|
||||||
}))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => ['first', 'last'].map((value) => {
|
|
||||||
return (
|
|
||||||
<li><code>.order{breakpoint.abbr}-{value}</code></li>
|
|
||||||
)
|
|
||||||
}))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Align content
|
|
||||||
|
|
||||||
Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we’ve enforced `flex-wrap: wrap` and increased the number of flex items.
|
|
||||||
|
|
||||||
**Heads up!** This property has no effect on single rows of flex items.
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-start flex-wrap">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-end flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-center flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-between flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-around flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
<div class="p-2">Flex item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-stretch flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `align-content`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-between</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-around</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## CSS Grid utilities
|
|
||||||
|
|
||||||
While most of the utilities above apply to flexbox containers, Bootstrap also includes utilities specifically for CSS Grid layouts.
|
|
||||||
|
|
||||||
### Justify items
|
|
||||||
|
|
||||||
Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex vstack gap-3">
|
|
||||||
<div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-grid justify-items-start">...</div>
|
|
||||||
<div class="d-grid justify-items-end">...</div>
|
|
||||||
<div class="d-grid justify-items-center">...</div>
|
|
||||||
<div class="d-grid justify-items-stretch">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `justify-items`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
### Place items
|
|
||||||
|
|
||||||
Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex vstack gap-3">
|
|
||||||
<div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-grid place-items-start">...</div>
|
|
||||||
<div class="d-grid place-items-end">...</div>
|
|
||||||
<div class="d-grid place-items-center">...</div>
|
|
||||||
<div class="d-grid place-items-stretch">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `place-items`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Media object
|
|
||||||
|
|
||||||
Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
|
|
||||||
|
|
||||||
<Example code={`<div class="d-flex">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<Placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" />
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1 ms-3">
|
|
||||||
This is some content from a media component. You can replace this with any content and adjust it as needed.
|
|
||||||
</div>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
And say you want to vertically center the content next to the image:
|
|
||||||
|
|
||||||
<Example code={`<div class="d-flex align-items-center">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<Placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" />
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1 ms-3">
|
|
||||||
This is some content from a media component. You can replace this with any content and adjust it as needed.
|
|
||||||
</div>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
|
|
||||||
### Sass utilities API
|
### Sass utilities API
|
||||||
|
|
||||||
Flexbox and CSS Grid utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
|
Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
|
||||||
|
|
||||||
<ScssDocs name="utils-flex" file="scss/_utilities.scss" />
|
<ScssDocs name="utils-flex" file="scss/_utilities.scss" />
|
||||||
|
|||||||
122
site/src/content/docs/utilities/font-style.mdx
Normal file
122
site/src/content/docs/utilities/font-style.mdx
Normal 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
148
site/src/content/docs/utilities/height.mdx
Normal 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)
|
||||||
|
),
|
||||||
|
```
|
||||||
96
site/src/content/docs/utilities/justify-content.mdx
Normal file
96
site/src/content/docs/utilities/justify-content.mdx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
---
|
||||||
|
title: Justify content
|
||||||
|
description: Use justify-content utilities to change the alignment of flex items on the main axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex justify-content-start mb-3">
|
||||||
|
<div class="p-2 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">Start</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-end mb-3">
|
||||||
|
<div class="p-2 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">End</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-center mb-3">
|
||||||
|
<div class="p-2 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">Center</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between mb-3">
|
||||||
|
<div class="p-2 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">Between</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-around mb-3">
|
||||||
|
<div class="p-2 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">Around</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-evenly">
|
||||||
|
<div class="p-2 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">Evenly</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex justify-content-start">...</div>
|
||||||
|
<div class="d-flex justify-content-end">...</div>
|
||||||
|
<div class="d-flex justify-content-center">...</div>
|
||||||
|
<div class="d-flex justify-content-between">...</div>
|
||||||
|
<div class="d-flex justify-content-around">...</div>
|
||||||
|
<div class="d-flex justify-content-evenly">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `justify-content`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-between</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-around</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Justify content 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
|
||||||
|
"justify-content": (
|
||||||
|
responsive: true,
|
||||||
|
property: justify-content,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
evenly: space-evenly,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
82
site/src/content/docs/utilities/justify-items.mdx
Normal file
82
site/src/content/docs/utilities/justify-items.mdx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
title: Justify items
|
||||||
|
description: Use justify-items utilities to control the alignment of grid items along the inline axis (horizontally, in most writing modes).
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. This property controls how grid items are positioned horizontally within their grid areas.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
Use `justify-items` utilities to control the horizontal alignment of grid items. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex vstack gap-3">
|
||||||
|
<div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-grid justify-items-start">...</div>
|
||||||
|
<div class="d-grid justify-items-end">...</div>
|
||||||
|
<div class="d-grid justify-items-center">...</div>
|
||||||
|
<div class="d-grid justify-items-stretch">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `justify-items`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Justify items 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
|
||||||
|
"justify-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: justify-items,
|
||||||
|
values: (
|
||||||
|
start: start,
|
||||||
|
end: end,
|
||||||
|
center: center,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
208
site/src/content/docs/utilities/margin.mdx
Normal file
208
site/src/content/docs/utilities/margin.mdx
Normal 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><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
180
site/src/content/docs/utilities/padding.mdx
Normal 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><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
|
||||||
|
),
|
||||||
|
```
|
||||||
82
site/src/content/docs/utilities/place-items.mdx
Normal file
82
site/src/content/docs/utilities/place-items.mdx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
title: Place items
|
||||||
|
description: Use place-items utilities to control the alignment of grid items within their grid areas on both the block and inline axes simultaneously.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. This property controls how grid items are positioned within their grid areas on both axes.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
Use `place-items` utilities to control the alignment of grid items. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex vstack gap-3">
|
||||||
|
<div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-grid place-items-start">...</div>
|
||||||
|
<div class="d-grid place-items-end">...</div>
|
||||||
|
<div class="d-grid place-items-center">...</div>
|
||||||
|
<div class="d-grid place-items-stretch">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `place-items`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Place items 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
|
||||||
|
"place-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: place-items,
|
||||||
|
values: (
|
||||||
|
start: start,
|
||||||
|
end: end,
|
||||||
|
center: center,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
63
site/src/content/docs/utilities/pointer-events.mdx
Normal file
63
site/src/content/docs/utilities/pointer-events.mdx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
---
|
||||||
|
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
73
site/src/content/docs/utilities/text-alignment.mdx
Normal 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>
|
||||||
|
<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
69
site/src/content/docs/utilities/text-decoration.mdx
Normal 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
64
site/src/content/docs/utilities/text-wrapping.mdx
Normal 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
49
site/src/content/docs/utilities/user-select.mdx
Normal 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
144
site/src/content/docs/utilities/width.mdx
Normal 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)
|
||||||
|
),
|
||||||
|
```
|
||||||
@@ -80,6 +80,10 @@ const dataDefinitions = {
|
|||||||
title: z.string(),
|
title: z.string(),
|
||||||
icon: z.string().optional(),
|
icon: z.string().optional(),
|
||||||
icon_color: z.string().optional(),
|
icon_color: z.string().optional(),
|
||||||
|
pages: z
|
||||||
|
.object({
|
||||||
|
title: z.string().optional(),
|
||||||
|
group: z.string().optional(),
|
||||||
pages: z
|
pages: z
|
||||||
.object({
|
.object({
|
||||||
title: z.string()
|
title: z.string()
|
||||||
@@ -87,6 +91,9 @@ const dataDefinitions = {
|
|||||||
.array()
|
.array()
|
||||||
.optional()
|
.optional()
|
||||||
})
|
})
|
||||||
|
.array()
|
||||||
|
.optional()
|
||||||
|
})
|
||||||
.array(),
|
.array(),
|
||||||
'theme-colors': z
|
'theme-colors': z
|
||||||
.object({
|
.object({
|
||||||
@@ -117,7 +124,7 @@ let data = new Map<DataType, z.infer<DataSchema>>()
|
|||||||
export function getData<TType extends DataType>(type: TType): z.infer<(typeof dataDefinitions)[TType]> {
|
export function getData<TType extends DataType>(type: TType): z.infer<(typeof dataDefinitions)[TType]> {
|
||||||
if (data.has(type)) {
|
if (data.has(type)) {
|
||||||
// Returns the data if it has already been loaded.
|
// Returns the data if it has already been loaded.
|
||||||
return data.get(type)
|
return data.get(type) as z.infer<(typeof dataDefinitions)[TType]>
|
||||||
}
|
}
|
||||||
|
|
||||||
const dataPath = `./site/data/${type}.yml`
|
const dataPath = `./site/data/${type}.yml`
|
||||||
@@ -127,7 +134,7 @@ export function getData<TType extends DataType>(type: TType): z.infer<(typeof da
|
|||||||
const rawData = yaml.load(fs.readFileSync(dataPath, 'utf8'))
|
const rawData = yaml.load(fs.readFileSync(dataPath, 'utf8'))
|
||||||
|
|
||||||
// Parse the data using the data schema to validate its content and get back a fully typed data object.
|
// Parse the data using the data schema to validate its content and get back a fully typed data object.
|
||||||
const parsedData = dataDefinitions[type].parse(rawData)
|
const parsedData = dataDefinitions[type].parse(rawData) as z.infer<(typeof dataDefinitions)[TType]>
|
||||||
|
|
||||||
// Cache the data.
|
// Cache the data.
|
||||||
data.set(type, parsedData)
|
data.set(type, parsedData)
|
||||||
|
|||||||
@@ -28,6 +28,11 @@
|
|||||||
color: var(--bs-emphasis-color);
|
color: var(--bs-emphasis-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-links-subgroup {
|
||||||
|
margin-left: 1.625rem;
|
||||||
|
color: var(--bs-emphasis-color);
|
||||||
|
}
|
||||||
|
|
||||||
.bd-links-nav {
|
.bd-links-nav {
|
||||||
// @include media-breakpoint-down(lg) {
|
// @include media-breakpoint-down(lg) {
|
||||||
// font-size: .875rem;
|
// font-size: .875rem;
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ $bd-callout-variants: info, warning, danger !default;
|
|||||||
// --bd-teal-rgb: #{to-rgb($teal-500)};
|
// --bd-teal-rgb: #{to-rgb($teal-500)};
|
||||||
--bd-violet-bg: var(--bd-violet);
|
--bd-violet-bg: var(--bd-violet);
|
||||||
--bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
|
--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-link: #{$blue-600};
|
||||||
--bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
|
--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%));
|
--bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
|
||||||
|
|||||||
Reference in New Issue
Block a user