showMarkup && (
<>
{showPreview && (
- <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
+ <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
<div class="d-flex ms-auto">
<button
--- /dev/null
+---
+import { Prism } from '@astrojs/prism'
+
+interface Props {
+ /**
+ * Array of reference items with class names and code snippets, or section headings
+ */
+ data: Array<{
+ type?: 'item' | 'section';
+ class?: string;
+ code?: string;
+ language?: string; // Language for syntax highlighting (css, scss, js, etc.)
+ description?: string;
+ title?: string; // Used for section headings
+ }>;
+ /**
+ * The CSS class to apply to the table.
+ * @default "table"
+ */
+ class?: string;
+ /**
+ * Column headers for the table
+ * @default ["Class", "Styles"]
+ */
+ headers?: [string, string];
+}
+
+const {
+ data,
+ class: tableClass = "table",
+ headers = ["Class", "Styles"]
+} = Astro.props;
+
+// Helper function to process class names with placeholder syntax
+function processClassName(className: string) {
+ return className.replace(/\{([^}]+)\}/g, '<em>{$1}</em>');
+}
+---
+
+<div class="table-responsive">
+ <table class={tableClass}>
+ <thead>
+ <tr>
+ <th>{headers[0]}</th>
+ <th>{headers[1]}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {data.map((item) => {
+ if (item.type === 'section') {
+ return (
+ <tr class="section-header">
+ <td colspan="2">
+ {item.title}
+ </td>
+ </tr>
+ );
+ }
+
+ return (
+ <tr>
+ <td>
+ <code set:html={processClassName(item.class || '')}></code>
+ {item.description && <div class="text-muted small mt-1">{item.description}</div>}
+ </td>
+ <td>
+ <div class="highlight">
+ <Prism code={item.code || ''} lang={item.language || 'css'} />
+ </div>
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+</div>
+
+<style>
+ .table-responsive {
+ max-height: 440px;
+ overflow-y: auto;
+ margin-bottom: 2rem;
+ }
+
+ td {
+ vertical-align: top;
+ }
+
+ td:first-child {
+ min-width: 200px;
+ color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
+ }
+
+ td:last-child {
+ width: 90%;
+ }
+
+ tr:has(+ .section-header) td {
+ border-bottom: 0;
+ }
+
+ .section-header td {
+ padding-block-start: 1rem;
+ color: var(--bs-emphasis-color);
+ font-weight: 600;
+ }
+
+ .highlight {
+ padding: 0;
+ background-color: transparent;
+ }
+ .highlight :global(pre) {
+ padding: 0;
+ margin: 0;
+ }
+
+ code {
+ display: inline-block;
+ line-height: 18px;
+ white-space: nowrap;
+ }
+</style>
+
+
+<!-- ## Multi-line Code Example
+
+Here's how you can use multi-line code blocks with syntax highlighting:
+
+<RefTable
+ headers={["Class", "CSS Rules"]}
+ data={[
+ {
+ class: '.custom-border',
+ code: `border: 2px solid var(--bs-primary);
+border-radius: 0.375rem;
+box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);`,
+ description: 'Custom border with shadow'
+ },
+ {
+ class: '.focus-border',
+ code: `border: 1px solid var(--bs-border-color);
+transition: border-color 0.15s ease-in-out,
+ box-shadow 0.15s ease-in-out;
+
+&:focus {
+ border-color: var(--bs-primary);
+ outline: 0;
+ box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+}`,
+ language: 'scss',
+ description: 'Focus state with smooth transitions'
+ },
+ {
+ class: '.toggle-border()',
+ code: `function toggleBorder(element) {
+ element.classList.toggle('border');
+ element.classList.toggle('border-primary');
+}`,
+ language: 'javascript',
+ description: 'JavaScript helper function'
+ }
+ ]}
+/> -->
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
---
+import RefTable from '@components/shortcodes/RefTable.astro'
+
## Reference
-<BsTable class="table reference-table">
-| Class | Styles |
-| --- | --- |
-| `.ratio-auto` | `aspect-ratio: auto;` |
-| `.ratio-1x1` | `aspect-ratio: 1 / 1;` |
-| `.ratio-4x3` | `aspect-ratio: 4 / 3;` |
-| `.ratio-16x9` | `aspect-ratio: 16 / 9;` |
-| `.ratio-21x9` | `aspect-ratio: 21 / 9;` |
-</BsTable>
+<RefTable data={[
+ {
+ class: '.ratio-auto',
+ code: 'aspect-ratio: auto;'
+ },
+ {
+ class: '.ratio-1x1',
+ code: 'aspect-ratio: 1 / 1;'
+ },
+ {
+ class: '.ratio-4x3',
+ code: 'aspect-ratio: 4 / 3;'
+ },
+ {
+ class: '.ratio-16x9',
+ code: 'aspect-ratio: 16 / 9;'
+ },
+ {
+ class: '.ratio-21x9',
+ code: 'aspect-ratio: 21 / 9;'
+ }
+]} />
## Example
---
import { getData } from '@libs/data'
+import RefTable from '@components/shortcodes/RefTable.astro'
## Reference
-<BsTable class="table reference-table">
-| Class | Styles |
-| --- | --- |
-| `.bg-primary` | `background-color: var(--bs-primary);` |
-| `.bg-subtle-primary` | `background-color: var(--bs-subtle-primary);` |
-| `.bg-accent` | `background-color: var(--bs-accent);` |
-| `.bg-subtle-accent` | `background-color: var(--bs-subtle-accent);` |
-| `.bg-secondary` | `background-color: var(--bs-secondary);` |
-| `.bg-subtle-secondary` | `background-color: var(--bs-subtle-secondary);` |
-| `.bg-success` | `background-color: var(--bs-success);` |
-| `.bg-subtle-success` | `background-color: var(--bs-subtle-success);` |
-| `.bg-danger` | `background-color: var(--bs-danger);` |
-| `.bg-subtle-danger` | `background-color: var(--bs-subtle-danger);` |
-| `.bg-warning` | `background-color: var(--bs-warning);` |
-| `.bg-subtle-warning` | `background-color: var(--bs-subtle-warning);` |
-| `.bg-info` | `background-color: var(--bs-info);` |
-| `.bg-subtle-info` | `background-color: var(--bs-subtle-info);` |
-| `.bg` | `background-color: var(--bs-bg);` |
-| `.bg-1` | `background-color: var(--bs-bg-1);` |
-| `.bg-2` | `background-color: var(--bs-bg-2);` |
-| `.bg-3` | `background-color: var(--bs-bg-3);` |
-| `.bg-white` | `background-color: var(--bs-white);` |
-| `.bg-black` | `background-color: var(--bs-black);` |
-| `.bg-inherit` | `background-color: inherit;` |
-| `.bg-transparent` | `background-color: transparent;` |
-</BsTable>
+<RefTable data={[
+ {
+ class: '.bg-primary',
+ code: 'background-color: var(--bs-primary);'
+ },
+ {
+ class: '.bg-subtle-primary',
+ code: 'background-color: var(--bs-subtle-primary);'
+ },
+ {
+ class: '.bg-accent',
+ code: 'background-color: var(--bs-accent);'
+ },
+ {
+ class: '.bg-subtle-accent',
+ code: 'background-color: var(--bs-subtle-accent);'
+ },
+ {
+ class: '.bg-secondary',
+ code: 'background-color: var(--bs-secondary);'
+ },
+ {
+ class: '.bg-subtle-secondary',
+ code: 'background-color: var(--bs-subtle-secondary);'
+ },
+ {
+ class: '.bg-success',
+ code: 'background-color: var(--bs-success);'
+ },
+ {
+ class: '.bg-subtle-success',
+ code: 'background-color: var(--bs-subtle-success);'
+ },
+ {
+ class: '.bg-danger',
+ code: 'background-color: var(--bs-danger);'
+ },
+ {
+ class: '.bg-subtle-danger',
+ code: 'background-color: var(--bs-subtle-danger);'
+ },
+ {
+ class: '.bg-warning',
+ code: 'background-color: var(--bs-warning);'
+ },
+ {
+ class: '.bg-subtle-warning',
+ code: 'background-color: var(--bs-subtle-warning);'
+ },
+ {
+ class: '.bg-info',
+ code: 'background-color: var(--bs-info);'
+ },
+ {
+ class: '.bg-subtle-info',
+ code: 'background-color: var(--bs-subtle-info);'
+ },
+ {
+ class: '.bg',
+ code: 'background-color: var(--bs-bg);'
+ },
+ {
+ class: '.bg-1',
+ code: 'background-color: var(--bs-bg-1);'
+ },
+ {
+ class: '.bg-2',
+ code: 'background-color: var(--bs-bg-2);'
+ },
+ {
+ class: '.bg-3',
+ code: 'background-color: var(--bs-bg-3);'
+ },
+ {
+ class: '.bg-white',
+ code: 'background-color: var(--bs-white);'
+ },
+ {
+ class: '.bg-black',
+ code: 'background-color: var(--bs-black);'
+ },
+ {
+ class: '.bg-inherit',
+ code: 'background-color: inherit;'
+ },
+ {
+ class: '.bg-transparent',
+ code: 'background-color: transparent;'
+ }
+]} />
## Background color
{/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
-Background color opacities build on that with their own map that’s consumed by the utilities API:
+Background color opacities build on that with their own map that's consumed by the utilities API:
{/* <ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" /> */}
### Sass mixins
-**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you’d like to create your own gradients.
+**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
<ScssDocs name="gradient-bg-mixin" file="scss/mixins/_gradients.scss" />
---
import { getData } from '@libs/data'
+import RefTable from '@components/shortcodes/RefTable.astro'
## Reference
-<BsTable class="table reference-table">
-| Class | Styles |
-| --- | --- |
-| `.rounded` | `border-radius: var(--bs-border-radius);` |
-| `.rounded-top` | `border-top-left-radius: var(--bs-border-radius);`<br/>`border-top-right-radius: var(--bs-border-radius);` |
-| `.rounded-end` | `border-bottom-right-radius: var(--bs-border-radius);`<br/>`border-top-right-radius: var(--bs-border-radius);` |
-| `.rounded-bottom` | `border-bottom-left-radius: var(--bs-border-radius);`<br/>`border-bottom-right-radius: var(--bs-border-radius);` |
-| `.rounded-start` | `border-top-left-radius: var(--bs-border-radius);`<br/>`border-bottom-left-radius: var(--bs-border-radius);` |
-| `.rounded-0` | `border-radius: 0;` |
-| `.rounded-1` | `border-radius: var(--bs-border-radius-sm);` |
-| `.rounded-2` | `border-radius: var(--bs-border-radius);` |
-</BsTable>
+<RefTable data={[
+ {
+ class: '.rounded',
+ code: 'border-radius: var(--bs-border-radius);'
+ },
+ {
+ class: '.rounded-top',
+ code: `border-top-left-radius: var(--bs-border-radius);
+border-top-right-radius: var(--bs-border-radius);`
+ },
+ {
+ class: '.rounded-end',
+ code: `border-bottom-right-radius: var(--bs-border-radius);
+border-top-right-radius: var(--bs-border-radius);`
+ },
+ {
+ class: '.rounded-bottom',
+ code: `border-bottom-left-radius: var(--bs-border-radius);
+border-bottom-right-radius: var(--bs-border-radius);`
+ },
+ {
+ class: '.rounded-start',
+ code: `border-top-left-radius: var(--bs-border-radius);
+border-bottom-left-radius: var(--bs-border-radius);`
+ },
+ {
+ class: '.rounded-0',
+ code: 'border-radius: 0;'
+ },
+ {
+ class: '.rounded-1',
+ code: 'border-radius: var(--bs-border-radius-sm);'
+ },
+ {
+ class: '.rounded-2',
+ code: 'border-radius: var(--bs-border-radius);'
+ }
+]} />
## Radius
---
import { getData } from '@libs/data'
+import RefTable from '@components/shortcodes/RefTable.astro'
+
+## Reference
+
+<RefTable data={[
+ {
+ class: '.border',
+ code: 'border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-t',
+ code: 'border-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-e',
+ code: 'border-inline-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-b',
+ code: 'border-block-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-s',
+ code: 'border-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-y',
+ code: 'border-block: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-x',
+ code: 'border-inline: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);'
+ },
+ {
+ class: '.border-color',
+ code: 'border-color: var(--bs-border-color);'
+ },
+ {
+ class: '.border-width',
+ code: 'border-width: var(--bs-border-width);'
+ },
+ {
+ class: '.dividers-x',
+ code: `.dividers-x > :not(:first-child) {
+ border-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+ }`
+ },
+ {
+ class: '.dividers-y',
+ code: `.dividers-y > :not(:first-child) {
+ border-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+ }`
+ }
+]} />
## Border
-Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
+Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
### Additive
-Add borders to custom elements:
+Add borders to custom elements. `.border` adds a border to all sides of an element while the other utilities add a border to a specific side.
-<Example class="bd-example-border-utils" code={`<span class="border"></span>
-<span class="border-top"></span>
-<span class="border-end"></span>
-<span class="border-bottom"></span>
-<span class="border-start"></span>`} />
+<Example class="bd-example-border-utils" code={`<span class="border">All</span>
+<span class="border-t">Top</span>
+<span class="border-e">End</span>
+<span class="border-b">Bottom</span>
+<span class="border-s">Start</span>`} />
+
+You can also use different border width sizes on all sides, or one at a time.
+
+<Example class="bd-example-border-utils" code={`<span class="border-3">All</span>
+<span class="border-t-3">Top</span>
+<span class="border-e-3">End</span>
+<span class="border-b-3">Bottom</span>
+<span class="border-s-3">Start</span>`} />
### Subtractive
-Or remove borders:
+You can also remove borders from all or specific sides.
-<Example class="bd-example-border-utils" code={`<span class="border border-0"></span>
-<span class="border border-top-0"></span>
-<span class="border border-end-0"></span>
-<span class="border border-bottom-0"></span>
-<span class="border border-start-0"></span>`} />
+<Example class="bd-example-border-utils" code={`<span class="border-0">All</span>
+<span class="border border-t-0">Top</span>
+<span class="border border-e-0">End</span>
+<span class="border border-b-0">Bottom</span>
+<span class="border border-s-0">Start</span>`} />
## Color
-<Callout>
-Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don’t yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6.
-</Callout>
-
-Change the border color using utilities built on our theme colors.
+Change the border color using utilities built on our theme colors. Theme colors are adaptive to color mode via the `light-dark()` CSS function.
<Example class="bd-example-border-utils" code={[
...getData('theme-colors').map((themeColor) => `<span class="border border-${themeColor.name}"></span>
<input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
- <div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
+ <div class="h4 pb-2 mb-4 text-danger border-b border-danger">
Dangerous heading
</div>
- <div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
+ <div class="p-3 bg-info bg-10 border border-info border-s-0 rounded-end">
Changing border color and width
</div>`} />
}
```
-We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.
+We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-border-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.border-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.border-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
### Example
Or, choose from any of the `.border-opacity` utilities:
<Example code={`<div class="border border-success p-2 mb-2">This is default success border</div>
-<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
-<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
-<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
-<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>`} />
+<div class="border border-success border-90 p-2 mb-2">This is 90% opacity success border</div>
+<div class="border border-success border-70 p-2 mb-2">This is 70% opacity success border</div>
+<div class="border border-success border-60 p-2 mb-2">This is 60% opacity success border</div>
+<div class="border border-success border-80 p-2 mb-2">This is 80% opacity success border</div>
+<div class="border border-success border-40 p-2 mb-2">This is 40% opacity success border</div>
+<div class="border border-success border-50 p-2 mb-2">This is 50% opacity success border</div>
+<div class="border border-success border-30 p-2 mb-2">This is 30% opacity success border</div>
+<div class="border border-success border-20 p-2 mb-2">This is 20% opacity success border</div>
+<div class="border border-success border-10 p-2">This is 10% opacity success border</div>`} />
## Width
-<Example class="bd-example-border-utils" code={`<span class="border border-1"></span>
-<span class="border border-2"></span>
-<span class="border border-3"></span>
-<span class="border border-4"></span>
-<span class="border border-5"></span>`} />
-
-## Radius
-
-Add classes to an element to easily round its corners.
-
-<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded" title="Example rounded image" />
-<Placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" />
-<Placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" />
-<Placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" />
-<Placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" />`} />
+<Example class="bd-example-border-utils" code={`<span class="border"></span>
+<span class="border-1"></span>
+<span class="border-2"></span>
+<span class="border-3"></span>
+<span class="border-4"></span>
+<span class="border-5"></span>`} />
-### Sizes
+## Between
-Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
+Use the `.dividers-x` and `.dividers-y` utilities to add borders between items. You can also mix and match color width utilities here.
-<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" />
-<Placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" />
-<Placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" />
-<Placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" />
-<Placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" />
-<Placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" />
-<Placeholder width="75" height="75" class="rounded-circle" title="Completely round image" />
-<Placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" />`} />
+<Example code={`<div class="d-flex dividers-x">
+ <div class="p-3">First item</div>
+ <div class="p-3">Second item</div>
+ <div class="p-3">Third item</div>
+ </div>`} />
-<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" />
-<Placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" />
-<Placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" />
-<Placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" />
-<Placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" />`} />
+<Example code={`<div class="d-flex flex-column dividers-y ">
+ <div class="p-3">First item</div>
+ <div class="p-3">Second item</div>
+ <div class="p-3">Third item</div>
+ </div>`} />
## CSS
### Variables
-<ScssDocs name="root-border-var" file="scss/_root.scss" />
+{/* <ScssDocs name="root-border-var" file="scss/_root.scss" /> */}
### Sass variables
-<ScssDocs name="border-variables" file="scss/_variables.scss" />
+{/* <ScssDocs name="border-variables" file="scss/_variables.scss" /> */}
Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
-<ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" />
+{/* <ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" />
-<ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" />
+<ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass maps
Border 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-borders" file="scss/_utilities.scss" />
+{/* <ScssDocs name="utils-borders" file="scss/_utilities.scss" /> */}
---
import { getData } from '@libs/data'
+import RefTable from '@components/shortcodes/RefTable.astro'
## Reference
-<BsTable class="table reference-table">
-| Class | Styles |
-| --- | --- |
-| `.color-primary` | `color: var(--bs-primary);` |
-| `.color-secondary` | `color: var(--bs-secondary);` |
-| `.color-success` | `color: var(--bs-success);` |
-| `.color-danger` | `color: var(--bs-danger);` |
-| `.color-warning` | `color: var(--bs-warning);` |
-| `.color-info` | `color: var(--bs-info);` |
-| `.color-fg` | `color: var(--bs-fg);` |
-| `.color-fg-1` | `color: var(--bs-fg-1);` |
-| `.color-fg-2` | `color: var(--bs-fg-2);` |
-| `.color-fg-3` | `color: var(--bs-fg-3);` |
-| `.color-white` | `color: var(--bs-white);` |
-| `.color-black` | `color: var(--bs-black);` |
-| `.color-inherit` | `color: inherit;` |
-</BsTable>
+<RefTable data={[
+ {
+ class: '.color-primary',
+ code: 'color: var(--bs-primary);'
+ },
+ {
+ class: '.color-secondary',
+ code: 'color: var(--bs-secondary);'
+ },
+ {
+ class: '.color-success',
+ code: 'color: var(--bs-success);'
+ },
+ {
+ class: '.color-danger',
+ code: 'color: var(--bs-danger);'
+ },
+ {
+ class: '.color-warning',
+ code: 'color: var(--bs-warning);'
+ },
+ {
+ class: '.color-info',
+ code: 'color: var(--bs-info);'
+ },
+ {
+ class: '.color-fg',
+ code: 'color: var(--bs-fg);'
+ },
+ {
+ class: '.color-fg-1',
+ code: 'color: var(--bs-fg-1);'
+ },
+ {
+ class: '.color-fg-2',
+ code: 'color: var(--bs-fg-2);'
+ },
+ {
+ class: '.color-fg-3',
+ code: 'color: var(--bs-fg-3);'
+ },
+ {
+ class: '.color-white',
+ code: 'color: var(--bs-white);'
+ },
+ {
+ class: '.color-black',
+ code: 'color: var(--bs-black);'
+ },
+ {
+ class: '.color-inherit',
+ code: 'color: inherit;'
+ }
+]} />
## Colors
## Specificity
-Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element
’s content in a `<div>` or more semantic element with the desired class.
+Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element
's content in a `<div>` or more semantic element with the desired class.
## CSS
{/* <ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" /> */}
-Color opacities build on that with their own map that’s consumed by the utilities API:
+Color opacities build on that with their own map that's consumed by the utilities API:
{/* <ScssDocs name="utilities-text-colors" file="scss/_maps.scss" /> */}
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/display
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.d-{breakpoint-}none',
+ code: 'display: none;'
+ },
+ {
+ class: '.d-{breakpoint-}flow-root',
+ code: 'display: flow-root;'
+ },
+ {
+ class: '.d-{breakpoint-}inline',
+ code: 'display: inline;'
+ },
+ {
+ class: '.d-{breakpoint-}inline-block',
+ code: 'display: inline-block;'
+ },
+ {
+ class: '.d-{breakpoint-}grid',
+ code: 'display: grid;'
+ },
+ {
+ class: '.d-{breakpoint-}inline-grid',
+ code: 'display: inline-grid;'
+ },
+ {
+ class: '.d-{breakpoint-}table',
+ code: 'display: table;'
+ },
+ {
+ class: '.d-{breakpoint-}table-cell',
+ code: 'display: table-cell;'
+ },
+ {
+ class: '.d-{breakpoint-}table-row',
+ code: 'display: table-row;'
+ },
+ {
+ class: '.d-{breakpoint-}flex',
+ code: 'display: flex;'
+ },
+ {
+ class: '.d-{breakpoint-}inline-flex',
+ code: 'display: inline-flex;'
+ }
+]} />
+
## How it works
Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
We've removed the clearfix helper class in v6 as it's outdated and no longer needed. Instead, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix hack.
<Example code={`<div class="d-flow-root">
- <div class="float-end px-3 py-2 border rounded-3">Floated element</div>
-</div>`} />
+
<div class="float-end px-3 py-2 border rounded-3">Floated element</div>
+ </div>`} />
## Examples
import { getData } from '@libs/data'
import { getSequence } from '@libs/utils'
+## Reference
+
+<RefTable data={[
+ {
+ type: 'section',
+ title: 'Direction'
+ },
+ {
+ class: '.flex-{breakpoint-}row',
+ code: 'flex-direction: row;'
+ },
+ {
+ class: '.flex-{breakpoint-}row-reverse',
+ code: 'flex-direction: row-reverse;'
+ },
+ {
+ class: '.flex-{breakpoint-}column',
+ code: 'flex-direction: column;'
+ },
+ {
+ class: '.flex-{breakpoint-}column-reverse',
+ code: 'flex-direction: column-reverse;'
+ },
+ {
+ type: 'section',
+ title: 'Justify content'
+ },
+ {
+ class: '.justify-content-{breakpoint-}start',
+ code: 'justify-content: flex-start;'
+ },
+ {
+ class: '.justify-content-{breakpoint-}end',
+ code: 'justify-content: flex-end;'
+ },
+ {
+ class: '.justify-content-{breakpoint-}center',
+ code: 'justify-content: center;'
+ },
+ {
+ class: '.justify-content-{breakpoint-}between',
+ code: 'justify-content: space-between;'
+ },
+ {
+ class: '.justify-content-{breakpoint-}around',
+ code: 'justify-content: space-around;'
+ },
+ {
+ class: '.justify-content-{breakpoint-}evenly',
+ code: 'justify-content: space-evenly;'
+ },
+ {
+ type: 'section',
+ title: 'Align items'
+ },
+ {
+ class: '.align-items-{breakpoint-}start',
+ code: 'align-items: flex-start;'
+ },
+ {
+ class: '.align-items-{breakpoint-}end',
+ code: 'align-items: flex-end;'
+ },
+ {
+ class: '.align-items-{breakpoint-}center',
+ code: 'align-items: center;'
+ },
+ {
+ class: '.align-items-{breakpoint-}baseline',
+ code: 'align-items: baseline;'
+ },
+ {
+ class: '.align-items-{breakpoint-}stretch',
+ code: 'align-items: stretch;'
+ },
+ {
+ type: 'section',
+ title: 'Align self'
+ },
+ {
+ class: '.align-self-{breakpoint-}start',
+ code: 'align-self: flex-start;'
+ },
+ {
+ class: '.align-self-{breakpoint-}end',
+ code: 'align-self: flex-end;'
+ },
+ {
+ class: '.align-self-{breakpoint-}center',
+ code: 'align-self: center;'
+ },
+ {
+ class: '.align-self-{breakpoint-}baseline',
+ code: 'align-self: baseline;'
+ },
+ {
+ class: '.align-self-{breakpoint-}stretch',
+ code: 'align-self: stretch;'
+ },
+ {
+ type: 'section',
+ title: 'Align content'
+ },
+ {
+ class: '.align-content-{breakpoint-}start',
+ code: 'align-content: flex-start;'
+ },
+ {
+ class: '.align-content-{breakpoint-}end',
+ code: 'align-content: flex-end;'
+ },
+ {
+ class: '.align-content-{breakpoint-}center',
+ code: 'align-content: center;'
+ },
+ {
+ class: '.align-content-{breakpoint-}between',
+ code: 'align-content: space-between;'
+ },
+ {
+ class: '.align-content-{breakpoint-}around',
+ code: 'align-content: space-around;'
+ },
+ {
+ class: '.align-content-{breakpoint-}stretch',
+ code: 'align-content: stretch;'
+ },
+ {
+ type: 'section',
+ title: 'Grow, shrink, and wrap'
+ },
+ {
+ class: '.flex-fill',
+ code: 'flex: 1 1 auto;'
+ },
+ {
+ class: '.flex-grow-{breakpoint-}0',
+ code: 'flex-grow: 0;'
+ },
+ {
+ class: '.flex-grow-{breakpoint-}1',
+ code: 'flex-grow: 1;'
+ },
+ {
+ class: '.flex-shrink-{breakpoint-}0',
+ code: 'flex-shrink: 0;'
+ },
+ {
+ class: '.flex-shrink-{breakpoint-}1',
+ code: 'flex-shrink: 1;'
+ },
+ {
+ class: '.flex-nowrap',
+ code: 'flex-wrap: nowrap;'
+ },
+ {
+ class: '.flex-wrap',
+ code: 'flex-wrap: wrap;'
+ },
+ {
+ class: '.flex-wrap-reverse',
+ code: 'flex-wrap: wrap-reverse;'
+ },
+ {
+ type: 'section',
+ title: 'Order'
+ },
+ {
+ class: '.order-{breakpoint-}{number}',
+ code: 'order: {number};'
+ },
+ {
+ class: '.order-{breakpoint-}first',
+ code: 'order: -1;'
+ },
+ {
+ class: '.order-{breakpoint-}last',
+ code: 'order: 100;'
+ }
+]} />
+
<Callout type="info" title="Flexbox">
**Need some quick flexbox layouts?** Consider using [our Stacks helpers]([[docsref:/helpers/stacks]]) that combine common flexbox properties for quick layouts.
</Callout>
<Example class="bd-example-flex" code={`<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>`} />
-Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <Fragment>
- <li><code>.d{breakpoint.abbr}-flex</code></li>
- <li><code>.d{breakpoint.abbr}-inline-flex</code></li>
- </Fragment>
- )
-})}
-</ul>
-
## Direction
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
<div class="p-2">Flex item 3</div>
</div>`} />
-Responsive variations also exist for `flex-direction`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <Fragment>
- <li><code>.flex{breakpoint.abbr}-row</code></li>
- <li><code>.flex{breakpoint.abbr}-row-reverse</code></li>
- <li><code>.flex{breakpoint.abbr}-column</code></li>
- <li><code>.flex{breakpoint.abbr}-column-reverse</code></li>
- </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="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="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="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>
-
## Fill
Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
<div class="p-2 flex-fill">Flex item</div>
</div>`} />
-Responsive variations also exist for `flex-fill`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <li><code>.flex{breakpoint.abbr}-fill</code></li>
- )
-})}
-</ul>
-
## 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.
<div class="p-2 flex-shrink-1">Flex item</div>
</div>`} />
-Responsive variations also exist for `flex-grow` and `flex-shrink`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <Fragment>
- <li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-0</code></li>
- <li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-1</code></li>
- </Fragment>
- )
-})}
-</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`).
</div>
```
-Responsive variations also exist for `flex-wrap`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <Fragment>
- <li><code>.flex{breakpoint.abbr}-nowrap</code></li>
- <li><code>.flex{breakpoint.abbr}-wrap</code></li>
- <li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>
- </Fragment>
- )
-})}
-</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.
<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>
<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>
-
## 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.
import { getData } from '@libs/data'
+## Reference
+
+<RefTable data={[
+ {
+ class: '.float-{breakpoint-}start',
+ code: 'float: left;'
+ },
+ {
+ class: '.float-{breakpoint-}end',
+ code: 'float: right;'
+ },
+ {
+ class: '.float-{breakpoint-}none',
+ code: 'float: none;'
+ }
+]} />
+
## Overview
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>`} />
-Here are all the support classes:
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
- return (
- <Fragment>
- <li><code>.float{breakpoint.abbr}-start</code></li>
- <li><code>.float{breakpoint.abbr}-end</code></li>
- <li><code>.float{breakpoint.abbr}-none</code></li>
- </Fragment>
- )
-})}
-</ul>
-
## CSS
### Sass utilities API
toc: false
---
+## Reference
+
+<RefTable data={[
+ {
+ type: 'section',
+ title: 'Text selection'
+ },
+ {
+ class: '.user-select-all',
+ code: 'user-select: all;'
+ },
+ {
+ class: '.user-select-auto',
+ code: 'user-select: auto;'
+ },
+ {
+ class: '.user-select-none',
+ code: 'user-select: none;'
+ },
+ {
+ type: 'section',
+ title: 'Pointer events'
+ },
+ {
+ class: '.pe-none',
+ code: 'pointer-events: none;'
+ },
+ {
+ class: '.pe-auto',
+ code: 'pointer-events: auto;'
+ }
+]} />
+
## Text selection
Change the way in which the content is selected when the user interacts with it.
import { getData } from '@libs/data'
+## Reference
+
+<RefTable data={[
+ {
+ type: 'section',
+ title: 'Link opacity'
+ },
+ {
+ class: '.link-opacity-10{-hover}',
+ code: 'opacity: 0.1;'
+ },
+ {
+ class: '.link-opacity-25{-hover}',
+ code: 'opacity: 0.25;'
+ },
+ {
+ class: '.link-opacity-50{-hover}',
+ code: 'opacity: 0.5;'
+ },
+ {
+ class: '.link-opacity-75{-hover}',
+ code: 'opacity: 0.75;'
+ },
+ {
+ class: '.link-opacity-100{-hover}',
+ code: 'opacity: 1;'
+ },
+ {
+ type: 'section',
+ title: 'Link underlines'
+ },
+ {
+ class: '.link-underline-{color}',
+ code: 'text-decoration-color: {color};'
+ },
+ {
+ class: '.link-offset-{number}',
+ code: 'text-underline-offset: {number};'
+ }
+]} />
+
+
## Link opacity
Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color’s opacity can lead to links with [*insufficient* contrast]([[docsref:getting-started/accessibility/#color-contrast]]).
[Colored link helpers]([[docsref:/helpers/colored-links/]]) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
<Example code={[
- ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} link</a></p>`),
- `<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>`
+ ...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} link</a></p>`)
]} />
<Callout name="warning-color-assistive-technologies" />
version: "5.3"
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.object-fit-{breakpoint-}contain',
+ code: 'object-fit: contain;'
+ },
+ {
+ class: '.object-fit-{breakpoint-}cover',
+ code: 'object-fit: cover;'
+ },
+ {
+ class: '.object-fit-{breakpoint-}fill',
+ code: 'object-fit: fill;'
+ },
+ {
+ class: '.object-fit-{breakpoint-}scale',
+ code: 'object-fit: scale;'
+ },
+ {
+ class: '.object-fit-{breakpoint-}none',
+ code: 'object-fit: none;'
+ }
+]} />
+
## How it works
Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
version: "5.1"
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.opacity-0',
+ code: 'opacity: 0;'
+ },
+ {
+ class: '.opacity-25',
+ code: 'opacity: 0.25;'
+ },
+ {
+ class: '.opacity-50',
+ code: 'opacity: 0.5;'
+ },
+ {
+ class: '.opacity-75',
+ code: 'opacity: 0.75;'
+ },
+ {
+ class: '.opacity-100',
+ code: 'opacity: 1;'
+ }
+]} />
+
The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
Set the `opacity` of an element using `.opacity-{value}` utilities.
toc: true
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.overflow-auto',
+ code: 'overflow: auto;'
+ },
+ {
+ class: '.overflow-hidden',
+ code: 'overflow: hidden;'
+ },
+ {
+ class: '.overflow-visible',
+ code: 'overflow: visible;'
+ },
+ {
+ class: '.overflow-scroll',
+ code: 'overflow: scroll;'
+ },
+ {
+ class: '.overflow-x-auto',
+ code: 'overflow-x: auto;'
+ },
+ {
+ class: '.overflow-x-hidden',
+ code: 'overflow-x: hidden;'
+ },
+ {
+ class: '.overflow-x-visible',
+ code: 'overflow-x: visible;'
+ },
+ {
+ class: '.overflow-y-auto',
+ code: 'overflow-y: auto;'
+ },
+ {
+ class: '.overflow-y-hidden',
+ code: 'overflow-y: hidden;'
+ },
+ {
+ class: '.overflow-y-visible',
+ code: 'overflow-y: visible;'
+ },
+ {
+ class: '.overflow-y-scroll',
+ code: 'overflow-y: scroll;'
+ }
+]} />
+
## Overflow
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
toc: true
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.position-static',
+ code: 'position: static;'
+ },
+ {
+ class: '.position-relative',
+ code: 'position: relative;'
+ },
+ {
+ class: '.position-absolute',
+ code: 'position: absolute;'
+ },
+ {
+ class: '.position-fixed',
+ code: 'position: fixed;'
+ },
+ {
+ class: '.position-sticky',
+ code: 'position: sticky;'
+ },
+ {
+ class: '.top-{value}',
+ code: 'top: {value};'
+ },
+ {
+ class: '.start-{value}',
+ code: 'left: {value};'
+ },
+ {
+ class: '.end-{value}',
+ code: 'right: {value};'
+ },
+ {
+ class: '.bottom-{value}',
+ code: 'bottom: {value};'
+ }
+]} />
+
## Position values
Quick positioning classes are available, though they are not responsive.
toc: true
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.shadow-none',
+ code: 'box-shadow: none;'
+ },
+ {
+ class: '.shadow-sm',
+ code: `box-shadow: var(--bs-box-shadow-sm); /* 0 .125rem .25rem rgb(0 0 0 / .075) */`
+ },
+ {
+ class: '.shadow',
+ code: `box-shadow: var(--bs-box-shadow); /* 0 .5rem 1rem rgb(0 0 0 / 15%) */`
+ },
+ {
+ class: '.shadow-lg',
+ code: `box-shadow: var(--bs-box-shadow-lg); /* 0 1rem 3rem rgb(0 0 0 / .175) */`
+ },
+]} />
+
## Examples
While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
-<Example class="overflow-hidden" code={`<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>`} />
+<Example class="overflow-hidden" code={`<div class="shadow-none p-3 mb-5 bg-2 rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-2 rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-2 rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-2 rounded">Larger shadow</div>`} />
## CSS
+### CSS variables
+
+Shadow utilities are defined first in `:root` CSS variables.
+
+<ScssDocs name="root-shadow-vars" file="scss/_root.scss" />
+
### Sass variables
+Sass then consumes these variables to be used by our utility API.
+
<ScssDocs name="box-shadow-variables" file="scss/_variables.scss" />
### Sass utilities API
toc: true
---
+## Reference
+
+<RefTable data={[
+ {
+ type: 'section',
+ title: 'Width'
+ },
+ {
+ class: '.w-25',
+ code: 'width: 25%;'
+ },
+ {
+ class: '.w-50',
+ code: 'width: 50%;'
+ },
+ {
+ class: '.w-75',
+ code: 'width: 75%;'
+ },
+ {
+ class: '.w-100',
+ code: 'width: 100%;'
+ },
+ {
+ class: '.w-auto',
+ code: 'width: auto;'
+ },
+ {
+ class: '.w-min',
+ code: 'width: min-content;'
+ },
+ {
+ class: '.w-max',
+ code: 'width: max-content;'
+ },
+ {
+ class: '.w-fit',
+ code: 'width: fit-content;'
+ },
+ {
+ class: '.mw-100',
+ code: 'max-width: 100%;'
+ },
+ {
+ class: '.min-w-0',
+ code: 'min-width: 0;'
+ },
+ {
+ class: '.min-w-100',
+ code: 'min-width: 100%;'
+ },
+ {
+ type: 'section',
+ title: 'Height'
+ },
+ {
+ class: '.h-25',
+ code: 'height: 25%;'
+ },
+ {
+ class: '.h-50',
+ code: 'height: 50%;'
+ },
+ {
+ class: '.h-75',
+ code: 'height: 75%;'
+ },
+ {
+ class: '.h-100',
+ code: 'height: 100%;'
+ },
+ {
+ class: '.h-auto',
+ code: 'height: auto;'
+ },
+ {
+ class: '.h-min',
+ code: 'height: min-content;'
+ },
+ {
+ class: '.h-max',
+ code: 'height: max-content;'
+ },
+ {
+ class: '.h-fit',
+ code: 'height: fit-content;'
+ },
+ {
+ class: '.mh-100',
+ code: 'max-height: 100%;'
+ },
+ {
+ class: '.min-h-0',
+ code: 'min-height: 0;'
+ },
+ {
+ class: '.min-h-100',
+ code: 'min-height: 100%;'
+ },
+ {
+ type: 'section',
+ title: 'Viewport'
+ },
+ {
+ class: '.vw-{100',
+ code: 'width: 100vw;'
+ },
+ {
+ class: '.vh-{100',
+ code: 'height: 100vh;'
+ },
+ {
+ class: '.min-vw-{100',
+ code: 'min-width: 100vw;'
+ },
+ {
+ class: '.min-vh-{100',
+ code: 'min-height: 100vh;'
+ },
+]} />
+
## Relative to the parent
Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
toc: true
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.text-{breakpoint-}start',
+ code: 'text-align: start;'
+ },
+ {
+ class: '.text-{breakpoint-}end',
+ code: 'text-align: end;'
+ },
+
+ {
+ class: '.text-{breakpoint-}center',
+ code: 'text-align: center;'
+ },
+ {
+ class: '.text-wrap',
+ code: 'white-space: normal;'
+ },
+ {
+ class: '.text-nowrap',
+ code: 'white-space: nowrap;'
+ },
+ {
+ class: '.text-break',
+ code: 'word-wrap: break-word;'
+ },
+ {
+ class: '.text-lowercase',
+ code: 'text-transform: lowercase;'
+ },
+ {
+ class: '.text-uppercase',
+ code: 'text-transform: uppercase;'
+ },
+ {
+ class: '.text-capitalize',
+ code: 'text-transform: capitalize;'
+ },
+ {
+ class: '.text-decoration-underline',
+ code: 'text-decoration: underline;'
+ },
+ {
+ class: '.text-decoration-line-through',
+ code: 'text-decoration: line-through;'
+ },
+ {
+ class: '.text-decoration-none',
+ code: 'text-decoration: none;'
+ },
+ {
+ class: '.text-reset',
+ code: 'color: inherit;'
+ },
+ {
+ class: '.fs-{breakpoint-}1',
+ code: 'font-size: ####'
+ },
+ {
+ class: '.fs-{breakpoint-}2',
+ code: 'font-size: ####'
+ },
+ {
+ class: '.fs-{breakpoint-}3',
+ code: 'font-size: ####'
+ },
+ {
+ class: '.fs-{breakpoint-}4',
+ code: 'font-size: ####'
+ },
+ {
+ class: '.fs-{breakpoint-}5',
+ code: 'font-size: ####'
+ },
+ {
+ class: '.fs-{breakpoint-}6',
+ code: 'font-size: ####'
+ },
+ {
+ class: '.fw-{breakpoint}-bold',
+ code: 'font-weight: bold;'
+ },
+ {
+ class: '.fw-{breakpoint}-bolder',
+ code: 'font-weight: bolder;'
+ },
+ {
+ class: '.fw-{breakpoint}-semibold',
+ code: 'font-weight: 600;'
+ },
+ {
+ class: '.fw-{breakpoint}-medium',
+ code: 'font-weight: 500;'
+ },
+ {
+ class: '.fw-{breakpoint}-normal',
+ code: 'font-weight: normal;'
+ },
+ {
+ class: '.fw-{breakpoint}-light',
+ code: 'font-weight: light;'
+ },
+ {
+ class: '.fw-{breakpoint}-lighter',
+ code: 'font-weight: lighter;'
+ },
+ {
+ class: '.fst-{breakpoint}-italic',
+ code: 'font-style: italic;'
+ },
+ {
+ class: '.fst-{breakpoint}-normal',
+ code: 'font-style: normal;'
+ },
+ {
+ class: '.lh-{breakpoint}-1',
+ code: 'line-height: 1;'
+ },
+ {
+ class: '.lh-{breakpoint}-sm',
+ code: 'line-height: 1.25;'
+ },
+ {
+ class: '.lh-{breakpoint}-base',
+ code: 'line-height: 1.5;'
+ },
+ {
+ class: '.lh-{breakpoint}-lg',
+ code: 'line-height: 2;'
+ },
+ {
+ class: '.font-monospace',
+ code: 'font-family: var(--bs-font-monospace);'
+ },
+]} />
+
## Text alignment
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.
description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.align-baseline',
+ code: 'vertical-align: baseline;'
+ },
+ {
+ class: '.align-top',
+ code: 'vertical-align: top;'
+ },
+ {
+ class: '.align-middle',
+ code: 'vertical-align: middle;'
+ },
+ {
+ class: '.align-bottom',
+ code: 'vertical-align: bottom;'
+ },
+ {
+ class: '.align-text-top',
+ code: 'vertical-align: text-top;'
+ },
+ {
+ class: '.align-text-bottom',
+ code: 'vertical-align: text-bottom;'
+ }
+]} />
+
Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
description: Control the visibility of elements, without modifying their display, with visibility utilities.
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.visible',
+ code: 'visibility: visible;'
+ },
+ {
+ class: '.invisible',
+ code: 'visibility: hidden;'
+ },
+]} />
+
Set the `visibility` of elements with our visibility utilities. These utility classes do not modify the `display` value at all and do not affect layout – `.invisible` elements still take up space in the page.
<Callout type="warning">
```scss
// Class
.visible {
- visibility: visible !important;
+ visibility: visible;
}
.invisible {
- visibility: hidden !important;
+ visibility: hidden;
}
```
version: "5.3"
---
+## Reference
+
+<RefTable data={[
+ {
+ class: '.z-n1',
+ code: 'z-index: -1;'
+ },
+ {
+ class: '.z-0',
+ code: 'z-index: 0;'
+ },
+ {
+ class: '.z-1',
+ code: 'z-index: 1;'
+ },
+ {
+ class: '.z-2',
+ code: 'z-index: 2;'
+ },
+ {
+ class: '.z-3',
+ code: 'z-index: 3;'
+ },
+]} />
+
## Example
Use `z-index` utilities to stack elements on top of one another. Requires a `position` value other than `static`, which can be set with custom styles or using our [position utilities]([[docsref:/utilities/position/]]).
export const JsDismiss: typeof import('@shortcodes/JsDismiss.astro').default
export const JsDocs: typeof import('@shortcodes/JsDocs.astro').default
export const Placeholder: typeof import('@shortcodes/Placeholder.astro').default
+ export const RefTable: typeof import('@shortcodes/RefTable.astro').default
export const ScssDocs: typeof import('@shortcodes/ScssDocs.astro').default
export const Table: typeof import('@shortcodes/Table.astro').default
}
projects / thirdparty / bootstrap.git / commitdiff
