+++ /dev/null
-{
- "root": true,
- "extends": [
- "plugin:import/errors",
- "plugin:import/warnings",
- "plugin:unicorn/recommended",
- "xo",
- "xo/browser"
- ],
- "rules": {
- "arrow-body-style": "off",
- "capitalized-comments": "off",
- "comma-dangle": [
- "error",
- "never"
- ],
- "import/extensions": [
- "error",
- "ignorePackages",
- {
- "js": "always"
- }
- ],
- "import/first": "error",
- "import/newline-after-import": "error",
- "import/no-absolute-path": "error",
- "import/no-amd": "error",
- "import/no-cycle": [
- "error",
- {
- "ignoreExternal": true
- }
- ],
- "import/no-duplicates": "error",
- "import/no-extraneous-dependencies": "error",
- "import/no-mutable-exports": "error",
- "import/no-named-as-default": "error",
- "import/no-named-as-default-member": "error",
- "import/no-named-default": "error",
- "import/no-self-import": "error",
- "import/no-unassigned-import": [
- "error"
- ],
- "import/no-useless-path-segments": "error",
- "import/order": "error",
- "indent": [
- "error",
- 2,
- {
- "MemberExpression": "off",
- "SwitchCase": 1
- }
- ],
- "logical-assignment-operators": "off",
- "max-params": [
- "warn",
- 5
- ],
- "multiline-ternary": [
- "error",
- "always-multiline"
- ],
- "new-cap": [
- "error",
- {
- "properties": false
- }
- ],
- "no-console": "error",
- "no-negated-condition": "off",
- "object-curly-spacing": [
- "error",
- "always"
- ],
- "operator-linebreak": [
- "error",
- "after"
- ],
- "prefer-object-has-own": "off",
- "prefer-template": "error",
- "semi": [
- "error",
- "never"
- ],
- "strict": "error",
- "unicorn/explicit-length-check": "off",
- "unicorn/filename-case": "off",
- "unicorn/no-anonymous-default-export": "off",
- "unicorn/no-array-callback-reference": "off",
- "unicorn/no-array-method-this-argument": "off",
- "unicorn/no-null": "off",
- "unicorn/no-typeof-undefined": "off",
- "unicorn/no-unused-properties": "error",
- "unicorn/numeric-separators-style": "off",
- "unicorn/prefer-array-flat": "off",
- "unicorn/prefer-at": "off",
- "unicorn/prefer-dom-node-dataset": "off",
- "unicorn/prefer-global-this": "off",
- "unicorn/prefer-module": "off",
- "unicorn/prefer-query-selector": "off",
- "unicorn/prefer-spread": "off",
- "unicorn/prefer-string-raw": "off",
- "unicorn/prefer-string-replace-all": "off",
- "unicorn/prefer-structured-clone": "off",
- "unicorn/prevent-abbreviations": "off"
- },
- "overrides": [
- {
- "files": [
- "build/**"
- ],
- "env": {
- "browser": false,
- "node": true
- },
- "parserOptions": {
- "sourceType": "module"
- },
- "rules": {
- "no-console": "off",
- "unicorn/prefer-top-level-await": "off"
- }
- },
- {
- "files": [
- "js/**"
- ],
- "parserOptions": {
- "sourceType": "module"
- }
- },
- {
- "files": [
- "js/tests/*.js",
- "js/tests/integration/rollup*.js"
- ],
- "env": {
- "node": true
- },
- "parserOptions": {
- "sourceType": "script"
- }
- },
- {
- "files": [
- "js/tests/unit/**"
- ],
- "env": {
- "jasmine": true
- },
- "rules": {
- "no-console": "off",
- "unicorn/consistent-function-scoping": "off",
- "unicorn/no-useless-undefined": "off",
- "unicorn/prefer-add-event-listener": "off"
- }
- },
- {
- "files": [
- "js/tests/visual/**"
- ],
- "plugins": [
- "html"
- ],
- "settings": {
- "html/html-extensions": [
- ".html"
- ]
- },
- "rules": {
- "no-console": "off",
- "no-new": "off",
- "unicorn/no-array-for-each": "off"
- }
- },
- {
- "files": [
- "scss/tests/**"
- ],
- "env": {
- "node": true
- },
- "parserOptions": {
- "sourceType": "script"
- }
- },
- {
- "files": [
- "site/**"
- ],
- "env": {
- "browser": true,
- "node": false
- },
- "parserOptions": {
- "sourceType": "script",
- "ecmaVersion": 2019
- },
- "rules": {
- "no-new": "off",
- "unicorn/no-array-for-each": "off"
- }
- },
- {
- "files": [
- "site/src/assets/application.js",
- "site/src/assets/partials/*.js",
- "site/src/assets/search.js",
- "site/src/assets/snippets.js",
- "site/src/assets/stackblitz.js",
- "site/src/plugins/*.js"
- ],
- "parserOptions": {
- "sourceType": "module",
- "ecmaVersion": 2020
- }
- },
- {
- "files": [
- "site/src/assets/examples/cheatsheet/cheatsheet.js",
- "site/src/assets/examples/sidebars/sidebars.js"
- ],
- "parserOptions": {
- "sourceType": "module",
- "ecmaVersion": 2020
- },
- "rules": {
- "import/no-unresolved": "off"
- }
- },
- {
- "files": [
- "**/*.md"
- ],
- "plugins": [
- "markdown"
- ],
- "processor": "markdown/markdown"
- },
- {
- "files": [
- "**/*.md/*.js",
- "**/*.md/*.mjs"
- ],
- "extends": "plugin:markdown/recommended-legacy",
- "parserOptions": {
- "sourceType": "module"
- },
- "rules": {
- "unicorn/prefer-node-protocol": "off"
- }
- }
- ]
-}
'unicorn/no-unused-properties': 'error',
'unicorn/numeric-separators-style': 'off',
'unicorn/prefer-array-flat': 'off',
- 'unicorn/prefer-at': 'off',
+ 'unicorn/prefer-at': 'error',
'unicorn/prefer-dom-node-dataset': 'off',
'unicorn/prefer-global-this': 'off',
'unicorn/prefer-module': 'off',
'unicorn/prefer-query-selector': 'off',
- 'unicorn/prefer-spread': 'off',
+ 'unicorn/prefer-spread': 'error',
'unicorn/prefer-string-raw': 'off',
'unicorn/prefer-string-replace-all': 'off',
'unicorn/prefer-structured-clone': 'off',
}
},
- // site/** — browser, script mode, older ecmaVersion
+ // site/** — browser, script mode
{
files: ['site/**'],
languageOptions: {
globals: {
...globals.browser
},
- sourceType: 'script',
- parserOptions: {
- ecmaVersion: 2019
- }
+ sourceType: 'script'
},
rules: {
'no-new': 'off',
'site/src/plugins/*.js'
],
languageOptions: {
- sourceType: 'module',
- parserOptions: {
- ecmaVersion: 2020
- }
+ sourceType: 'module'
},
// These files may have eslint-disable directives for the old import plugin
linterOptions: {
'site/src/assets/examples/sidebars/sidebars.js'
],
languageOptions: {
- sourceType: 'module',
- parserOptions: {
- ecmaVersion: 2020
- }
+ sourceType: 'module'
},
rules: {
'import/no-unresolved': 'off'
const items = this._getVisibleItems()
if (items.length > 0) {
- const target = key === ARROW_DOWN_KEY ? items[0] : items[items.length - 1]
+ const target = key === ARROW_DOWN_KEY ? items[0] : items.at(-1)
target.focus()
}
event.preventDefault()
const items = this._getVisibleItems()
if (items.length > 0) {
- const targetItem = key === HOME_KEY ? items[0] : items[items.length - 1]
+ const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
targetItem.focus()
}
// can be removed later when multiple key/instances are fine to be used
if (!instanceMap.has(key) && instanceMap.size !== 0) {
// eslint-disable-next-line no-console
- console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`)
+ console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${[...instanceMap.keys()][0]}.`)
return
}
const SelectorEngine = {
find(selector, element = document.documentElement) {
- return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
+ return [...Element.prototype.querySelectorAll.call(element, selector)]
},
findOne(selector, element = document.documentElement) {
},
children(element, selector) {
- return [].concat(...element.children).filter(child => child.matches(selector))
+ return [...element.children].filter(child => child.matches(selector))
},
parents(element, selector) {
this._createFloating()
if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
- for (const element of [].concat(...document.body.children)) {
+ for (const element of document.body.children) {
EventHandler.on(element, 'mouseover', noop)
}
}
this._closeAllSubmenus()
if ('ontouchstart' in document.documentElement) {
- for (const element of [].concat(...document.body.children)) {
+ for (const element of document.body.children) {
EventHandler.off(element, 'mouseover', noop)
}
}
.filter(element => isVisible(element))
if (items.length) {
- const targetItem = key === HOME_KEY ? items[0] : items[items.length - 1]
+ const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
targetItem.focus()
}
}
setValue(value) {
- const chars = String(value).split('')
+ const chars = [...String(value)]
for (const [index, input] of this._inputs.entries()) {
input.value = chars[index] || ''
}
// Handle multi-character input (some browsers/autofill)
if (value.length > 1) {
// Distribute characters across inputs
- const chars = value.split('')
+ const chars = [...value]
input.value = chars[0] || ''
for (let i = 1; i < chars.length && index + i < this._inputs.length; i++) {
let nextActiveElement
if ([HOME_KEY, END_KEY].includes(event.key)) {
- nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
+ nextActiveElement = event.key === HOME_KEY ? children[0] : children.at(-1)
} else {
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
// only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if ('ontouchstart' in document.documentElement) {
- for (const element of [].concat(...document.body.children)) {
+ for (const element of document.body.children) {
EventHandler.on(element, 'mouseover', noop)
}
}
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
- for (const element of [].concat(...document.body.children)) {
+ for (const element of document.body.children) {
EventHandler.off(element, 'mouseover', noop)
}
}
if (elements.length === 0) {
trapElement.focus()
} else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
- elements[elements.length - 1].focus()
+ elements.at(-1).focus()
} else {
elements[0].focus()
}
const domParser = new window.DOMParser()
const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
- const elements = [].concat(...createdDocument.body.querySelectorAll('*'))
+ const elements = [...createdDocument.body.querySelectorAll('*')]
for (const element of elements) {
const elementName = element.nodeName.toLowerCase()
continue
}
- const attributeList = [].concat(...element.attributes)
- const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || [])
+ const attributeList = [...element.attributes]
+ const allowedAttributes = [...(allowList['*'] || []), ...(allowList[elementName] || [])]
for (const attribute of attributeList) {
if (!allowedAttribute(attribute, allowedAttributes)) {
import '../../dist/carousel.js' // eslint-disable-line import/no-unassigned-import
window.addEventListener('load', () => {
- [].concat(...document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+ [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.map(tooltipNode => new Tooltip(tooltipNode))
})
import { Tooltip } from '../../../dist/js/bootstrap.js'
window.addEventListener('load', () => {
- [].concat(...document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+ [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.map(tooltipNode => new Tooltip(tooltipNode))
})
const collapseEl1 = fixtureEl.querySelector('#collapse1')
const collapseEl2 = fixtureEl.querySelector('#collapse2')
- const collapseList = [].concat(...fixtureEl.querySelectorAll('.collapse'))
+ const collapseList = [...fixtureEl.querySelectorAll('.collapse')]
.map(el => new Collapse(el, {
parent,
toggle: false
].join('')
const list = fixtureEl.querySelector('ul')
- const liList = [].concat(...fixtureEl.querySelectorAll('li'))
+ const liList = [...fixtureEl.querySelectorAll('li')]
const result = SelectorEngine.children(list, 'li')
expect(result).toEqual(liList)
const testEl = fixtureEl.querySelector('#test')
- expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+ expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
})
it('should get elements if several ids are given', () => {
const testEl = fixtureEl.querySelector('#test')
- expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+ expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
})
it('should get elements if several ids with special chars are given', () => {
const testEl = fixtureEl.querySelector('#test')
- expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+ expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
})
it('should get elements in array, from href if no data-bs-target set', () => {
const testEl = fixtureEl.querySelector('#test')
- expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+ expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual([...fixtureEl.querySelectorAll('.target')])
})
it('should return empty array if elements not found', () => {
</head>
<body>
<div class="container py-5">
- <h1>Datepicker <small class="text-body-secondary">Bootstrap Visual Test</small></h1>
+ <h1>Datepicker <small class="fg-2">Bootstrap Visual Test</small></h1>
<hr>
<button type="button" class="btn-solid theme-secondary btn-sm" id="hideBtn">Hide</button>
<button type="button" class="btn-solid theme-info btn-sm" id="getDatesBtn">Get Dates</button>
</div>
- <div id="selectedDatesOutput" class="mt-2 text-body-secondary"></div>
+ <div id="selectedDatesOutput" class="mt-2 fg-2"></div>
</div>
</div>
</head>
<body>
<div class="container py-4">
- <h1 class="mb-4">Menu Submenus <small class="text-body-secondary">Bootstrap Visual Test</small></h1>
+ <h1 class="mb-4">Menu Submenus <small class="fg-2">Bootstrap Visual Test</small></h1>
<div class="alert theme-info">
<strong>Keyboard Navigation:</strong>
<!-- Basic Submenu -->
<section class="test-section">
<h2>Basic Submenu</h2>
- <p class="text-body-secondary">Single level submenu with hover and click activation.</p>
+ <p class="fg-2">Single level submenu with hover and click activation.</p>
<div class="demo-box">
<div>
<!-- Nested Submenus -->
<section class="test-section">
<h2>Nested Submenus (Multi-level)</h2>
- <p class="text-body-secondary">Three levels of nested submenus.</p>
+ <p class="fg-2">Three levels of nested submenus.</p>
<div class="demo-box">
<div>
<!-- Multiple Submenus -->
<section class="test-section">
<h2>Multiple Submenus at Same Level</h2>
- <p class="text-body-secondary">Multiple submenu triggers in the same menu - opening one closes the other.</p>
+ <p class="fg-2">Multiple submenu triggers in the same menu - opening one closes the other.</p>
<div class="demo-box">
<div>
<!-- Viewport Flipping Test -->
<section class="test-section">
<h2>Viewport Detection (Flipping)</h2>
- <p class="text-body-secondary">Submenus flip to the opposite side when there's not enough space. Try the one on the right.</p>
+ <p class="fg-2">Submenus flip to the opposite side when there's not enough space. Try the one on the right.</p>
<div class="demo-box" style="justify-content: space-between;">
<div>
<!-- Navbar Integration -->
<section class="test-section">
<h2>Navbar Integration</h2>
- <p class="text-body-secondary">Submenus work within navbar menus.</p>
+ <p class="fg-2">Submenus work within navbar menus.</p>
<nav class="navbar lg:navbar-expand bg-body-tertiary rounded">
<div class="container-fluid">
<!-- Dropup with Submenus -->
<section class="test-section">
<h2>Dropup with Submenus</h2>
- <p class="text-body-secondary">Submenus work with dropup direction.</p>
+ <p class="fg-2">Submenus work with dropup direction.</p>
<div class="demo-box demo-box-center" style="min-height: 200px;">
<div class="btn-group dropup">
<!-- With Icons -->
<section class="test-section">
<h2>With Icons</h2>
- <p class="text-body-secondary">Submenus with icons in menu items.</p>
+ <p class="fg-2">Submenus with icons in menu items.</p>
<div class="demo-box">
<div>
<!-- Mobile Test -->
<section class="test-section">
<h2>Mobile Mode</h2>
- <p class="text-body-secondary">
+ <p class="fg-2">
Resize your browser to <768px width to see slide-over behavior.
On mobile, submenus slide in from the side with a back button.
</p>
<!-- Disabled Items -->
<section class="test-section">
<h2>With Disabled Items</h2>
- <p class="text-body-secondary">Keyboard navigation skips disabled items.</p>
+ <p class="fg-2">Keyboard navigation skips disabled items.</p>
<div class="demo-box">
<div>
<div class="toast-header">
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">2 seconds ago</small>
+ <small class="fg-2">2 seconds ago</small>
<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<div class="container">
<h1>Tooltip <small>Bootstrap Visual Test</small></h1>
- <p class="
text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">freegan cred</a> raw denim single-origin coffee viral.</p>
+ <p class="
fg-2">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">freegan cred</a> raw denim single-origin coffee viral.</p>
<hr>
// stylelint-disable-next-line scss/dollar-variable-default
$alert-tokens: defaults(
(
- --alert-gap: #{$spacer * .75},
+ --alert-gap: var(--spacer-3),
--alert-bg: var(--theme-bg-subtle, var(--bg-1)),
- --alert-padding-x: #{$spacer},
- --alert-padding-y: #{$spacer},
+ --alert-padding-x: var(--spacer),
+ --alert-padding-y: var(--spacer),
--alert-color: var(--theme-fg, inherit),
--alert-border-color: var(--theme-border, var(--border-color)),
--alert-border: var(--border-width) solid var(--alert-border-color),
// stylelint-disable-next-line scss/dollar-variable-default
$card-tokens: defaults(
(
- --card-spacer-y: #{$spacer},
- --card-spacer-x: #{$spacer},
+ --card-spacer-y: var(--spacer-5),
+ --card-spacer-x: var(--spacer-5),
--card-subtitle-color: inherit,
--card-border-width: var(--border-width),
--card-border-color: var(--border-color-translucent),
--card-border-radius: var(--border-radius-lg),
--card-box-shadow: none,
--card-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
- --card-cap-padding-y: #{$spacer * .75},
- --card-cap-padding-x: #{$spacer},
+ --card-cap-padding-y: var(--spacer-3),
+ --card-cap-padding-x: var(--spacer),
--card-cap-bg: var(--bg-1),
--card-cap-color: inherit,
--card-height: auto,
--card-color: inherit,
--card-bg: var(--bg-body),
- --card-img-overlay-padding: #{$spacer},
+ --card-img-overlay-padding: var(--card-spacer-y),
--card-group-margin: #{$grid-gutter-x * .5},
- --card-body-gap: #{$spacer * .5},
+ --card-body-gap: calc(var(--card-spacer-y) * .5),
),
$card-tokens
);
@include border-end-radius(0);
> .card-img-top,
- > .card-header {
+ > .card-header,
+ > .card-body {
border-start-end-radius: 0;
}
> .card-img-bottom,
- > .card-footer {
+ > .card-footer,
+ > .card-body {
border-end-end-radius: 0;
}
}
@include border-start-radius(0);
> .card-img-top,
- > .card-header {
+ > .card-header,
+ > .card-body {
border-start-start-radius: 0;
}
> .card-img-bottom,
- > .card-footer {
+ > .card-footer,
+ > .card-body {
border-end-start-radius: 0;
}
}
// scss-docs-end font-sizes
// scss-docs-start headings-variables
-$headings-margin-bottom: $spacer * .5 !default;
+$headings-margin-bottom: var(--spacer-2) !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
--list-group-border-color: var(--border-color),
--list-group-border-width: var(--border-width),
--list-group-border-radius: var(--border-radius),
- --list-group-item-padding-x: #{$spacer},
- --list-group-item-padding-y: #{$spacer * .5},
+ --list-group-item-padding-x: var(--spacer),
+ --list-group-item-padding-y: var(--spacer-2),
--list-group-action-color: var(--fg-2),
--list-group-action-hover-color: var(--fg-1),
--list-group-action-hover-bg: var(--bg-1),
--popover-border-radius: var(--border-radius-lg),
--popover-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
--popover-box-shadow: var(--box-shadow),
- --popover-header-padding-x: #{$spacer},
- --popover-header-padding-y: #{$spacer * .75},
+ --popover-header-padding-x: var(--spacer),
+ --popover-header-padding-y: var(--spacer-3),
--popover-header-font-size: var(--font-size-sm),
--popover-header-color: #{$headings-color},
--popover-header-bg: var(--bg-1),
- --popover-body-padding-x: #{$spacer},
- --popover-body-padding-y: #{$spacer * .75},
+ --popover-body-padding-x: var(--spacer),
+ --popover-body-padding-y: var(--spacer-3),
--popover-body-color: var(--fg-body),
--popover-arrow-width: 1rem,
--popover-arrow-height: .5rem,
$root-tokens: map.set($root-tokens, --breakpoint-#{$name}, $value);
}
+// Generate spacer tokens
+@each $key, $value in $spacers {
+ $root-tokens: map.set($root-tokens, --spacer-#{$key}, $value);
+}
+
:root {
@include tokens($root-tokens);
(
--tooltip-zindex: #{$zindex-tooltip},
--tooltip-max-width: 200px,
- --tooltip-padding-x: #{$spacer * .75},
- --tooltip-padding-y: #{$spacer * .375},
+ --tooltip-padding-x: var(--spacer-3),
+ --tooltip-padding-y: calc(var(--spacer) * .375),
--tooltip-font-size: var(--font-size-sm),
--tooltip-color: var(--bg-body),
--tooltip-bg: var(--fg-body),
// End of reset
width: 100%;
- margin-bottom: $spacer;
+ margin-bottom: var(--spacer);
vertical-align: var(--table-cell-vertical-align);
border-color: var(--theme-border, var(--table-border-color));
<div class="row">
<div class="sm:col-8 md:col-7 py-4">
<h4>About</h4>
- <p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
+ <p class="fg-2">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="sm:col-4 md:offset-1 py-4">
<h4>Contact</h4>
<div class="row lg:py-5">
<div class="lg:col-6 md:col-8 mx-auto">
<h1 class="fw-light">Album example</h1>
- <p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
+ <p class="lead fg-2">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn-solid theme-primary my-2">Main call to action</a>
<a href="#" class="btn-solid theme-secondary my-2">Secondary action</a>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn-outline theme-secondary btn-sm">View</button>
<button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
- <small class="text-body-secondary">9 mins</small>
+ <small class="fg-2">9 mins</small>
</div>
</div>
</div>
</main>
-<footer class="text-body-secondary py-5">
+<footer class="fg-2 py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
<h3 class="mb-0">Featured post</h3>
- <div class="mb-1 text-body-secondary">Nov 12</div>
+ <div class="mb-1 fg-2">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
<h3 class="mb-0">Post title</h3>
- <div class="mb-1 text-body-secondary">Nov 11</div>
+ <div class="mb-1 fg-2">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
<div class="lg:col-8">
<h6 class="mb-0">Example blog post title</h6>
- <small class="text-body-secondary">January 15, 2024</small>
+ <small class="fg-2">January 15, 2024</small>
</div>
</a>
</li>
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
<div class="lg:col-8">
<h6 class="mb-0">This is another blog post title</h6>
- <small class="text-body-secondary">January 14, 2024</small>
+ <small class="fg-2">January 14, 2024</small>
</div>
</a>
</li>
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
<div class="lg:col-8">
<h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
- <small class="text-body-secondary">January 13, 2024</small>
+ <small class="fg-2">January 13, 2024</small>
</div>
</a>
</li>
</main>
-<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
+<footer class="py-5 text-center fg-2 bg-body-tertiary">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://x.com/mdo">@mdo</a>.</p>
<p class="mb-0">
<a href="#">Back to top</a>
<div class="row featurette">
<div class="md:col-7">
- <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-body-secondary">It’ll blow your mind.</span></h2>
+ <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="fg-2">It’ll blow your mind.</span></h2>
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div>
<div class="md:col-5">
<div class="row featurette">
<div class="md:col-7 md:order-2">
- <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-body-secondary">See for yourself.</span></h2>
+ <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="fg-2">See for yourself.</span></h2>
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div>
<div class="md:col-5 md:order-1">
<div class="row featurette">
<div class="md:col-7">
- <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-body-secondary">Checkmate.</span></h2>
+ <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="fg-2">Checkmate.</span></h2>
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div>
<div class="md:col-5">
</h1>
</div>
</header>
-<aside class="bd-aside xl:sticky-top text-body-secondary align-self-start mb-3 xl:mb-5 px-2">
+<aside class="bd-aside xl:sticky-top fg-2 align-self-start mb-3 xl:mb-5 px-2">
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
<nav class="small" id="toc">
<ul class="list-unstyled">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
- <div class="card-footer text-body-secondary">
+ <div class="card-footer fg-2">
2 days ago
</div>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">11 mins ago</small>
+ <small class="fg-2">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Product name</h6>
- <small class="text-body-secondary">Brief description</small>
+ <small class="fg-2">Brief description</small>
</div>
- <span class="text-body-secondary">$12</span>
+ <span class="fg-2">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Second product</h6>
- <small class="text-body-secondary">Brief description</small>
+ <small class="fg-2">Brief description</small>
</div>
- <span class="text-body-secondary">$8</span>
+ <span class="fg-2">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Third item</h6>
- <small class="text-body-secondary">Brief description</small>
+ <small class="fg-2">Brief description</small>
</div>
- <span class="text-body-secondary">$5</span>
+ <span class="fg-2">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
</div>
<div class="col-12">
- <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
+ <label for="email" class="form-label">Email <span class="fg-2">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
<div class="col-12">
- <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
+ <label for="address2" class="form-label">Address 2 <span class="fg-2">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="md:col-6">
<label for="cc-name" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
- <small class="text-body-secondary">Full name as displayed on card</small>
+ <small class="fg-2">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
</main>
- <footer class="my-5 pt-5 text-body-secondary text-center text-small">
+ <footer class="my-5 pt-5 fg-2 text-center text-small">
<p class="mb-1">© 2017–{new Date().getFullYear()} Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
</li>
</ul>
- <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+ <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 fg-2 text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
<div class="dialog-body text-center py-4">
<h5 class="fw-bold mb-2">Enable this setting?</h5>
- <p class="text-body-secondary mb-0">You can always change your mind in your account settings.</p>
+ <p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
</div>
<div class="dialog-footer p-0 border-top">
<button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
<div class="dialog-body">
<ul class="list-unstyled mb-0">
<li class="d-flex gap-3 mb-3">
- <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use href="#grid-fill"/></svg>
+ <svg class="bi fg-2 flex-shrink-0" width="48" height="48"><use href="#grid-fill"/></svg>
<div>
<h6 class="mb-1 fw-bold">Grid view</h6>
- <p class="mb-0 text-body-secondary">Not into lists? Try the new grid view.</p>
+ <p class="mb-0 fg-2">Not into lists? Try the new grid view.</p>
</div>
</li>
<li class="d-flex gap-3 mb-3">
<svg class="bi text-warning flex-shrink-0" width="48" height="48"><use href="#bookmark-star"/></svg>
<div>
<h6 class="mb-1 fw-bold">Bookmarks</h6>
- <p class="mb-0 text-body-secondary">Save items you love for easy access later.</p>
+ <p class="mb-0 fg-2">Save items you love for easy access later.</p>
</div>
</li>
<li class="d-flex gap-3">
<svg class="bi text-primary flex-shrink-0" width="48" height="48"><use href="#film"/></svg>
<div>
<h6 class="mb-1 fw-bold">Video embeds</h6>
- <p class="mb-0 text-body-secondary">Share videos wherever you go.</p>
+ <p class="mb-0 fg-2">Share videos wherever you go.</p>
</div>
</li>
</ul>
<label for="floatingPassword">Password</label>
</div>
<button class="btn-solid theme-primary w-100 py-2 mb-2" type="submit">Sign up</button>
- <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
+ <small class="fg-2">By clicking Sign up, you agree to the terms of use.</small>
<hr class="my-4">
<h6 class="fw-bold mb-3">Or use a third-party</h6>
<button type="button" class="btn-outline theme-inverse w-100 py-2 mb-2">
<div class="my-3 p-3 bg-body rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
- <div class="d-flex text-body-secondary pt-3">
+ <div class="d-flex fg-2 pt-3">
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong>
Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
</p>
</div>
- <div class="d-flex text-body-secondary pt-3">
+ <div class="d-flex fg-2 pt-3">
<Placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" />
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong>
Some more representative placeholder content, related to this other user. Another status update, perhaps.
</p>
</div>
- <div class="d-flex text-body-secondary pt-3">
+ <div class="d-flex fg-2 pt-3">
<Placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" />
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong>
<div class="my-3 p-3 bg-body rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
- <div class="d-flex text-body-secondary pt-3">
+ <div class="d-flex fg-2 pt-3">
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<span class="d-block">@username</span>
</div>
</div>
- <div class="d-flex text-body-secondary pt-3">
+ <div class="d-flex fg-2 pt-3">
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<span class="d-block">@username</span>
</div>
</div>
- <div class="d-flex text-body-secondary pt-3">
+ <div class="d-flex fg-2 pt-3">
<Placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" />
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<div class="row row-cols-1 sm:row-cols-2 md:row-cols-3 lg:row-cols-4 g-4 py-5">
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<div class="col d-flex align-items-start">
- <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
+ <svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
<div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
<div class="row row-cols-1 md:row-cols-2 md:align-items-center g-5 py-5">
<div class="col d-flex flex-column align-items-start gap-2">
<h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
- <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+ <p class="fg-2">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="btn-solid theme-primary btn-lg">Primary button</a>
</div>
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
- <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+ <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class="col d-flex flex-column gap-2">
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
- <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+ <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class="col d-flex flex-column gap-2">
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
- <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+ <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
</div>
<div class="col d-flex flex-column gap-2">
</svg>
</div>
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
- <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
+ <p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
</div>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
- <p class="md:col-4 mb-0 text-body-secondary">© {new Date().getFullYear()} Company, Inc</p>
+ <p class="md:col-4 mb-0 fg-2">© {new Date().getFullYear()} Company, Inc</p>
<a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
<ul class="nav md:col-4 justify-content-end">
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Home</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Features</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Pricing</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">FAQs</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">About</a></li>
</ul>
</footer>
</div>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="md:col-4 d-flex align-items-center">
- <a href="/" class="mb-3 me-2 md:mb-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
+ <a href="/" class="mb-3 me-2 md:mb-0 fg-2 text-decoration-none lh-1" aria-label="Bootstrap">
<svg class="bi" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
- <span class="mb-3 md:mb-0 text-body-secondary">© {new Date().getFullYear()} Company, Inc</span>
+ <span class="mb-3 md:mb-0 fg-2">© {new Date().getFullYear()} Company, Inc</span>
</div>
<ul class="nav md:col-4 justify-content-end list-unstyled d-flex">
- <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#instagram"/></svg></a></li>
- <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use href="#facebook"/></svg></a></li>
+ <li class="ms-3"><a class="fg-2" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#instagram"/></svg></a></li>
+ <li class="ms-3"><a class="fg-2" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use href="#facebook"/></svg></a></li>
</ul>
</footer>
</div>
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
- <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Home</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Features</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">Pricing</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">FAQs</a></li>
+ <li class="nav-item"><a href="#" class="nav-link px-2 fg-2">About</a></li>
</ul>
- <p class="text-center text-body-secondary">© {new Date().getFullYear()} Company, Inc</p>
+ <p class="text-center fg-2">© {new Date().getFullYear()} Company, Inc</p>
</footer>
</div>
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
- <p class="text-body-secondary">© {new Date().getFullYear()}</p>
+ <p class="fg-2">© {new Date().getFullYear()}</p>
</div>
<div class="col mb-3">
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
</ul>
</div>
</footer>
<div class="col-6 md:col-2 mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
</ul>
</div>
<div class="col-6 md:col-2 mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
</ul>
</div>
<div class="col-6 md:col-2 mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
- <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Home</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Features</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">Pricing</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">FAQs</a></li>
+ <li class="nav-item mb-2"><a href="#" class="nav-link p-0 fg-2">About</a></li>
</ul>
</div>
</div>
<button class="w-100 btn-solid theme-primary btn-lg" type="submit">Sign up</button>
<hr class="my-4">
- <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
+ <small class="fg-2">By clicking Sign up, you agree to the terms of use.</small>
</form>
</div>
</div>
</div>
</div>
- <footer class="pt-3 mt-4 text-body-secondary border-top">
+ <footer class="pt-3 mt-4 fg-2 border-top">
© {new Date().getFullYear()}
</footer>
</div>
</div>
<span>
First checkbox
- <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
+ <small class="d-block fg-2">With support text underneath to add more detail</small>
</span>
</label>
<label class="list-group-item d-flex gap-2">
</div>
<span>
Second checkbox
- <small class="d-block text-body-secondary">Some other text goes here</small>
+ <small class="d-block fg-2">Some other text goes here</small>
</span>
</label>
<label class="list-group-item d-flex gap-2">
</div>
<span>
Third checkbox
- <small class="d-block text-body-secondary">And we end with another snippet of text</small>
+ <small class="d-block fg-2">And we end with another snippet of text</small>
</span>
</label>
</div>
<input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
<span>
First radio
- <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
+ <small class="d-block fg-2">With support text underneath to add more detail</small>
</span>
</label>
<label class="list-group-item d-flex gap-2">
<input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
<span>
Second radio
- <small class="d-block text-body-secondary">Some other text goes here</small>
+ <small class="d-block fg-2">Some other text goes here</small>
</span>
</label>
<label class="list-group-item d-flex gap-2">
<input class="radio flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
<span>
Third radio
- <small class="d-block text-body-secondary">And we end with another snippet of text</small>
+ <small class="d-block fg-2">And we end with another snippet of text</small>
</span>
</label>
</div>
</div>
<span class="pt-1 form-checked-content">
<strong>Finish sales report</strong>
- <small class="d-block text-body-secondary">
+ <small class="d-block fg-2">
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use href="#calendar-event"/></svg>
1:00–2:00pm
</small>
</div>
<span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong>
- <small class="d-block text-body-secondary">
+ <small class="d-block fg-2">
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use href="#calendar-event"/></svg>
2:00–2:30pm
</small>
</div>
<span class="pt-1 form-checked-content">
<strong>Out of office</strong>
- <small class="d-block text-body-secondary">
+ <small class="d-block fg-2">
<svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use href="#alarm"/></svg>
Tomorrow
</small>
</div>
<span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span>
- <small class="d-block text-body-secondary">
+ <small class="d-block fg-2">
<svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use href="#list-check"/></svg>
Choose list...
</small>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
- <figcaption class="blockquote-footer mb-0 text-body-secondary">
+ <figcaption class="blockquote-footer mb-0 fg-2">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
- <figcaption class="blockquote-footer mb-0 text-body-secondary">
+ <figcaption class="blockquote-footer mb-0 fg-2">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
</div>
- <div class="cal-weekdays text-body-secondary">
+ <div class="cal-weekdays fg-2">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
</div>
- <div class="cal-weekdays text-body-secondary">
+ <div class="cal-weekdays fg-2">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<div class="pricing-header p-3 md:pb-4 mx-auto text-center">
<h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1>
- <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+ <p class="fs-5 fg-2">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div>
</header>
<h4 class="my-0 fw-normal">Free</h4>
</div>
<div class="card-body">
- <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
+ <h1 class="card-title pricing-card-title">$0<small class="fg-2 fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<h4 class="my-0 fw-normal">Pro</h4>
</div>
<div class="card-body">
- <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
+ <h1 class="card-title pricing-card-title">$15<small class="fg-2 fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<h4 class="my-0 fw-normal">Enterprise</h4>
</div>
<div class="card-body">
- <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
+ <h1 class="card-title pricing-card-title">$29<small class="fg-2 fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<div class="row">
<div class="col-12 md:col">
<img class="mb-2" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="24" height="19">
- <small class="d-block mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</small>
+ <small class="d-block mb-3 fg-2">© 2017–{new Date().getFullYear()}</small>
</div>
<div class="col-6 md:col">
<h5>Features</h5>
<div class="row">
<div class="col-12 md:col">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
- <small class="d-block mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</small>
+ <small class="d-block mb-3 fg-2">© 2017–{new Date().getFullYear()}</small>
</div>
<div class="col-6 md:col">
<h5>Features</h5>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Tues</small>
+ <small class="fg-2">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Mon</small>
+ <small class="fg-2">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Wed</small>
+ <small class="fg-2">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Tues</small>
+ <small class="fg-2">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Mon</small>
+ <small class="fg-2">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Wed</small>
+ <small class="fg-2">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Tues</small>
+ <small class="fg-2">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Mon</small>
+ <small class="fg-2">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Wed</small>
+ <small class="fg-2">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Tues</small>
+ <small class="fg-2">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
- <small class="text-body-secondary">Mon</small>
+ <small class="fg-2">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
import { Tooltip } from '../../dist/js/bootstrap.bundle.js'
-const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+const tooltipTriggerList = [...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
tooltipTriggerList.forEach(tooltipTriggerEl => {
new Tooltip(tooltipTriggerEl)
})
</label>
</div>
<button class="btn-solid theme-primary w-100 py-2" type="submit">Sign in</button>
- <p class="mt-5 mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</p>
+ <p class="mt-5 mb-3 fg-2">© 2017–{new Date().getFullYear()}</p>
</form>
</main>
</div>
</div>
</main>
- <footer class="pt-5 my-5 text-body-secondary border-top">
+ <footer class="pt-5 my-5 fg-2 border-top">
Created by the Bootstrap team · © {new Date().getFullYear()}
</footer>
</div>
<footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container">
- <span class="text-body-secondary">Place sticky footer content here.</span>
+ <span class="fg-2">Place sticky footer content here.</span>
</div>
</footer>
<footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container">
- <span class="text-body-secondary">Place sticky footer content here.</span>
+ <span class="fg-2">Place sticky footer content here.</span>
</div>
</footer>
const htmlSnippet = exampleEl.innerHTML
const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
// Get extra classes for this example
- const classes = Array.from(exampleEl.classList).join(' ')
+ const classes = [...exampleEl.classList].join(' ')
openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
})
---
<footer class="bd-footer py-4 md:py-5 mt-5 bg-body-tertiary">
- <div class="container py-4 md:py-5 px-4 md:px-3 text-body-secondary">
+ <div class="container py-4 md:py-5 px-4 md:px-3 fg-2">
<div class="row">
<div class="lg:col-3 mb-3">
<a
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
<svg class="bi fs-1" aria-hidden="true"><use href="#menu-button-wide-fill"></use></svg>
</div>
- <svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use href="#plus"></use></svg>
+ <svg class="bi me-2 fs-2 fg-2" aria-hidden="true"><use href="#plus"></use></svg>
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
<svg class="bi fs-1" aria-hidden="true"><use href="#braces-asterisk"></use></svg>
</div>
Read the docs
</a>
</div>
- <p class="text-body-secondary mb-0">
+ <p class="fg-2 mb-0">
Currently <strong>v{getConfig().current_version}</strong>
<span class="px-1">·</span>
<a href={getVersionedDocsPath('getting-started/install')} class="link-secondary">Download</a>
<div class="sm:col-6 mb-2">
<a class="d-block lg:pe-4 text-decoration-none lh-sm" href={getVersionedDocsPath(plugin.link)}>
<h4 class="mb-0 fs-5 fw-semibold">{plugin.name}</h4>
- <small class="text-body-secondary">{plugin.description}</small>
+ <small class="fg-2">{plugin.description}</small>
</a>
</div>
)
<strong class="text-success">Correct</strong>
</div>
<div class="bd-brand-item w-100 px-2 py-5">
- <div class="h3 text-body-secondary">BootStrap</div>
+ <div class="h3 fg-2">BootStrap</div>
<strong class="text-danger">Incorrect</strong>
</div>
</div>
import { getData } from '@libs/data'
-Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. **Cards have no fixed width to start**, so they’ll naturally fill the full width of its parent element, or slot into your grid columns. This is easily customized with our various [sizing options](#width).
+Cards are flexible and extensible content containers with support for headers and footers, a wide variety of content, contextual background colors, and additional display options. **Cards have no fixed width to start**, so they’ll naturally fill the width of their parent element, or slot into your grid columns.
<Example code={`<section class="card" style="width: 280px">
<Placeholder width="100%" height="180" class="card-img-top" text="Image cap" />
- Cards are built with flexbox, so they offer easy alignment via [flexbox utilities]([[docsref:/utilities/flex]]) and [grid column classes]([[docsref:/layout/grid#column-classes]]).
-- Cards have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) as needed.
+- **Cards require both `.card` and `.card-body`** to best support perfect borders, rounded corners, and various content and layout options.
-- Cards are broken down into three categories of sub-components: header, body, and footer. Headers and footers are optional while the body is required. Images can also serve as headers and footers.
+- Cards have no `margin` by default, so use [margin utilities]([[docsref:/utilities/margin]]) or [gap utilities]([[docsref:/utilities/gap]]) as needed.
+
+- Cards are broken down into three categories of sub-components: header, body, and footer. Headers and footers are optional while **the body is required**. Images can also serve as headers and footers.
- Card and card body are both `flex` containers, so content can be aligned and stretched as needed with utilities and whatever HTML you require.
## Content types
-Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
-
### Body
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
</div>
</div>`} />
+For simple cards, you can use the `.card-body` class directly on the card element.
+
+<Example code={`<div class="card card-body">
+ This is some text within a card body.
+ </div>`} />
+
### Titles, text, and links
Titles, text, and links within cards all have required class names for managing alignment. Size and color is up to you to manage.
<div class="card-header">
Featured
</div>
- <ul class="list-group list-group-flush card-list">
+ <ul class="list-group list-group-flush card-list"><!-- [!code highlight] -->
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</div>`} />
<Example code={`<div class="card" style="width: 18rem;">
- <ul class="list-group list-group-flush card-list">
+ <ul class="list-group list-group-flush card-list"><!-- [!code highlight] -->
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</div>
</div>`} />
-<Example code={`<div class="card text-center">
+<Example code={`<div class="card text-center"><!-- [!code highlight] -->
<div class="card-header">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn-solid theme-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a><!-- [!code highlight] -->
</div>
- <div class="card-footer text-body-secondary">
+ <div class="card-footer fg-2">
2 days ago
</div>
</div>`} />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn-solid theme-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a>
</div>
</div>`} />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn-solid theme-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a>
</div>
</div>`} />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
<Placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" />
</div>`} />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>`} />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
<Placeholder width="100%" height="250" text="Image" class="card-img-end" />
</div>`} />
Customize cards by using our theme color utilities. By default, cards use `bg` for their background and border colors when applying a theme color. Use `.card-subtle` to swap the background and border colors for a more subtle look.
-<Example class="d-grid grid
md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
+<Example class="d-grid grid
grid-cols-1 md:grid-cols-2 gap-4" code={getData('theme-colors').map((themeColor) => `<div class="card theme-${themeColor.name}">
<div class="card-header">${themeColor.title}</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
</div>
</div>`)} customMarkup={getData('theme-colors').map((themeColor) => `<div class="card card-${themeColor.name}">…</div>`)} />
-<Example class="d-grid grid
md:grid-cols-3" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
+<Example class="d-grid grid
grid-cols-1 md:grid-cols-2 gap-4" code={getData('theme-colors').map((themeColor) => `<div class="card card-subtle theme-${themeColor.name}">
<div class="card-header">${themeColor.title}</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Headers and footers are also made translucent to maintain a consistent look.</p>
<a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
- <div class="card-footer text-body-secondary">
+ <div class="card-footer fg-2">
2 days ago
</div>
</div>`} />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
- <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+ <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
</div>
</div>
</div>`} />
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
- <small class="text-body-secondary">Last updated 3 mins ago</small>
+ <small class="fg-2">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
- <small class="text-body-secondary">Last updated 3 mins ago</small>
+ <small class="fg-2">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
- <small class="text-body-secondary">Last updated 3 mins ago</small>
+ <small class="fg-2">Last updated 3 mins ago</small>
</div>
</div>
</div>`} />
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
- <small class="text-body-secondary">Last updated 3 mins ago</small>
+ <small class="fg-2">Last updated 3 mins ago</small>
</div>
</div>
</div>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
- <small class="text-body-secondary">Last updated 3 mins ago</small>
+ <small class="fg-2">Last updated 3 mins ago</small>
</div>
</div>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
- <small class="text-body-secondary">Last updated 3 mins ago</small>
+ <small class="fg-2">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>`} />
-### Masonry
-
-In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we’ve made a [demo example]([[docsref:/examples/masonry]]) to help you get started.
-
## CSS
### Variables
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
- <small class="text-body-secondary">3 days ago</small>
+ <small class="fg-2">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
- <small class="text-body-secondary">And some muted small print.</small>
+ <small class="fg-2">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
- <small class="text-body-secondary">3 days ago</small>
+ <small class="fg-2">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
- <small class="text-body-secondary">And some muted small print.</small>
+ <small class="fg-2">And some muted small print.</small>
</a>
</div>`} />
Place any freeform text within a menu with text and use [margin]([[docsref:/utilities/margin]]) and [padding]([[docsref:/utilities/padding]]) utilities. Note that you'll likely need additional sizing styles to constrain the menu width.
-<Example code={`<div class="menu show position-static p-3 text-body-secondary"
+<Example code={`<div class="menu show position-static p-3 fg-2"
style="--bs-menu-min-width: 240px;">
<p>
Some example text that's free-flowing within the menu.
<CloseButton dismiss="drawer" />
</div>
<div class="drawer-body">
- <span class="text-body-secondary">Toggleable via the navbar toggler.</span>
+ <span class="fg-2">Toggleable via the navbar toggler.</span>
</div>
</dialog>
<nav class="navbar bg-body" data-bs-theme="dark">
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">11 mins ago</small>
+ <small class="fg-2">11 mins ago</small>
<CloseButton dismiss="toast" />
</div>
<div class="toast-body">
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">11 mins ago</small>
+ <small class="fg-2">11 mins ago</small>
<CloseButton dismiss="toast" />
</div>
<div class="toast-body">
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">just now</small>
+ <small class="fg-2">just now</small>
<CloseButton dismiss="toast" />
</div>
<div class="toast-body">
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">2 seconds ago</small>
+ <small class="fg-2">2 seconds ago</small>
<CloseButton dismiss="toast" />
</div>
<div class="toast-body">
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">just now</small>
+ <small class="fg-2">just now</small>
<CloseButton dismiss="toast" />
</div>
<div class="toast-body">
<div class="toast-header">
<Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
<strong class="me-auto">Bootstrap</strong>
- <small class="text-body-secondary">2 seconds ago</small>
+ <small class="fg-2">2 seconds ago</small>
<CloseButton dismiss="toast" />
</div>
<div class="toast-body">
<BsTable>
| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥1024px</div> | X-Large<div class="fw-normal">≥1280px</div> | 2X-Large<div class="fw-normal">≥1536px</div> |
| --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
-| `.sm:container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
-| `.md:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1440px |
-| `.lg:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1440px |
-| `.xl:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1440px |
-| `.2xl:container` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1440px |
-| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
+| `.container` | <span class="fg-2">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.sm:container` | <span class="fg-2">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.md:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 720px | 960px | 1140px | 1440px |
+| `.lg:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 960px | 1140px | 1440px |
+| `.xl:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 1140px | 1440px |
+| `.2xl:container` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | 1440px |
+| `.container-fluid` | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> | <span class="fg-2">100%</span> |
</BsTable>
## Default container
{example.name}
</a>
</h3>
- <p class="text-body-secondary">{example.description}</p>
+ <p class="fg-2">{example.description}</p>
<p>
<a
class="icon-link small link-secondary link-offset-1"
/>
<h3 class="h5 mb-1">{example.name}</h3>
</a>
- <p class="text-body-secondary">{example.description}</p>
+ <p class="fg-2">{example.description}</p>
</article>
)
})}
-@use "../../../scss/config" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
}
> hr:last-child {
- margin-bottom: $spacer;
+ margin-bottom: var(--spacer);
}
// Images
projects / thirdparty / bootstrap.git / commitdiff
