diff options
Diffstat (limited to 'site')
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/diff/site/static/docs/5.0/assets/img/examples/cover@2x.png?h=main-fod-simpler-table-structure){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/diff/site/static/docs/5.0/assets/img/examples/dropdowns@2x.png?h=main-fod-simpler-table-structure){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/diff/site/static/docs/5.0/assets/img/examples/footers@2x.png?h=main-fod-simpler-table-structure){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/diff/site/static/docs/5.0/assets/img/examples/list-groups@2x.png?h=main-fod-simpler-table-structure){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/diff/site/static/docs/5.0/assets/img/examples/modals@2x.png?h=main-fod-simpler-table-structure){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/diff/site/static/docs/5.0/assets/img/examples/pricing@2x.png?h=main-fod-simpler-table-structure){kind=link}
48 files changed, 1845 insertions, 71 deletions
diff --git a/site/.eslintrc.json b/site/.eslintrc.json index b34d33151..7dd81b811 100644 --- a/site/.eslintrc.json +++ b/site/.eslintrc.json @@ -10,7 +10,12 @@ "xo/browser" ], "rules": { + "arrow-body-style": "off", "capitalized-comments": "off", + "comma-dangle": [ + "error", + "never" + ], "indent": [ "error", 2, @@ -30,6 +35,10 @@ "always" ], "object-shorthand": "off", + "operator-linebreak": [ + "error", + "after" + ], "prefer-arrow-callback": "off", "prefer-destructuring": "off", "semi": [ @@ -38,11 +47,15 @@ ], "strict": "error", "unicorn/no-array-for-each": "off", + "unicorn/no-array-method-this-argument": "off", "unicorn/no-for-loop": "off", "unicorn/no-null": "off", + "unicorn/numeric-separators-style": "off", + "unicorn/prefer-array-flat": "off", "unicorn/prefer-dom-node-append": "off", "unicorn/prefer-dom-node-dataset": "off", "unicorn/prefer-module": "off", + "unicorn/prefer-prototype-methods": "off", "unicorn/prefer-query-selector": "off", "unicorn/prevent-abbreviations": "off" } diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 6ff316056..7981d4fcf 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -58,6 +58,22 @@ }) } + var alertPlaceholder = document.getElementById('liveAlertPlaceholder') + var alertTrigger = document.getElementById('liveAlertBtn') + + function alert(message, type) { + var wrapper = document.createElement('div') + wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>' + + alertPlaceholder.append(wrapper) + } + + if (alertTrigger) { + alertTrigger.addEventListener('click', function () { + alert('Nice, you triggered this alert message!', 'success') + }) + } + // Demos within modals document.querySelectorAll('.tooltip-test') .forEach(function (tooltip) { diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index e831b1609..8fbfc06c5 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -23,6 +23,21 @@ background-color: rgba(255, 0, 0, .1); } +.bd-example-cssgrid { + text-align: center; + + .grid + .grid { + margin-top: 1rem; + } + + .grid > * { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(255, 0, 255, .1); + border: 1px solid rgba(255, 0, 255, .25); + } +} + .bd-highlight { background-color: rgba($bd-purple, .15); border: 1px solid rgba($bd-purple, .15); diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index e3066ed2e..8b7bc99a1 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -28,6 +28,12 @@ @import "../../../scss/variables"; @import "../../../scss/mixins"; +// fusv-disable +$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default +$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default +// fusv-enable +@import "../../../scss/grid"; + // Load docs components @import "variables"; @import "navbar"; diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index a7e52f5f8..338976323 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -23,6 +23,45 @@ Alerts are available for any length of text, as well as an optional close button {{< partial "callout-warning-color-assistive-technologies.md" >}} {{< /callout >}} +### Live example + +Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. + +<div id="liveAlertPlaceholder"></div> + +<div class="bd-example"> + <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button> +</div> + +```html +<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button> + +<div class="alert alert-primary alert-dismissible" role="alert" id="liveAlert"> + <strong>Nice!</strong> You've triggered this alert. + <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> +</div> +``` + +We use the following JavaScript to trigger our live alert demo: + +```js +var alertPlaceholder = document.getElementById('liveAlertPlaceholder') +var alertTrigger = document.getElementById('liveAlertBtn') + +function alert(message, type) { + var wrapper = document.createElement('div') + wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>' + + alertPlaceholder.append(wrapper) +} + +if (alertTrigger) { + alertTrigger.addEventListener('click', function () { + alert('Nice, you triggered this alert message!', 'success') + }) +} +``` + ### Link color Use the `.alert-link` utility class to quickly provide matching colored links within any alert. @@ -147,35 +186,29 @@ Loop that generates the modifier classes with the `alert-variant()` mixin. ## JavaScript behavior -### Triggers +### Initialize -Enable dismissal of an alert via JavaScript: +Initialize elements as alerts ```js var alertList = document.querySelectorAll('.alert') -alertList.forEach(function (alert) { - new bootstrap.Alert(alert) +var alerts = [].slice.call(alertList).map(function (element) { + return new bootstrap.Alert(element) }) ``` +{{< callout info >}} +For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed. -Or with `data` attributes on a button **within the alert**, as demonstrated above: - -```html -<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> -``` - -Note that closing an alert will remove it from the DOM. +See the [triggers](#triggers) section for more details. +{{< /callout >}} -### Methods +### Triggers -You can create an alert instance with the alert constructor, for example: +{{% js-dismiss "alert" %}} -```js -var myAlert = document.getElementById('myAlert') -var bsAlert = new bootstrap.Alert(myAlert) -``` +**Note that closing an alert will remove it from the DOM.** -This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) +### Methods <table class="table"> <thead> diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index ac84ca964..5d413ad75 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil </div> {{< /example >}} +## Horizontal + +The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). + +{{< callout info >}} +Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** +{{< /callout >}} + +{{< example >}} +<p> + <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"> + Toggle width collapse + </button> +</p> +<div style="min-height: 120px;"> + <div class="collapse collapse-horizontal" id="collapseWidthExample"> + <div class="card card-body" style="width: 300px;"> + This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. + </div> + </div> +</div> +{{< /example >}} + ## Multiple targets A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute. @@ -103,7 +126,7 @@ These classes can be found in `_transitions.scss`. Just add `data-bs-toggle="collapse"` and a `data-bs-target` to the element to automatically assign control of one or more collapsible elements. The `data-bs-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`. -To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the demo to see this in action. +To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the [accordion page]({{< docsref "/components/accordion" >}}) for more information. ### Via JavaScript diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index e6a838aac..56fad0297 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -831,11 +831,20 @@ The modal plugin toggles your hidden content on demand, via data attributes or J ### Via data attributes +#### Toggle + Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle. ```html <button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button> ``` +#### Dismiss + +{{% js-dismiss "modal" %}} + +{{< callout warning >}} +While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk. +{{< /callout >}} ### Via JavaScript diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index 7b57fd5c6..1abfcd16c 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -655,6 +655,70 @@ Sometimes you want to use the collapse plugin to trigger a container element for When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy. +### Offcanvas + +Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar. + +In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely. + +{{< example >}} +<nav class="navbar navbar-light bg-light fixed-top"> + <div class="container-fluid"> + <a class="navbar-brand" href="#">Offcanvas navbar</a> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5> + <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown + </a> + <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li> + <hr class="dropdown-divider"> + </li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </li> + </ul> + <form class="d-flex"> + <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success" type="submit">Search</button> + </form> + </div> + </div> + </div> +</nav> +{{< /example >}} + +To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`. + +```html +<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top"> + <a class="navbar-brand" href="#">Offcanvas navbar</a> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel"> + ... + </div> +</nav> +``` + ## Sass ### Variables diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index b839f9754..dd5a3e08a 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -525,7 +525,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp Enable tabbable tabs via JavaScript (each tab needs to be activated individually): ```js -var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a')) +var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button')) triggerTabList.forEach(function (triggerEl) { var tabTrigger = new bootstrap.Tab(triggerEl) @@ -539,10 +539,10 @@ triggerTabList.forEach(function (triggerEl) { You can activate individual tabs in several ways: ```js -var triggerEl = document.querySelector('#myTab a[href="#profile"]') +var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]') bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name -var triggerFirstTabEl = document.querySelector('#myTab li:first-child a') +var triggerFirstTabEl = document.querySelector('#myTab li:first-child button') bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab ``` @@ -593,7 +593,7 @@ Activates a tab element and content container. Tab should have either a `data-bs </div> <script> - var firstTabEl = document.querySelector('#myTab li:last-child a') + var firstTabEl = document.querySelector('#myTab li:last-child button') var firstTab = new bootstrap.Tab(firstTabEl) firstTab.show() diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index d0c60db2b..c28e005e6 100644 --- a/site/content/docs/5.0/components/offcanvas.md +++ b/site/content/docs/5.0/components/offcanvas.md @@ -194,8 +194,18 @@ Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which tri ### Via data attributes +#### Toggle + Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-bs-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`. +#### Dismiss + +{{% js-dismiss "offcanvas" %}} + +{{< callout warning >}} +While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk. +{{< /callout >}} + ### Via JavaScript Enable manually with: diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 2dde09f5b..d17d8b3df 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -41,12 +41,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi </div> {{< /example >}} -### Live +{{< callout warning >}} +Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version. +{{< /callout >}} + +### Live example -Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`. +Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default. <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"> - <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> + <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <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> @@ -67,7 +71,7 @@ Click the button below to show a toast (positioned with our utilities in the low <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"> - <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"> + <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> @@ -81,6 +85,20 @@ Click the button below to show a toast (positioned with our utilities in the low </div> ``` +We use the following JavaScript to trigger our live toast demo: + +```js +var toastTrigger = document.getElementById('liveToastBtn') +var toastLiveExample = document.getElementById('liveToast') +if (toastTrigger) { + toastTrigger.addEventListener('click', function () { + var toast = new bootstrap.Toast(toastLiveExample) + + toast.show() + }) +} +``` + ### Translucent Toasts are slightly translucent to blend in with what's below them. @@ -323,6 +341,10 @@ var toastList = toastElList.map(function (toastEl) { }) ``` +### Triggers + +{{% js-dismiss "toast" %}} + ### Options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. @@ -393,7 +415,7 @@ toast.dispose() #### getInstance -*Static* method which allows you to get the scrollspy instance associated with a DOM element +*Static* method which allows you to get the toast instance associated with a DOM element ```js var myToastEl = document.getElementById('myToastEl') @@ -402,7 +424,7 @@ var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toas #### getOrCreateInstance -*Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialised +*Static* method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn't initialised ```js var myToastEl = document.getElementById('myToastEl') diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.0/customize/color.md index 7d1615589..63e5d19e6 100644 --- a/site/content/docs/5.0/customize/color.md +++ b/site/content/docs/5.0/customize/color.md @@ -106,3 +106,45 @@ Here's how you can use these in your Sass: ``` [Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values. + +## Generating utilities + +<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small> + +Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0. + +1. To start, make sure you've imported our functions, variables, mixins, and utilities. +2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map. +3. Merge this new combined map to extend any utility with a `{color}-{level}` class name. + +Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps. + +```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; + +$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans); + +$utilities: map-merge( + $utilities, + ( + "color": map-merge( + map-get($utilities, "color"), + ( + values: map-merge( + map-get(map-get($utilities, "color"), "values"), + ( + $all-colors + ), + ), + ), + ), + ) +); + +@import "bootstrap/scss/utilities/api"; +``` + +This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well. diff --git a/site/content/docs/5.0/customize/optimize.md b/site/content/docs/5.0/customize/optimize.md index 0911667d0..29b152154 100644 --- a/site/content/docs/5.0/customize/optimize.md +++ b/site/content/docs/5.0/customize/optimize.md @@ -30,6 +30,7 @@ For instance, assuming you're using your own JavaScript bundler like Webpack or // import 'bootstrap/js/dist/collapse'; // import 'bootstrap/js/dist/dropdown'; import 'bootstrap/js/dist/modal'; +// import 'bootstrap/js/dist/offcanvas'; // import 'bootstrap/js/dist/popover'; // import 'bootstrap/js/dist/scrollspy'; // import 'bootstrap/js/dist/tab'; diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md index 4039bd67c..137f1cfd8 100644 --- a/site/content/docs/5.0/customize/sass.md +++ b/site/content/docs/5.0/customize/sass.md @@ -60,16 +60,21 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two // 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; - -// 4. Include any optional Bootstrap components as you like @import "../node_modules/bootstrap/scss/root"; + +// 4. Include any optional Bootstrap CSS as needed +@import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/helpers"; -// 5. Add additional custom code here +// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss` +@import "../node_modules/bootstrap/scss/utilities/api"; + +// 6. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. @@ -95,9 +100,9 @@ $body-color: #111; // Required @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; // Optional Bootstrap components here -@import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; // etc @@ -156,11 +161,11 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; $theme-colors: map-remove($theme-colors, "info", "light", "dark"); // Optional -@import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; // etc diff --git a/site/content/docs/5.0/examples/dropdowns/dropdowns.css b/site/content/docs/5.0/examples/dropdowns/dropdowns.css new file mode 100644 index 000000000..4341c59ea --- /dev/null +++ b/site/content/docs/5.0/examples/dropdowns/dropdowns.css @@ -0,0 +1,89 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.dropdown-menu { + position: static; + display: block; + width: auto; + margin: 4rem auto; +} + +.dropdown-menu-macos { + display: grid; + gap: .25rem; + padding: .5rem; + border-radius: .5rem; +} +.dropdown-menu-macos .dropdown-item { + border-radius: .25rem; +} + +.dropdown-item-danger { + color: var(--bs-red); +} +.dropdown-item-danger:hover, +.dropdown-item-danger:focus { + color: #fff; + background-color: var(--bs-red); +} +.dropdown-item-danger.active { + background-color: var(--bs-red); +} + +.btn-hover-light { + text-align: left; + background-color: var(--bs-white); + border-radius: .25rem; +} +.btn-hover-light:hover, +.btn-hover-light:focus { + color: var(--bs-blue); + background-color: var(--bs-light); +} + +.cal-month, +.cal-days, +.cal-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + align-items: center; +} +.cal-month-name { + grid-column-start: 2; + grid-column-end: 7; + text-align: center; +} +.cal-weekday, +.cal-btn { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + height: 3rem; + padding: 0; +} +.cal-btn:not([disabled]) { + font-weight: 500; +} +.cal-btn:hover, +.cal-btn:focus { + background-color: rgba(0, 0, 0, .05); +} +.cal-btn[disabled] { + opacity: .5; +} + +.form-control-dark { + background-color: rgba(255, 255, 255, .05); + border-color: rgba(255, 255, 255, .15); +} diff --git a/site/content/docs/5.0/examples/dropdowns/index.html b/site/content/docs/5.0/examples/dropdowns/index.html new file mode 100644 index 000000000..5296d1507 --- /dev/null +++ b/site/content/docs/5.0/examples/dropdowns/index.html @@ -0,0 +1,339 @@ +--- +layout: examples +title: Dropdowns +extra_css: + - "dropdowns.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + + <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16"> + <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> + + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + + <symbol id="check2-circle" viewBox="0 0 16 16"> + <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/> + <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/> + </symbol> + + <symbol id="bookmark-star" viewBox="0 0 16 16"> + <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/> + <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> + </symbol> + + <symbol id="grid-fill" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/> + </symbol> + + <symbol id="stars" viewBox="0 0 16 16"> + <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/> + </symbol> + + <symbol id="film" viewBox="0 0 16 16"> + <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/> + </symbol> + + <symbol id="joystick" viewBox="0 0 16 16"> + <path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/> + <path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/> + </symbol> + + <symbol id="music-note-beamed" viewBox="0 0 16 16"> + <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/> + <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/> + <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/> + </symbol> + + <symbol id="files" viewBox="0 0 16 16"> + <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/> + </symbol> + + <symbol id="image-fill" viewBox="0 0 16 16"> + <path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/> + </symbol> + + <symbol id="trash" viewBox="0 0 16 16"> + <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/> + <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/> + </symbol> + + <symbol id="question-circle" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> + <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/> + </symbol> + + <symbol id="arrow-left-short" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/> + </symbol> + + <symbol id="arrow-right-short" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/> + </symbol> +</svg> + +<div class="d-flex gap-5 justify-content-center" id="dropdownMacos"> + <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;"> + <li><a class="dropdown-item active" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> + <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;"> + <li><a class="dropdown-item active" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Separated link</a></li> + </ul> +</div> + +<div class="b-example-divider"></div> + + +<div class="d-flex gap-5 justify-content-center" id="dropdownFilter"> + <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;"> + <form class="p-2 mb-2 bg-light border-bottom"> + <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter..."> + </form> + <ul class="list-unstyled mb-0"> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span> + Action + </a></li> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span> + Another action + </a></li> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span> + Something else here + </a></li> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span> + Separated link + </a></li> + </ul> + </div> + + <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;"> + <form class="p-2 mb-2 bg-dark border-bottom border-dark"> + <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter..."> + </form> + <ul class="list-unstyled mb-0"> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span> + Action + </a></li> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span> + Another action + </a></li> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span> + Something else here + </a></li> + <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> + <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span> + Separated link + </a></li> + </ul> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-5 justify-content-center" id="dropdownIcons"> + <ul class="dropdown-menu mx-0 shadow" style="width: 220px;"> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> + Documents + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> + Photos + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> + Movies + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> + Music + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> + Games + </a> + </li> + <li><hr class="dropdown-divider"></li> + <li> + <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> + Trash + </a> + </li> + </ul> + <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;"> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> + Documents + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> + Photos + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> + Movies + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> + Music + </a> + </li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> + Games + </a> + </li> + <li><hr class="dropdown-divider"></li> + <li> + <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> + <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> + Trash + </a> + </li> + </ul> +</div> + +<div class="b-example-divider"></div> + +<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar"> + <div class="d-grid gap-1"> + <div class="cal"> + <div class="cal-month"> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> + </button> + <strong class="cal-month-name">June</strong> + <select class="form-select cal-month-name d-none"> + <option value="January">January</option> + <option value="February">February</option> + <option value="March">March</option> + <option value="April">April</option> + <option value="May">May</option> + <option selected value="June">June</option> + <option value="July">July</option> + <option value="August">August</option> + <option value="September">September</option> + <option value="October">October</option> + <option value="November">November</option> + <option value="December">December</option> + </select> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> + </button> + </div> + <div class="cal-weekdays text-muted"> + <div class="cal-weekday">Sun</div> + <div class="cal-weekday">Mon</div> + <div class="cal-weekday">Tue</div> + <div class="cal-weekday">Wed</div> + <div class="cal-weekday">Thu</div> + <div class="cal-weekday">Fri</div> + <div class="cal-weekday">Sat</div> + </div> + <div class="cal-days"> + <button class="btn cal-btn" disabled type="button">30</button> + <button class="btn cal-btn" disabled type="button">31</button> + + <button class="btn cal-btn" type="button">1</button> + <button class="btn cal-btn" type="button">2</button> + <button class="btn cal-btn" type="button">3</button> + <button class="btn cal-btn" type="button">4</button> + <button class="btn cal-btn" type="button">5</button> + <button class="btn cal-btn" type="button">6</button> + <button class="btn cal-btn" type="button">7</button> + + <button class="btn cal-btn" type="button">8</button> + <button class="btn cal-btn" type="button">9</button> + <button class="btn cal-btn" type="button">10</button> + <button class="btn cal-btn" type="button">11</button> + <button class="btn cal-btn" type="button">12</button> + <button class="btn cal-btn" type="button">13</button> + <button class="btn cal-btn" type="button">14</button> + + <button class="btn cal-btn" type="button">15</button> + <button class="btn cal-btn" type="button">16</button> + <button class="btn cal-btn" type="button">17</button> + <button class="btn cal-btn" type="button">18</button> + <button class="btn cal-btn" type="button">19</button> + <button class="btn cal-btn" type="button">20</button> + <button class="btn cal-btn" type="button">21</button> + + <button class="btn cal-btn" type="button">22</button> + <button class="btn cal-btn" type="button">23</button> + <button class="btn cal-btn" type="button">24</button> + <button class="btn cal-btn" type="button">25</button> + <button class="btn cal-btn" type="button">26</button> + <button class="btn cal-btn" type="button">27</button> + <button class="btn cal-btn" type="button">28</button> + + <button class="btn cal-btn" type="button">29</button> + <button class="btn cal-btn" type="button">30</button> + <button class="btn cal-btn" type="button">31</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style="width: 600px" id="dropdownMega"> + <nav class="d-grid gap-2 col-8"> + <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm"> + <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg> + <div> + <strong class="d-block">Features</strong> + <small>Take a tour through the product</small> + </div> + </a> + <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm"> + <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg> + <div> + <strong class="d-block">Support</strong> + <small>Get help from our support crew</small> + </div> + </a> + </nav> + <div class="col-4"> + ... + </div> +</div>
\ No newline at end of file diff --git a/site/content/docs/5.0/examples/footers/footers.css b/site/content/docs/5.0/examples/footers/footers.css new file mode 100644 index 000000000..4e826827e --- /dev/null +++ b/site/content/docs/5.0/examples/footers/footers.css @@ -0,0 +1,12 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} diff --git a/site/content/docs/5.0/examples/footers/index.html b/site/content/docs/5.0/examples/footers/index.html new file mode 100644 index 000000000..b26909574 --- /dev/null +++ b/site/content/docs/5.0/examples/footers/index.html @@ -0,0 +1,188 @@ +--- +layout: examples +title: Footers +extra_css: + - "footers.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="facebook" viewBox="0 0 16 16"> + <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> + </symbol> + <symbol id="instagram" viewBox="0 0 16 16"> + <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> + </symbol> + <symbol id="twitter" viewBox="0 0 16 16"> + <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> + </symbol> +</svg> + +<div class="container"> + <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> + <p class="col-md-4 mb-0 text-muted">© {{< year >}} Company, Inc</p> + + <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-md-4 justify-content-end"> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> + </ul> + </footer> +</div> + +<div class="b-example-divider"></div> + +<div class="container"> + <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> + <div class="col-md-4 d-flex align-items-center"> + <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1"> + <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + </a> + <span class="text-muted">© {{< year >}} Company, Inc</span> + </div> + + <ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> + <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> + <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> + <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> + </ul> + </footer> +</div> + +<div class="b-example-divider"></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-muted">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> + </ul> + <p class="text-center text-muted">© {{< year >}} Company, Inc</p> + </footer> +</div> + +<div class="b-example-divider"></div> + +<div class="container"> + <footer class="row row-cols-5 py-5 my-5 border-top"> + <div class="col"> + <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + <p class="text-muted">© {{< year >}}</p> + </div> + + <div class="col"> + + </div> + + <div class="col"> + <h5>Section</h5> + <ul class="nav flex-column"> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + </ul> + </div> + + <div class="col"> + <h5>Section</h5> + <ul class="nav flex-column"> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + </ul> + </div> + + <div class="col"> + <h5>Section</h5> + <ul class="nav flex-column"> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + </ul> + </div> + </footer> +</div> + +<div class="b-example-divider"></div> + + +<div class="container"> + <footer class="py-5"> + <div class="row"> + <div class="col-2"> + <h5>Section</h5> + <ul class="nav flex-column"> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + </ul> + </div> + + <div class="col-2"> + <h5>Section</h5> + <ul class="nav flex-column"> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + </ul> + </div> + + <div class="col-2"> + <h5>Section</h5> + <ul class="nav flex-column"> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + </ul> + </div> + + <div class="col-4 offset-1"> + <form> + <h5>Subscribe to our newsletter</h5> + <p>Monthly digest of whats new and exciting from us.</p> + <div class="d-flex w-100 gap-2"> + <label for="newsletter1" class="visually-hidden">Email address</label> + <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> + <button class="btn btn-primary" type="button">Subscribe</button> + </div> + </form> + </div> + </div> + + <div class="d-flex justify-content-between py-4 my-4 border-top"> + <p>© {{< year >}} Company, Inc. All rights reserved.</p> + <ul class="list-unstyled d-flex"> + <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> + <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> + <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> + </ul> + </div> + </footer> +</div> diff --git a/site/content/docs/5.0/examples/list-groups/index.html b/site/content/docs/5.0/examples/list-groups/index.html new file mode 100644 index 000000000..c16bad944 --- /dev/null +++ b/site/content/docs/5.0/examples/list-groups/index.html @@ -0,0 +1,186 @@ +--- +layout: examples +title: List groups +extra_css: + - "list-groups.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + + <symbol id="calendar-event" viewBox="0 0 16 16"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> + </symbol> + + <symbol id="alarm" viewBox="0 0 16 16"> + <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/> + <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/> + </symbol> + + <symbol id="list-check" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/> + </symbol> +</svg> + +<div class="list-group"> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">List group item heading</h6> + <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p> + </div> + <small class="opacity-50 text-nowrap">now</small> + </div> + </a> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">Another title here</h6> + <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p> + </div> + <small class="opacity-50 text-nowrap">3d</small> + </div> + </a> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">Third heading</h6> + <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p> + </div> + <small class="opacity-50 text-nowrap">1w</small> + </div> + </a> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex gap-5 justify-content-center"> + <div class="list-group mx-0"> + <label class="list-group-item d-flex gap-2"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked> + <span> + First checkbox + <small class="d-block text-muted">With support text underneath to add more detail</small> + </span> + </label> + <label class="list-group-item d-flex gap-2"> + <input class="form-check-input flex-shrink-0" type="checkbox" value=""> + <span> + Second checkbox + <small class="d-block text-muted">Some other text goes here</small> + </span> + </label> + <label class="list-group-item d-flex gap-2"> + <input class="form-check-input flex-shrink-0" type="checkbox" value=""> + <span> + Third checkbox + <small class="d-block text-muted">And we end with another snippet of text</small> + </span> + </label> + </div> + + <div class="list-group mx-0"> + <label class="list-group-item d-flex gap-2"> + <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked> + <span> + First radio + <small class="d-block text-muted">With support text underneath to add more detail</small> + </span> + </label> + <label class="list-group-item d-flex gap-2"> + <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value=""> + <span> + Second radio + <small class="d-block text-muted">Some other text goes here</small> + </span> + </label> + <label class="list-group-item d-flex gap-2"> + <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value=""> + <span> + Third radio + <small class="d-block text-muted">And we end with another snippet of text</small> + </span> + </label> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="list-group"> + <label class="list-group-item d-flex gap-3"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <strong>Finish sales report</strong> + <small class="d-block text-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> + 1:00–2:00pm + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <strong>Weekly All Hands</strong> + <small class="d-block text-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> + 2:00–2:30pm + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <strong>Out of office</strong> + <small class="d-block text-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> + Tomorrow + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3 bg-light"> + <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0" disabled type="checkbox" value="" style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <span contenteditable="true" class="w-100">Add new task...</span> + <small class="d-block text-muted"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> + Choose list... + </small> + </span> + </label> +</div> + +<div class="b-example-divider"></div> + +<div class="list-group list-group-checkable"> + <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked> + <label class="list-group-item py-3" for="listGroupCheckableRadios1"> + First radio + <span class="d-block small opacity-50">With support text underneath to add more detail</span> + </label> + + <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value=""> + <label class="list-group-item py-3" for="listGroupCheckableRadios2"> + Second radio + <span class="d-block small opacity-50">Some other text goes here</span> + </label> + + <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value=""> + <label class="list-group-item py-3" for="listGroupCheckableRadios3"> + Third radio + <span class="d-block small opacity-50">And we end with another snippet of text</span> + </label> + + <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled> + <label class="list-group-item py-3" for="listGroupCheckableRadios4"> + Fourth disabled radio + <span class="d-block small opacity-50">This option is disabled</span> + </label> +</div>
\ No newline at end of file diff --git a/site/content/docs/5.0/examples/list-groups/list-groups.css b/site/content/docs/5.0/examples/list-groups/list-groups.css new file mode 100644 index 000000000..11351f87e --- /dev/null +++ b/site/content/docs/5.0/examples/list-groups/list-groups.css @@ -0,0 +1,61 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.opacity-50 { opacity: .5; } +.opacity-75 { opacity: .75; } + +.list-group { + width: auto; + max-width: 460px; + margin: 4rem auto; +} + +.form-check-input:checked + .form-checked-content { + opacity: .5; +} + +.form-check-input-placeholder { + pointer-events: none; + border-style: dashed; +} +[contenteditable]:focus { + outline: 0; +} + +.list-group-checkable { + display: grid; + gap: .5rem; + border: 0; +} +.list-group-checkable .list-group-item { + cursor: pointer; + border-radius: .5rem; +} +.list-group-item-check { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.list-group-item-check:hover + .list-group-item { + background-color: var(--bs-light); +} +.list-group-item-check:checked + .list-group-item { + color: #fff; + background-color: var(--bs-blue); +} +.list-group-item-check[disabled] + .list-group-item, +.list-group-item-check:disabled + .list-group-item { + pointer-events: none; + filter: none; + opacity: .5; +} diff --git a/site/content/docs/5.0/examples/modals/index.html b/site/content/docs/5.0/examples/modals/index.html new file mode 100644 index 000000000..cc0feff87 --- /dev/null +++ b/site/content/docs/5.0/examples/modals/index.html @@ -0,0 +1,173 @@ +--- +layout: examples +title: Modals +extra_css: + - "modals.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + + <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16"> + <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> + + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + + <symbol id="check2-circle" viewBox="0 0 16 16"> + <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/> + <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/> + </symbol> + + <symbol id="bookmark-star" viewBox="0 0 16 16"> + <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/> + <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> + </symbol> + + <symbol id="grid-fill" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/> + </symbol> + + <symbol id="stars" viewBox="0 0 16 16"> + <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/> + </symbol> + + <symbol id="film" viewBox="0 0 16 16"> + <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/> + </symbol> + + <symbol id="github" viewBox="0 0 16 16"> + <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> + </symbol> + + <symbol id="twitter" viewBox="0 0 16 16"> + <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> + </symbol> + + <symbol id="facebook" viewBox="0 0 16 16"> + <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/> + </symbol> +</svg> + +<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet"> + <div class="modal-dialog" role="document"> + <div class="modal-content rounded-6 shadow"> + <div class="modal-header border-bottom-0"> + <h5 class="modal-title">Modal title</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body py-0"> + <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p> + </div> + <div class="modal-footer flex-column border-top-0"> + <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button> + <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice"> + <div class="modal-dialog" role="document"> + <div class="modal-content rounded-4 shadow"> + <div class="modal-body p-4 text-center"> + <h5 class="mb-0">Enable this setting?</h5> + <p class="mb-0">You can always change your mind in your account settings.</p> + </div> + <div class="modal-footer flex-nowrap p-0"> + <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-right"><strong>Yes, enable</strong></button> + <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour"> + <div class="modal-dialog" role="document"> + <div class="modal-content rounded-6 shadow"> + <div class="modal-body p-5"> + <h2 class="fw-bold mb-0">What's new</h2> + + <ul class="d-grid gap-4 my-5 list-unstyled"> + <li class="d-flex gap-4"> + <svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> + <div> + <h5 class="mb-0">Grid view</h5> + Not into lists? Try the new grid view. + </div> + </li> + <li class="d-flex gap-4"> + <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg> + <div> + <h5 class="mb-0">Bookmarks</h5> + Save items you love for easy access later. + </div> + </li> + <li class="d-flex gap-4"> + <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg> + <div> + <h5 class="mb-0">Video embeds</h5> + Share videos wherever you go. + </div> + </li> + </ul> + <button type="button" class="btn btn-lg btn-primary mt-5 w-100" data-bs-dismiss="modal">Great, thanks!</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin"> + <div class="modal-dialog" role="document"> + <div class="modal-content rounded-5 shadow"> + <div class="modal-header p-5 pb-4 border-bottom-0"> + <!-- <h5 class="modal-title">Modal title</h5> --> + <h2 class="fw-bold mb-0">Sign up for free</h2> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + + <div class="modal-body p-5 pt-0"> + <form class=""> + <div class="form-floating mb-3"> + <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="[email protected]"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating mb-3"> + <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <button class="w-100 mb-2 btn btn-lg rounded-4 btn-primary" type="submit">Sign up</button> + <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + <hr class="my-4"> + <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> + <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-4" type="submit"> + <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> + Sign up with Twitter + </button> + <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-4" type="submit"> + <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg> + Sign up with Facebook + </button> + <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-4" type="submit"> + <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg> + Sign up with GitHub + </button> + </form> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> diff --git a/site/content/docs/5.0/examples/modals/modals.css b/site/content/docs/5.0/examples/modals/modals.css new file mode 100644 index 000000000..8fda8212a --- /dev/null +++ b/site/content/docs/5.0/examples/modals/modals.css @@ -0,0 +1,34 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: .75rem; } +.rounded-6 { border-radius: 1rem; } + +.modal-sheet .modal-dialog { + width: 380px; + transition: bottom .75s ease-in-out; +} +.modal-sheet .modal-footer { + padding-bottom: 2rem; +} + +.modal-alert .modal-dialog { + width: 380px; +} + +.border-right { border-right: 1px solid #eee; } + +.modal-tour .modal-dialog { + width: 380px; +} diff --git a/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css index 29e26b11b..97fe8399c 100644 --- a/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css +++ b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css @@ -62,6 +62,6 @@ body { color: #343a40; } -.text-white-50 { color: rgba(255, 255, 255, .5); } - -.bg-purple { background-color: #6f42c1; } +.bg-purple { + background-color: #6f42c1; +} diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index 48a5cbfad..3623ff180 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -40,7 +40,7 @@ extra_css: <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> - <li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li> + <li><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li> </ul> </div> </div> diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.0/getting-started/contribute.md index d0286375e..407081c22 100644 --- a/site/content/docs/5.0/getting-started/build-tools.md +++ b/site/content/docs/5.0/getting-started/contribute.md @@ -1,14 +1,15 @@ --- layout: docs -title: Build tools -description: Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more. +title: Contribute +description: Help develop Bootstrap with our documentation build scripts and tests. group: getting-started toc: true +aliases: "/docs/5.0/getting-started/build-tools/" --- ## Tooling setup -Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) for its build system. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more. +Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the documentation and compile source files. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) houses these scripts for compiling code, running tests, and more. These aren't intended for use outside our repository and documentation. To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock: diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.0/getting-started/download.md index e3c982d30..67bc295a9 100644 --- a/site/content/docs/5.0/getting-started/download.md +++ b/site/content/docs/5.0/getting-started/download.md @@ -21,10 +21,10 @@ This doesn't include documentation, source files, or any optional JavaScript dep Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling: -- [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files +- [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) for compiling Sass source files into CSS files - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing -Should you require our full set of [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. +Should you require our full set of [build tools]({{< docsref "/getting-started/contribute#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. <a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a> @@ -52,7 +52,7 @@ If you're using our compiled JavaScript and prefer to include Popper separately, ## Package managers -Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. +Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. ### npm diff --git a/site/content/docs/5.0/helpers/stacks.md b/site/content/docs/5.0/helpers/stacks.md new file mode 100644 index 000000000..a93a80046 --- /dev/null +++ b/site/content/docs/5.0/helpers/stacks.md @@ -0,0 +1,80 @@ +--- +layout: docs +title: Stacks +description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. +group: helpers +toc: true +--- + +Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/). + +## Vertical + +Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items. + +{{< example >}} +<div class="vstack gap-3"> + <div class="bg-light border">First item</div> + <div class="bg-light border">Second item</div> + <div class="bg-light border">Third item</div> +</div> +{{< /example >}} + +## Horizontal + +Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items. + +{{< example >}} +<div class="hstack gap-3"> + <div class="bg-light border">First item</div> + <div class="bg-light border">Second item</div> + <div class="bg-light border">Third item</div> +</div> +{{< /example >}} + +Using horizontal margin utilities like `.ms-auto` as spacers: + +{{< example >}} +<div class="hstack gap-3"> + <div class="bg-light border">First item</div> + <div class="bg-light border ms-auto">Second item</div> + <div class="bg-light border">Third item</div> +</div> +{{< /example >}} + +And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}): + +{{< example >}} +<div class="hstack gap-3"> + <div class="bg-light border">First item</div> + <div class="bg-light border ms-auto">Second item</div> + <div class="vr"></div> + <div class="bg-light border">Third item</div> +</div> +{{< /example >}} + +## Examples + +Use `.vstack` to stack buttons and other elements: + +{{< example >}} +<div class="vstack gap-2 col-md-5 mx-auto"> + <button type="button" class="btn btn-secondary">Save changes</button> + <button type="button" class="btn btn-outline-secondary">Cancel</button> +</div> +{{< /example >}} + +Create an inline form with `.hstack`: + +{{< example >}} +<div class="hstack gap-3"> + <input class="form-control me-auto" type="text" placeholder="Add your item here..."> + <button type="button" class="btn btn-secondary">Submit</button> + <div class="vr"></div> + <button type="button" class="btn btn-outline-danger">Reset</button> +</div> +{{< /example >}} + +## Sass + +{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} diff --git a/site/content/docs/5.0/helpers/vertical-rule.md b/site/content/docs/5.0/helpers/vertical-rule.md new file mode 100644 index 000000000..8d0d6141f --- /dev/null +++ b/site/content/docs/5.0/helpers/vertical-rule.md @@ -0,0 +1,44 @@ +--- +layout: docs +title: Vertical rule +description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element. +group: helpers +toc: true +--- + +## How it works + +Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements: + +- They're `1px` wide +- They have `min-height` of `1em` +- Their color is set via `currentColor` and `opacity` + +Customize them with additional styles as needed. + +## Example + +{{< example >}} +<div class="vr"></div> +{{< /example >}} + +Vertical rules scale their height in flex layouts: + +{{< example >}} +<div class="d-flex" style="height: 200px;"> + <div class="vr"></div> +</div> +{{< /example >}} + +## With stacks + +They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}): + +{{< example >}} +<div class="hstack gap-3"> + <div class="bg-light border">First item</div> + <div class="bg-light border ms-auto">Second item</div> + <div class="vr"></div> + <div class="bg-light border">Third item</div> +</div> +{{< /example >}} diff --git a/site/content/docs/5.0/layout/css-grid.md b/site/content/docs/5.0/layout/css-grid.md new file mode 100644 index 000000000..424167839 --- /dev/null +++ b/site/content/docs/5.0/layout/css-grid.md @@ -0,0 +1,266 @@ +--- +layout: docs +title: CSS Grid +description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets. +group: layout +toc: true +--- + +Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid. + +{{< callout warning >}} +**Heads up—our CSS Grid system is experimental and opt-in for v5.1.0!** We included it in our documentation's CSS to demonstrate it for you, but it's disabled by default. Keep reading to learn how to enable it in your projects. +{{< /callout >}} + +## How it works + +With Bootstrap 5, we've added the option to enable a separate grid system that's built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood. + +- **CSS Grid is opt-in.** Disable the default grid system by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`. Then, recompile your Sass. + +- **Replace instances of `.row` with `.grid`.** The `.grid` class sets `display: grid` and creates a `grid-template` that you build on with your HTML. + +- **Replace `.col-*` classes with `.g-col-*` classes.** This is because our CSS Grid columns use the `grid-column` property instead of `width`. + +- **Columns and gutter sizes are set via CSS variables.** Set these on the parent `.grid` and customize however you want, inline or in a stylesheet, with `--bs-columns` and `--bs-gap`. + +In the future, Bootstrap will likely shift to a hybrid solution as the `gap` property has achieved nearly full browser support for flexbox. + +## Key differences + +Compared to the default grid system: + +- Flex utilities don't affect the CSS Grid columns in the same way. + +- Gaps replaces gutters. The `gap` property replaces the horizontal `padding` from our default grid system and functions more like `margin`. + +- As such, unlike `.row`s, `.grid`s have no negative margins and margin utilities cannot be used to change the grid gutters. Grid gaps are applied horizontally and vertically by default. See the [customizing section](#customizing) for more details. + +- Inline and custom styles should be viewed as replacements for modifier classes (e.g., `style="--bs-columns: 3;"` vs `class="row-cols-3"`). + +- Nesting works similarly, but may require you to reset your column counts on each instance of a nested `.grid`. See the [nesting section](#nesting) for details. + +## Examples + +### Three columns + +Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div class="g-col-4">.g-col-4</div> + <div class="g-col-4">.g-col-4</div> + <div class="g-col-4">.g-col-4</div> +</div> +{{< /example >}} + +### Responsive + +Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> + <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> + <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div> +</div> +{{< /example >}} + +Compare that to this two column layout at all viewports. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> +</div> +{{< /example >}} + +## Wrapping + +Grid items automatically wrap to the next line when there's no more room horizontally. Note that the `gap` applies to horizontal and vertical gaps between grid items. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> + + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> +</div> +{{< /example >}} + +## Starts + +Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at `1` as `0` is an invalid value for these properties. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div> + <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div> +</div> +{{< /example >}} + +## Auto columns + +When there are no classes on the grid items (the immediate children of a `.grid`), each grid item will automatically be sized to one column. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> +</div> +{{< /example >}} + +This behavior can be mixed with grid column classes. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid"> + <div class="g-col-6">.g-col-6</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> + <div>1</div> +</div> +{{< /example >}} + +## Nesting + +Similar to our default grid system, our CSS Grid allows for easy nesting of `.grid`s. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below: + +- We override the default number of columns with a local CSS variable: `--bs-columns: 3`. +- In the first auto-column, the column count is inherited and each column is one-third of the available width. +- In the second auto-column, we've reset the column count on the nested `.grid` to 12 (our default). +- The third auto-column has no nested content. + +In practice this allows for more complex and custom layouts when compared to our default grid system. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-columns: 3;"> + <div> + First auto-column + <div class="grid"> + <div>Auto-column</div> + <div>Auto-column</div> + </div> + </div> + <div> + Second auto-column + <div class="grid" style="--bs-columns: 12;"> + <div class="g-col-6">6 of 12</div> + <div class="g-col-4">4 of 12</div> + <div class="g-col-2">2 of 12</div> + </div> + </div> + <div>Third auto-column</div> +</div> +{{< /example >}} + +## Customizing + +Customize the number of columns, the number of rows, and the width of the gaps with local CSS variables. + +{{< bs-table "table" >}} +| Variable | Fallback value | Description | +| --- | --- | --- | +| `--bs-rows` | `1` | The number of rows in your grid template | +| `--bs-columns` | `12` | The number of columns in your grid template | +| `--bs-gap` | `1.5rem` | The size of the gap between columns (vertical and horizontal) | +{{< /bs-table >}} + +These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`. + +### No grid classes + +Immediate children elements of `.grid` are grid items, so they'll be sized without explicitly adding a `.g-col` class. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-columns: 3;"> + <div>Auto-column</div> + <div>Auto-column</div> + <div>Auto-column</div> +</div> +{{< /example >}} + +### Columns and gaps + +Adjust the number of columns and the gap. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;"> + <div class="g-col-2">.g-col-2</div> + <div class="g-col-2">.g-col-2</div> +</div> +{{< /example >}} + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;"> + <div class="g-col-6">.g-col-6</div> + <div class="g-col-4">.g-col-4</div> +</div> +{{< /example >}} + +### Adding rows + +Adding more rows and changing the placement of columns: + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-rows: 3; --bs-columns: 3;"> + <div>Auto-column</div> + <div class="g-start-2" style="grid-row: 2">Auto-column</div> + <div class="g-start-3" style="grid-row: 3">Auto-column</div> +</div> +{{< /example >}} + +### Gaps + +Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="row-gap: 0;"> + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> + + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> +</div> +{{< /example >}} + +Because of that, you can have different vertical and horizontal `gap`s, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for `gap`, or with our `--bs-gap` CSS variable. + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-gap: .25rem 1rem;"> + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> + + <div class="g-col-6">.g-col-6</div> + <div class="g-col-6">.g-col-6</div> +</div> +{{< /example >}} + +## Sass + +One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, `$grid-columns` and `$grid-gutter-width`. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here: + +- Modify those default Sass variables and recompile your CSS. +- Use inline or custom styles to augment the provided classes. + +For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`). + +{{< example class="bd-example-cssgrid" >}} +<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;"> + <div style="grid-column: span 14;">14 columns</div> + <div class="g-col-4">.g-col-4</div> +</div> +{{< /example >}} diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index afa3818a2..05fc1bd65 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -299,9 +299,9 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of ### Row columns -Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a default for contained columns. With `.row-cols-auto` you can give the columns their natural width. +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width. -Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level. +Use these row columns classes to quickly create basic grid layouts or to control your card layouts. {{< example class="bd-example-row" >}} <div class="container"> @@ -369,25 +369,6 @@ Use these row columns classes to quickly create basic grid layouts or to control </div> {{< /example >}} -{{< example class="bd-example-row" >}} -<div class="container"> - <div class="row row-cols-2 row-cols-lg-3"> - <div class="col">Column</div> - <div class="col">Column</div> - <div class="col">Column</div> - <div class="col">Column</div> - <div class="col">Column</div> - <div class="col">Column</div> - <div class="col-4 col-lg-2">Column</div> - <div class="col-4 col-lg-2">Column</div> - <div class="col-4 col-lg-2">Column</div> - <div class="col-4 col-lg-2">Column</div> - <div class="col-4 col-lg-2">Column</div> - <div class="col-4 col-lg-2">Column</div> - </div> -</div> -{{< /example >}} - You can also use the accompanying Sass mixin, `row-cols()`: ```scss @@ -458,7 +439,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS @include make-col(); @include make-col($size, $columns: $grid-columns); -// Get fancy by offsetting, or changing the sort order +// Offset with margins @include make-col-offset($size, $columns: $grid-columns); ``` diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index e6db422c4..226c3d21a 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -131,6 +131,8 @@ toc: true - <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) +- <span class="badge bg-danger">Breaking</span> `<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`). + - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`. - Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877) diff --git a/site/content/docs/5.0/utilities/opacity.md b/site/content/docs/5.0/utilities/opacity.md new file mode 100644 index 000000000..a2fdc3807 --- /dev/null +++ b/site/content/docs/5.0/utilities/opacity.md @@ -0,0 +1,30 @@ +--- +layout: docs +title: Opacity +description: Control the opacity of elements. +group: utilities +--- + +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. + +<div class="bd-example d-sm-flex"> + <div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div> + <div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div> + <div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div> + <div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div> +</div> + +```html +<div class="opacity-100">...</div> +<div class="opacity-75">...</div> +<div class="opacity-50">...</div> +<div class="opacity-25">...</div> +``` + +### Utilities API + +Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-opacity" file="scss/_utilities.scss" >}} diff --git a/site/data/docs-versions.yml b/site/data/docs-versions.yml index 1ffad03ae..b30e10047 100644 --- a/site/data/docs-versions.yml +++ b/site/data/docs-versions.yml @@ -48,6 +48,6 @@ - group: v5.x baseurl: "https://getbootstrap.com/docs" - description: "Current major release. Last update was v5.0.1." + description: "Current major release. Last update was v5.0.2." versions: - v: "5.0" diff --git a/site/data/examples.yml b/site/data/examples.yml index 9898363d6..6d6419d21 100644 --- a/site/data/examples.yml +++ b/site/data/examples.yml @@ -9,6 +9,14 @@ description: "Explain the features, benefits, or other details in your marketing content." - name: Sidebars description: "Common navigation patterns ideal for offcanvas or multi-column layouts." + - name: Footers + description: "Finish every page strong with an awesome footer, big or small." + - name: Dropdowns + description: "Enhance your dropdowns with filters, icons, custom styles, and more." + - name: List groups + description: "Extend list groups with utilities and custom styles for any content." + - name: Modals + description: "Transform modals to serve any purpose, from feature tours to dialogs." - category: Custom Components description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." diff --git a/site/data/icons.yml b/site/data/icons.yml index f97350ce4..02727fc2f 100644 --- a/site/data/icons.yml +++ b/site/data/icons.yml @@ -9,6 +9,8 @@ preferred: more: - name: Bytesize website: https://github.com/danklammer/bytesize-icons + - name: CoreUI Icons + website: https://icons.coreui.io/ - name: Google Material icons website: https://material.io/resources/icons/ - name: Ionicons @@ -21,5 +23,5 @@ more: website: https://icons8.com/ - name: icofont website: https://icofont.com/ - - name: CoreUI Icons - website: https://icons.coreui.io/ + - name: Octicons + website: https://primer.style/octicons/ diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 4e43255a3..4bfdcc0ab 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -8,12 +8,12 @@ - title: Contents - title: Browsers & devices - title: JavaScript - - title: Build tools - title: Webpack - title: Parcel - title: Accessibility - title: RFS - title: RTL + - title: Contribute - title: Customize pages: @@ -34,6 +34,7 @@ - title: Gutters - title: Utilities - title: Z-index + - title: CSS Grid - title: Content pages: @@ -87,9 +88,11 @@ - title: Colored links - title: Ratio - title: Position + - title: Stacks - title: Visually hidden - title: Stretched link - title: Text truncation + - title: Vertical rule - title: Utilities pages: @@ -101,6 +104,7 @@ - title: Flex - title: Float - title: Interactions + - title: Opacity - title: Overflow - title: Position - title: Shadows diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html index 5e0f88229..e3d0f13e4 100644 --- a/site/layouts/partials/footer.html +++ b/site/layouts/partials/footer.html @@ -18,7 +18,7 @@ <li class="mb-2"><a href="/">Home</a></li> <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/">Docs</a></li> <li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li> - <li class="mb-2"><a href="{{ .Site.Params.opencollective }}">Themes</a></li> + <li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li> <li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li> </ul> </div> diff --git a/site/layouts/shortcodes/js-dismiss.html b/site/layouts/shortcodes/js-dismiss.html new file mode 100644 index 000000000..45d72d0eb --- /dev/null +++ b/site/layouts/shortcodes/js-dismiss.html @@ -0,0 +1,15 @@ +{{- /* Usage: js-dismiss "ComponentName" */ -}} + +{{- $name := .Get 0 -}} + +Dismissal can be achieved with the `data` attribute on a button **within the {{ $name }}** as demonstrated below: + +```html +<button type="button" class="btn-close" data-bs-dismiss="{{ $name }}" aria-label="Close"></button> +``` + +or on a button **outside the {{ $name }}** using the `data-bs-target` as demonstrated below: + +```html +<button type="button" class="btn-close" data-bs-dismiss="{{ $name }}" data-bs-target="#my-{{ $name }}" aria-label="Close"></button> +``` diff --git a/site/static/docs/5.0/assets/img/examples/[email protected] b/site/static/docs/5.0/assets/img/examples/[email protected] Binary files differindex 9d20fb2ed..eacd82e98 100644 --- a/site/static/docs/5.0/assets/img/examples/[email protected] +++ b/site/static/docs/5.0/assets/img/examples/[email protected] diff --git a/site/static/docs/5.0/assets/img/examples/dropdowns.png b/site/static/docs/5.0/assets/img/examples/dropdowns.png Binary files differnew file mode 100644 index 000000000..64fc8f2f0 --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/dropdowns.png diff --git a/site/static/docs/5.0/assets/img/examples/[email protected] b/site/static/docs/5.0/assets/img/examples/[email protected] Binary files differnew file mode 100644 index 000000000..35fecb49a --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/[email protected] diff --git a/site/static/docs/5.0/assets/img/examples/footers.png b/site/static/docs/5.0/assets/img/examples/footers.png Binary files differnew file mode 100644 index 000000000..ac20b7f5d --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/footers.png diff --git a/site/static/docs/5.0/assets/img/examples/[email protected] b/site/static/docs/5.0/assets/img/examples/[email protected] Binary files differnew file mode 100644 index 000000000..a9a07a2cf --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/[email protected] diff --git a/site/static/docs/5.0/assets/img/examples/list-groups.png b/site/static/docs/5.0/assets/img/examples/list-groups.png Binary files differnew file mode 100644 index 000000000..9f49a54ad --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/list-groups.png diff --git a/site/static/docs/5.0/assets/img/examples/[email protected] b/site/static/docs/5.0/assets/img/examples/[email protected] Binary files differnew file mode 100644 index 000000000..575d19818 --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/[email protected] diff --git a/site/static/docs/5.0/assets/img/examples/modals.png b/site/static/docs/5.0/assets/img/examples/modals.png Binary files differnew file mode 100644 index 000000000..0c8876a67 --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/modals.png diff --git a/site/static/docs/5.0/assets/img/examples/[email protected] b/site/static/docs/5.0/assets/img/examples/[email protected] Binary files differnew file mode 100644 index 000000000..c18990ace --- /dev/null +++ b/site/static/docs/5.0/assets/img/examples/[email protected] diff --git a/site/static/docs/5.0/assets/img/examples/[email protected] b/site/static/docs/5.0/assets/img/examples/[email protected] Binary files differindex 9ddac54ea..959d808a9 100644 --- a/site/static/docs/5.0/assets/img/examples/[email protected] +++ b/site/static/docs/5.0/assets/img/examples/[email protected] |
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/cover@2x.png?h=main-fod-simpler-table-structure&id=62edf07d7491684fe67a9c1e9439ed2bd10ca741){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/cover@2x.png?h=main-fod-simpler-table-structure&id=ef5336373fc2431b3d1d37cde85cd262210a1dc6){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/dropdowns@2x.png?h=main-fod-simpler-table-structure&id=ef5336373fc2431b3d1d37cde85cd262210a1dc6){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/footers@2x.png?h=main-fod-simpler-table-structure&id=ef5336373fc2431b3d1d37cde85cd262210a1dc6){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/list-groups@2x.png?h=main-fod-simpler-table-structure&id=ef5336373fc2431b3d1d37cde85cd262210a1dc6){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/modals@2x.png?h=main-fod-simpler-table-structure&id=ef5336373fc2431b3d1d37cde85cd262210a1dc6){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/pricing@2x.png?h=main-fod-simpler-table-structure&id=62edf07d7491684fe67a9c1e9439ed2bd10ca741){kind=link}
![site/static/docs/5.0/assets/img/examples/[email protected]](/bootstrap/tree/site/static/docs/5.0/assets/img/examples/pricing@2x.png?h=main-fod-simpler-table-structure&id=ef5336373fc2431b3d1d37cde85cd262210a1dc6){kind=link}