toc:
min: 2
- max: 6
+ max: 3
<h1>Hello, world!</h1>
<div class="mt-5">
- <button type="button" class="btn btn-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+ <button type="button" class="btn-outline theme-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</p>
<p>
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-secondary">Secondary</button>
+ <button type="button" class="btn-solid theme-danger">Danger</button>
+ <button type="button" class="btn-solid theme-secondary">Secondary</button>
</p>
</div>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p>
- <button type="button" class="btn btn-danger">Take this action</button>
- <button type="button" class="btn btn-primary">Or do this</button>
+ <button type="button" class="btn-solid theme-danger">Take this action</button>
+ <button type="button" class="btn-solid theme-primary">Or do this</button>
</p>
</div>
<div class="container">
<h1>Button <small>Bootstrap Visual Test</small></h1>
- <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
<p>Navigate to the checkboxes with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>), and ensure that <kbd>Space</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>Space</kbd> toggles the checkbox again.</p>
<div class="btn-group" data-bs-toggle="buttons">
- <label class="btn btn-primary active">
+ <label class="btn-solid theme-primary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
- <label class="btn btn-primary">
+ <label class="btn-solid theme-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
- <label class="btn btn-primary">
+ <label class="btn-solid theme-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<p>Navigate to the radio button group with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>Tab</kbd> or "backwards" using <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
<div class="btn-group" data-bs-toggle="buttons">
- <label class="btn btn-primary active">
+ <label class="btn-solid theme-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
- <label class="btn btn-primary">
+ <label class="btn-solid theme-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
- <label class="btn btn-primary">
+ <label class="btn-solid theme-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
<label for="jsDatepicker" class="form-label">Initialized via JavaScript</label>
<input type="text" class="form-control" id="jsDatepicker" placeholder="Click to select">
<div class="mt-2">
- <button type="button" class="btn btn-primary btn-sm" id="showBtn">Show</button>
- <button type="button" class="btn btn-secondary btn-sm" id="hideBtn">Hide</button>
- <button type="button" class="btn btn-info btn-sm" id="getDatesBtn">Get Dates</button>
+ <button type="button" class="btn-solid theme-primary btn-sm" id="showBtn">Show</button>
+ <button type="button" class="btn-solid theme-secondary btn-sm" id="hideBtn">Hide</button>
+ <button type="button" class="btn-solid theme-info btn-sm" id="getDatesBtn">Get Dates</button>
</div>
<div id="selectedDatesOutput" class="mt-2 text-body-secondary"></div>
</div>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a dialog</h4>
- <p>This <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
+ <p>This <button type="button" class="btn-solid theme-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
<h4>Tooltips in a dialog</h4>
<p><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
<p>Press Escape or click the close button to dismiss.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
<p>You must use the close button.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
<p>Notice how the backdrop stays visible during the swap.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to Second Dialog</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to Second Dialog</button>
</div>
</dialog>
<p>You can swap back to the first dialog or close this one.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to First Dialog</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to First Dialog</button>
</div>
</dialog>
<p>Try clicking the buttons on the page behind this dialog!</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
<div class="d-flex flex-column gap-3">
<div>
- <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="dialog" data-bs-target="#myDialog">
+ <button type="button" class="btn-solid theme-primary btn-lg" data-bs-toggle="dialog" data-bs-target="#myDialog">
Launch demo dialog
</button>
</div>
<div>
- <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
+ <button type="button" class="btn-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
Launch static backdrop dialog
</button>
</div>
<div>
- <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#noKeyboardDialog" data-bs-keyboard="false">
+ <button type="button" class="btn-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#noKeyboardDialog" data-bs-keyboard="false">
Launch no-keyboard dialog
</button>
</div>
<div>
- <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
+ <button type="button" class="btn-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
Launch swap dialog demo
</button>
</div>
<div>
- <button type="button" class="btn btn-info btn-lg" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
+ <button type="button" class="btn-solid theme-info btn-lg" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
Launch non-modal dialog
</button>
<small class="text-muted">(uses <code>show()</code> instead of <code>showModal()</code>)</small>
</div>
<div>
- <button type="button" class="btn btn-secondary btn-lg" id="tall-toggle">
+ <button type="button" class="btn-solid theme-secondary btn-lg" id="tall-toggle">
Toggle tall <body> content
</button>
</div>
<div>
- <button type="button" class="btn btn-secondary btn-lg" id="jsOpen">
+ <button type="button" class="btn-solid theme-secondary btn-lg" id="jsOpen">
Open via JavaScript
</button>
</div>
<div class="demo-box">
<div class="dropdown">
- <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown with Submenu
</button>
<ul class="dropdown-menu">
<div class="demo-box">
<div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Multi-level Menu
</button>
<ul class="dropdown-menu">
<div class="demo-box">
<div class="dropdown">
- <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Multiple Submenus
</button>
<ul class="dropdown-menu">
<div class="demo-box" style="justify-content: space-between;">
<div class="dropdown">
- <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Left Side (opens right)
</button>
<ul class="dropdown-menu">
</div>
<div class="dropdown">
- <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Right Side (flips left)
</button>
<ul class="dropdown-menu">
<div class="demo-box demo-box-center" style="min-height: 200px;">
<div class="btn-group dropup">
- <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup Menu
</button>
<ul class="dropdown-menu">
<div class="demo-box">
<div class="dropdown">
- <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu with Icons
</button>
<ul class="dropdown-menu">
<div class="demo-box">
<div class="dropdown">
- <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Test on Mobile
</button>
<ul class="dropdown-menu">
<div class="demo-box">
<div class="dropdown">
- <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu with Disabled
</button>
<ul class="dropdown-menu">
<div class="row">
<div class="col-sm-12 mt-4">
<div class="dropdown">
- <button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<input id="textField" type="text">
</div>
</div>
<div class="btn-group dropup">
- <button type="button" class="btn btn-secondary">Dropup split</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-secondary">Dropup split</button>
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Dropup split</span>
</button>
<ul class="dropdown-menu">
<div class="col-sm-12 mt-4">
<div class="btn-group dropup">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</div>
<div class="btn-group">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
This dropdown's menu is end-aligned
</button>
<div class="dropdown-menu dropdown-menu-end">
<div class="col-sm-12 mt-4">
<div class="btn-group dropup">
- <a href="#" class="btn btn-secondary">Dropup split align end</a>
- <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="btn-solid theme-secondary">Dropup split align end</a>
+ <button type="button" id="dropdown-page-subheader-button-3" class="btn-solid theme-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
</div>
</div>
<div class="btn-group dropup">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
<div class="dropdown-menu dropdown-menu-end">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<div class="col-sm-12 mt-4">
<div class="btn-group dropend">
- <a href="#" class="btn btn-secondary">Dropend split</a>
- <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="btn-solid theme-secondary">Dropend split</a>
+ <button type="button" id="dropdown-page-subheader-button-4" class="btn-solid theme-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu">
</div>
</div>
<div class="btn-group dropend">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<div class="dropdown-menu">
</div>
<!-- dropstart -->
<div class="btn-group dropstart">
- <a href="#" class="btn btn-secondary">Dropstart split</a>
- <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <a href="#" class="btn-solid theme-secondary">Dropstart split</a>
+ <button type="button" id="dropdown-page-subheader-button-5" class="btn-solid theme-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu">
</div>
</div>
<div class="btn-group dropstart">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<div class="dropdown-menu">
<div class="row">
<div class="col-sm-3 mt-4">
<div class="btn-group dropdown">
- <button type="button" class="btn btn-secondary">Dropdown reference</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+ <button type="button" class="btn-solid theme-secondary">Dropdown reference</button>
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Dropdown split</span>
</button>
<ul class="dropdown-menu">
</div>
<div class="col-sm-3 mt-4">
<div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Dropdown menu with static display
</button>
<ul class="dropdown-menu">
<div class="container">
<h1>Popover <small>Bootstrap Visual Test</small></h1>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on auto
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Default placement was on top but not enough place">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Default placement was on top but not enough place">
Popover on top
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on end
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on start
</button>
</div>
<div class="row mt-3">
<div class="col-md-12">
- <button id="btnShowToast" class="btn btn-primary">Show toast</button>
- <button id="btnHideToast" class="btn btn-primary">Hide toast</button>
+ <button id="btnShowToast" class="btn-solid theme-primary">Show toast</button>
+ <button id="btnHideToast" class="btn-solid theme-primary">Hide toast</button>
</div>
</div>
</div>
<div class="row">
<p>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="auto" title="Tooltip on auto">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="auto" title="Tooltip on auto">
Tooltip on auto
</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on end
</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on start
</button>
</p>
</div>
<div class="row">
<p>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with container (selector)" data-bs-container="#customContainer">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with container (selector)" data-bs-container="#customContainer">
Tooltip with container (selector)
</button>
- <button id="tooltipElement" type="button" class="btn btn-secondary" data-bs-placement="left" title="Tooltip with container (element)">
+ <button id="tooltipElement" type="button" class="btn-solid theme-secondary" data-bs-placement="left" title="Tooltip with container (element)">
Tooltip with container (element)
</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
- <button type="button" class="btn
btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-container="<img src=1 onerror=alert(123)>">
+ <button type="button" class="btn
-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-container="<img src=1 onerror=alert(123)>">
Tooltip with XSS
</button>
</p>
<div class="h4">Test Selector triggered tooltips</div>
<div id="wrapperTriggeredBySelector">
<div class="py-2 selectorButtonsBlock">
- <button type="button" class="btn btn-secondary bs-dynamic-tooltip" title="random title">Using title</button>
- <button type="button" class="btn btn-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
+ <button type="button" class="btn-solid theme-secondary bs-dynamic-tooltip" title="random title">Using title</button>
+ <button type="button" class="btn-solid theme-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
</div>
</div>
<div class="mt-3">
- <button type="button" class="btn btn-primary" onclick="duplicateButtons()">Duplicate above two buttons</button>
+ <button type="button" class="btn-solid theme-primary" onclick="duplicateButtons()">Duplicate above two buttons</button>
</div>
</div>
</div>
if (typeof document.body.attachShadow === 'function') {
const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
shadowRoot.innerHTML =
- '<button id="firstShadowTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' +
+ '<button id="firstShadowTooltip" type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' +
' Tooltip on top in a shadow dom' +
'</button>' +
- '<button id="secondShadowTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' +
+ '<button id="secondShadowTooltip" type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' +
' Tooltip on top in a shadow dom' +
'</button>'
// Base styles
//
-$btn-variant-selectors: () !default;
+// scss-docs-start btn-variant-selectors
+$btn-variant-selectors: (string.unquote(".btn"), string.unquote(".btn-link"), string.unquote(".btn-icon")) !default;
@each $variant, $config in $button-variants {
$btn-variant-selectors: list.append($btn-variant-selectors, string.unquote(".btn-#{$variant}"), comma);
}
+// scss-docs-end btn-variant-selectors
@layer components {
- .btn,
#{$btn-variant-selectors} {
@include tokens($button-tokens);
<h1 class="fw-light">Album example</h1>
<p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
- <a href="#" class="btn btn-primary my-2">Main call to action</a>
- <a href="#" class="btn btn-secondary my-2">Secondary action</a>
+ <a href="#" class="btn-solid theme-primary my-2">Main call to action</a>
+ <a href="#" class="btn-solid theme-secondary my-2">Secondary action</a>
</p>
</div>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">View</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
<a class="link-secondary" href="#" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
- <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
+ <a class="btn-outline theme-secondary btn-sm" href="#">Sign up</a>
</div>
</div>
</header>
</article>
<nav class="blog-pagination" aria-label="Pagination">
- <a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
- <a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
+ <a class="btn-outline theme-primary rounded-pill" href="#">Older</a>
+ <a class="btn-outline theme-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
</nav>
</div>
</svg>
<div class="d-flex gap-2 justify-content-center py-5">
- <button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
- <button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
- <button class="btn btn-success rounded-pill px-3" type="button">Success</button>
- <button class="btn btn-danger rounded-pill px-3" type="button">Danger</button>
- <button class="btn btn-warning rounded-pill px-3" type="button">Warning</button>
- <button class="btn btn-info rounded-pill px-3" type="button">Info</button>
- <button class="btn btn-light rounded-pill px-3" type="button">Light</button>
- <button class="btn btn-dark rounded-pill px-3" type="button">Dark</button>
- <button class="btn btn-link rounded-pill px-3" type="button">Link</button>
+ <button class="btn-solid theme-primary rounded-pill px-3" type="button">Primary</button>
+ <button class="btn-solid theme-secondary rounded-pill px-3" type="button">Secondary</button>
+ <button class="btn-solid theme-accent rounded-pill px-3" type="button">Accent</button>
+ <button class="btn-solid theme-success rounded-pill px-3" type="button">Success</button>
+ <button class="btn-solid theme-danger rounded-pill px-3" type="button">Danger</button>
+ <button class="btn-solid theme-warning rounded-pill px-3" type="button">Warning</button>
+ <button class="btn-solid theme-info rounded-pill px-3" type="button">Info</button>
+ <button class="btn-solid theme-light rounded-pill px-3" type="button">Light</button>
+ <button class="btn-solid theme-inverse rounded-pill px-3" type="button">Dark</button>
+ <button class="btn btn-link" type="button">Link</button>
</div>
<div class="b-example-divider"></div>
<div class="col-lg-6 col-2xl-4 my-5 mx-auto">
<div class="d-grid gap-2">
- <button class="btn btn-outline-secondary" type="button">Secondary action</button>
- <button class="btn btn-primary" type="button">Primary action</button>
+ <button class="btn-solid theme-outline-secondary" type="button">Secondary action</button>
+ <button class="btn-solid theme-primary" type="button">Primary action</button>
</div>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
- <button class="btn btn-primary d-inline-flex align-items-center" type="button">
+ <button class="btn-solid theme-primary" type="button">
Primary icon
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
- <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
+ <button class="btn-solid theme-outline-secondary" type="button">
Secondary icon
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center py-5">
- <button class="btn btn-primary" type="button" disabled>
+ <button class="btn-solid theme-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
- <button class="btn btn-primary" type="button" disabled>
+ <button class="btn-solid theme-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
<div class="b-example-divider"></div>
<div class="d-flex gap-2 justify-content-center pt-5 pb-4">
- <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
+ <button class="btn-icon btn-solid theme-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
- <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
+ <button class="btn-icon btn-solid theme-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
</div>
<div class="d-flex gap-2 justify-content-center pb-5">
- <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
+ <button class="btn-icon btn-solid theme-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24" aria-hidden="true"><use href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
- <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
+ <button class="btn-icon btn-solid theme-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24" aria-hidden="true"><use href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span>
</button>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
<div class="carousel-caption text-start">
<h1>Example headline.</h1>
<p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
- <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+ <p><a class="btn-solid theme-primary btn-lg" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Some representative placeholder content for the second slide of the carousel.</p>
- <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
+ <p><a class="btn-solid theme-primary btn-lg" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-caption text-end">
<h1>One more for good measure.</h1>
<p>Some representative placeholder content for the third slide of this carousel.</p>
- <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
+ <p><a class="btn-solid theme-primary btn-lg" href="#">Browse gallery</a></p>
</div>
</div>
</div>
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
<h2 class="fw-normal">Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
- <p><a class="btn btn-secondary" href="#">View details »</a></p>
+ <p><a class="btn-solid theme-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
<h2 class="fw-normal">Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
- <p><a class="btn btn-secondary" href="#">View details »</a></p>
+ <p><a class="btn-solid theme-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<Placeholder width="140" height="140" background="var(--bs-secondary-color)" text={false} class="rounded-circle" />
<h2 class="fw-normal">Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
- <p><a class="btn btn-secondary" href="#">View details »</a></p>
+ <p><a class="btn-solid theme-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
</div>
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</form>`} />
</div>
</article>
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange">
</div>
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</fieldset>
</form>`} />
</div>
</div>
</div>
<div class="col-12">
- <button class="btn btn-primary" type="submit">Submit form</button>
+ <button class="btn-solid theme-primary" type="submit">Submit form</button>
</div>
</form>
`} />
<div>
<Example showMarkup={false} code={[
...getData('theme-colors').map((themeColor) => `
- <button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>
+ <button type="button" class="btn-solid theme-${themeColor.name}">${themeColor.title}</button>
`),
- `<button type="button" class="btn btn-link">Link</button>`]} />
+ `<button type="button" class="btn-solid theme-link">Link</button>`]} />
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
- <button type="button" class="btn btn-outline-${themeColor.name}">${themeColor.title}</button>
+ <button type="button" class="btn-solid theme-outline-${themeColor.name}">${themeColor.title}</button>
`)} />
<Example showMarkup={false} code={`
- <button type="button" class="btn btn-primary btn-sm">Small button</button>
- <button type="button" class="btn btn-primary">Standard button</button>
- <button type="button" class="btn btn-primary btn-lg">Large button</button>
+ <button type="button" class="btn-solid theme-primary btn-sm">Small button</button>
+ <button type="button" class="btn-solid theme-primary">Standard button</button>
+ <button type="button" class="btn-solid theme-primary btn-lg">Large button</button>
`} />
</div>
</article>
<Example showMarkup={false} code={`
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
- <button type="button" class="btn btn-secondary">1</button>
- <button type="button" class="btn btn-secondary">2</button>
- <button type="button" class="btn btn-secondary">3</button>
- <button type="button" class="btn btn-secondary">4</button>
+ <button type="button" class="btn-solid theme-secondary">1</button>
+ <button type="button" class="btn-solid theme-secondary">2</button>
+ <button type="button" class="btn-solid theme-secondary">3</button>
+ <button type="button" class="btn-solid theme-secondary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
- <button type="button" class="btn btn-secondary">5</button>
- <button type="button" class="btn btn-secondary">6</button>
- <button type="button" class="btn btn-secondary">7</button>
+ <button type="button" class="btn-solid theme-secondary">5</button>
+ <button type="button" class="btn-solid theme-secondary">6</button>
+ <button type="button" class="btn-solid theme-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
- <button type="button" class="btn btn-secondary">8</button>
+ <button type="button" class="btn-solid theme-secondary">8</button>
</div>
</div>
`} />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
<div>
<Example showMarkup={false} code={`
- <button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
Launch demo dialog
</button>
- <button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog">
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog">
Launch static backdrop dialog
</button>
`} />
<Example showMarkup={false} code={`
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
<div class="dropdown">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="dropdown">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<Example showMarkup={false} code={`
<div class="btn-group">
- <button type="button" class="btn btn-primary">Primary</button>
- <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-primary">Primary</button>
+ <button type="button" class="btn-solid theme-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-secondary">Secondary</button>
- <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-secondary">Secondary</button>
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-success">Success</button>
+ <button type="button" class="btn-solid theme-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-info">Info</button>
+ <button type="button" class="btn-solid theme-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-warning">Warning</button>
+ <button type="button" class="btn-solid theme-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-danger">Danger</button>
+ <button type="button" class="btn-solid theme-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<Example showMarkup={false} code={`
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
<div class="dropend">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropend button
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="dropup">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropup button
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="dropstart">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart button
</button>
<ul class="dropdown-menu">
<Example showMarkup={false} code={`
<div class="btn-group">
<div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
End-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-dark" type="submit">Search</button>
+ <button class="btn-solid theme-outline-dark" type="submit">Search</button>
</form>
</div>
</div>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-light" type="submit">Search</button>
+ <button class="btn-solid theme-outline-light" type="submit">Search</button>
</form>
</div>
</div>
<div>
<Example showMarkup={false} code={`
- <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+ <button type="button" class="btn-solid theme-danger btn-lg" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
`} />
<Example showMarkup={false} code={`
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on end
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn-solid theme-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on start
</button>
`} />
<div>
<Example showMarkup={false} class="tooltip-demo" code={`
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button>
- <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on end">Tooltip on end</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on start">Tooltip on start</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
`} />
</div>
</article>
<p>This is a native dialog element using Bootstrap's Dialog component.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
<p>I will not close if you click outside of me. Use the close button or press Escape.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-primary">Understood</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Understood</button>
</div>
</dialog>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
- <button type="submit" class="btn btn-secondary">Redeem</button>
+ <button type="submit" class="btn-solid theme-secondary">Redeem</button>
</div>
</form>
</div>
<hr class="my-4">
- <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
+ <button class="w-100 btn-solid theme-primary btn-lg" type="submit">Continue to checkout</button>
</form>
</div>
</div>
<h1>Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
- <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
+ <a href="#" class="btn-solid theme-inverse btn-lg fw-bold">Learn more</a>
</p>
</main>
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
- <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
- <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Share</button>
+ <button type="button" class="btn-outline theme-secondary btn-sm">Export</button>
</div>
- <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
+ <button type="button" class="btn-outline theme-secondary btn-sm dropdown-toggle">
<svg class="bi" aria-hidden="true"><use href="#calendar3"/></svg>
This week
</button>
<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="dialog-footer flex-column border-0 pt-0">
- <button type="button" class="btn btn-solid theme-primary w-100">Save changes</button>
- <button type="button" class="btn btn-solid theme-secondary w-100">Close</button>
+ <button type="button" class="btn-solid theme-primary w-100">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary w-100">Close</button>
</div>
</dialog>
</div>
</ul>
</div>
<div class="dialog-footer border-0 pt-3 pb-4">
- <button type="button" class="btn btn-solid theme-primary w-100 py-2">Great, thanks!</button>
+ <button type="button" class="btn-solid theme-primary w-100 py-2">Great, thanks!</button>
</div>
</dialog>
</div>
<input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
- <button class="btn btn-solid theme-primary w-100 py-2 mb-2" type="submit">Sign up</button>
+ <button class="btn-solid theme-primary w-100 py-2 mb-2" type="submit">Sign up</button>
<small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
<hr class="my-4">
<h6 class="fw-bold mb-3">Or use a third-party</h6>
- <button type="button" class="btn btn-outline theme-inverse w-100 py-2 mb-2">
+ <button type="button" class="btn-outline theme-inverse w-100 py-2 mb-2">
<svg class="bi" width="16" height="16"><use href="#google"/></svg>
Sign up with Google
</button>
- <button type="button" class="btn btn-outline theme-facebook w-100 py-2 mb-2">
+ <button type="button" class="btn-outline theme-primary w-100 py-2 mb-2">
<svg class="bi" width="16" height="16" fill="currentColor"><use href="#facebook"/></svg>
Sign up with Facebook
</button>
- <button type="button" class="btn btn-outline theme-success w-100 py-2">
+ <button type="button" class="btn-outline theme-success w-100 py-2">
<svg class="bi" width="16" height="16"><use href="#github"/></svg>
Sign up with GitHub
</button>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="btn btn-primary">
+ <a href="#" class="btn-solid theme-primary">
Primary button
</a>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="btn btn-primary">
+ <a href="#" class="btn-solid theme-primary">
Primary button
</a>
</div>
<div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="btn btn-primary">
+ <a href="#" class="btn-solid theme-primary">
Primary button
</a>
</div>
<div class="col d-flex flex-column align-items-start gap-2">
<h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
- <a href="#" class="btn btn-primary btn-lg">Primary button</a>
+ <a href="#" class="btn-solid theme-primary btn-lg">Primary button</a>
</div>
<div class="col">
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address">
- <button class="btn btn-primary" type="button">Subscribe</button>
+ <button class="btn-solid theme-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</ul>
<div class="col-md-3 text-end">
- <button type="button" class="btn btn-outline-primary me-2">Login</button>
- <button type="button" class="btn btn-primary">Sign-up</button>
+ <button type="button" class="btn-outline theme-primary me-2">Login</button>
+ <button type="button" class="btn-solid theme-primary">Sign up</button>
</div>
</header>
</div>
<div class="b-example-divider"></div>
- <header class="p-3 text-bg-dark">
+ <header class="p-3 bg-body fg-body" data-bs-theme="dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
- <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
+ <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>
<div class="text-end">
- <button type="button" class="btn btn-outline-light me-2">Login</button>
- <button type="button" class="btn btn-warning">Sign-up</button>
+ <button type="button" class="btn-outline theme-secondary me-2">Login</button>
+ <button type="button" class="btn-solid theme-warning">Sign up</button>
</div>
</div>
</div>
</form>
<div class="text-end">
- <button type="button" class="btn btn-light text-dark me-2">Login</button>
- <button type="button" class="btn btn-primary">Sign-up</button>
+ <button type="button" class="btn-solid theme-secondary me-2">Login</button>
+ <button type="button" class="btn-solid theme-primary">Sign-up</button>
</div>
</div>
</div>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
- <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
- <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+ <button type="button" class="btn-solid theme-primary btn-lg px-4">Primary button</button>
+ <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
</div>
</div>
</div>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
- <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
- <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+ <button type="button" class="btn-solid theme-primary btn-lg px-4 me-sm-3">Primary button</button>
+ <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh;">
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
- <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
- <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+ <button type="button" class="btn-solid theme-primary btn-lg px-4 me-md-2">Primary</button>
+ <button type="button" class="btn-outline theme-secondary btn-lg px-4">Default</button>
</div>
</div>
</div>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
- <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
+ <button class="w-100 btn-solid theme-primary btn-lg" type="submit">Sign up</button>
<hr class="my-4">
<small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
</form>
<h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
- <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
- <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+ <button type="button" class="btn-solid theme-primary btn-lg px-4 me-md-2">Primary</button>
+ <button type="button" class="btn-outline theme-secondary btn-lg px-4">Default</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
- <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
- <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
+ <button type="button" class="btn-outline theme-info btn-lg px-4 me-sm-3">Custom button</button>
+ <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>
</div>
</div>
</div>
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
- <button class="btn btn-primary btn-lg" type="button">Example button</button>
+ <button class="btn-solid theme-primary btn-lg" type="button">Example button</button>
</div>
</div>
<div class="h-100 p-5 text-bg-dark rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
- <button class="btn btn-outline-light" type="button">Example button</button>
+ <button class="btn-outline theme-secondary" type="button">Example button</button>
</div>
</div>
<div class="col-md-6">
<div class="h-100 p-5 bg-body-tertiary border rounded-3">
<h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
- <button class="btn btn-outline-secondary" type="button">Example button</button>
+ <button class="btn-outline theme-secondary" type="button">Example button</button>
</div>
</div>
</div>
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
</p>
<div class="d-inline-flex gap-2 mb-5">
- <button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
+ <button class="btn-solid theme-primary btn-lg ps-4 pe-3 rounded-pill" type="button">
Call to action
- <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use href="#arrow-right-short"/></svg>
+ <svg class="bi" width="24" height="24" aria-hidden="true"><use href="#arrow-right-short"/></svg>
</button>
- <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
+ <button class="btn-outline theme-secondary btn-lg px-4 rounded-pill" type="button">
Secondary link
</button>
</div>
<p class="col-lg-6 mx-auto mb-4">
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.
</p>
- <button class="btn btn-primary px-5 mb-5" type="button">
+ <button class="btn-solid theme-primary px-4 mb-5" type="button">
Call to action
</button>
</div>
<div class="bg-body-tertiary p-5 rounded mt-3">
<h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
- <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
+ <a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
</div>
</main>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
<div class="bg-body-tertiary p-5 rounded">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
- <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
+ <a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
</div>
</main>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
<div class="bg-body-tertiary p-5 rounded">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
- <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
+ <a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
</div>
</main>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
</ul>
<form class="d-flex mt-3 mt-lg-0" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
<p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static/')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed/')}>fixed top</a> examples.</p>
<p>From the top down, you'll see a dark navbar, light navbar and a responsive navbar—each with offcanvases built in. Resize your browser window to the large breakpoint to see the toggle for the offcanvas.</p>
<p>
- <a class="btn btn-primary" href={getVersionedDocsPath('/components/navbar#offcanvas')} role="button">Learn more about offcanvas navbars »</a>
+ <a class="btn-solid theme-primary" href={getVersionedDocsPath('/components/navbar#offcanvas')} role="button">Learn more about offcanvas navbars »</a>
</p>
</div>
</div>
</li>
</ul>
<div class="d-lg-flex col-lg-3 justify-content-lg-end">
- <button class="btn btn-primary">Button</button>
+ <button class="btn-solid theme-primary">Button</button>
</div>
</div>
</div>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href={getVersionedDocsPath('/examples/navbar-static/')}>top</a> and <a href={getVersionedDocsPath('/examples/navbar-fixed/')}>fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
- <a class="btn btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
+ <a class="btn-solid theme-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
</p>
</div>
</div>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-outline theme-success" type="submit">Search</button>
</form>
</div>
</div>
<li>Email support</li>
<li>Help center access</li>
</ul>
- <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
+ <button type="button" class="w-100 btn-outline theme-primary btn-lg">Sign up for free</button>
</div>
</div>
</div>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
- <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
+ <button type="button" class="w-100 btn-solid theme-primary btn-lg">Get started</button>
</div>
</div>
</div>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
- <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
+ <button type="button" class="w-100 btn-solid theme-primary btn-lg">Contact us</button>
</div>
</div>
</div>
Remember me
</label>
</div>
- <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
+ <button class="btn-solid theme-primary w-100 py-2" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-body-secondary">© 2017–{new Date().getFullYear()}</p>
</form>
</main>
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
<div class="mb-5">
- <a href={getVersionedDocsPath('/examples')} class="btn btn-primary btn-lg px-4">Download examples</a>
+ <a href={getVersionedDocsPath('/examples')} class="btn-solid theme-primary btn-lg px-4">Download examples</a>
</div>
<hr class="col-3 col-md-2 mb-5">
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" type="submit">Search</button>
+ <button class="btn-solid theme-success" type="submit">Search</button>
</form>
</div>
</div>
{
layout === 'docs' && (
<button
- class="btn btn-icon navbar-btn-icon d-lg-none ms--2"
+ class="btn-icon navbar-btn-icon d-lg-none ms--2"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#bdSidebar"
<div class="bd-search" id="docsearch" data-bd-docs-version={getConfig().docs_version}></div>
<button
- class="btn btn-icon navbar-btn-icon d-lg-none order-3 me--2"
+ class="btn-icon navbar-btn-icon d-lg-none order-3 me--2"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#bdNavbar"
</p>
<div class="p-4 mb-3 border rounded-3">
<div class="dropdown">
- <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
</div>
<Code
code={`<div class="dropdown">
- <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
+ class="btn-outline theme-secondary btn-sm dropdown-toggle w-100 justify-content-between"
id="btn-color-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
</div>
</div>
- <div class="vstack gap-1">
+ <div class="vstack gap-1 flex-grow-0">
<label class="form-label fw-semibold mb-0">Style</label>
- <div class="btn-group text-capitalize" role="group" aria-label="Button style">
+ <div class="btn-group text-capitalize btn-group-sm" role="group" aria-label="Button style">
{styles.map((style) => (
<label class="btn-check btn-outline theme-secondary">
<input
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
+ class="btn-outline theme-secondary btn-sm dropdown-toggle w-100 justify-content-between"
id="btn-size-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
<div class="vstack gap-1 flex-grow-0">
<label class="form-label fw-semibold mb-0">Rounded</label>
- <div class="btn-group text-capitalize" role="group" aria-label="Button rounded">
+ <div class="btn-group text-capitalize btn-group-sm" role="group" aria-label="Button rounded">
{rounded.map((round) => (
<label class="btn-check btn-outline theme-secondary">
<input
<Example
class="d-flex align-items-start gap-2"
- code={`<button type="button" class="btn btn-solid theme-primary" data-button-type="text">Button</button>
-<button type="button" class="btn btn-solid theme-primary" data-button-type="left-icon">
+ code={`<button type="button" class="btn-solid theme-primary btn-sm" data-button-type="text">Button</button>
+<button type="button" class="btn-solid theme-primary" data-button-type="left-icon">
<svg class="bi me-1" width="16" height="16" aria-hidden="true">
<use href="#arrow-left" />
</svg>
Left icon
</button>
-<button type="button" class="btn btn-solid theme-primary" data-button-type="right-icon">
+<button type="button" class="btn-solid theme-primary btn-sm" data-button-type="right-icon">
Right icon
<svg class="bi ms-1" width="16" height="16" aria-hidden="true">
<use href="#arrow-right" />
</svg>
</button>
-<button type="button" class="btn btn-solid btn-icon theme-primary" data-button-type="icon-only" aria-label="Icon only">
+<button type="button" class="btn-solid btn-icon theme-primary btn-sm" data-button-type="icon-only" aria-label="Icon only">
<svg class="bi" width="16" height="16" aria-hidden="true">
<use href="#plus-lg" />
</svg>
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
+ class="btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
id="placement-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
class="d-flex justify-content-center align-items-center"
style="min-height: 200px;"
code={`<div class="dropdown">
- <button class="btn btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-placement="bottom-start" aria-expanded="false">
+ <button class="btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-placement="bottom-start" aria-expanded="false">
Toggle dropdown
</button>
<ul class="dropdown-menu">
if (!codeSnippet) return
const htmlCode = `<div class="dropdown">
- <button class="btn btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-placement="${placement}" aria-expanded="false">
+ <button class="btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-placement="${placement}" aria-expanded="false">
Toggle dropdown
</button>
<ul class="dropdown-menu">
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle"
+ class="btn-outline theme-secondary dropdown-toggle"
id="navbar-placement-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
+ class="btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
id="stepper-breakpoint-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
+ class="btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
id="stepper-count-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
<div class="dropdown">
<button
type="button"
- class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
+ class="btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
id="stepper-active-dropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
Badges can be used as part of links or buttons to provide a counter.
-<Example code={`<button type="button" class="btn btn-primary">
+<Example code={`<button type="button" class="btn-solid theme-primary">
Notifications <span class="badge theme-danger">4</span>
</button>`} />
Use utilities to modify a `.badge` and position it in the corner of a link or button.
-<Example code={`<button type="button" class="btn btn-primary position-relative">
+<Example code={`<button type="button" class="btn-solid theme-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill border border-bg theme-danger">
99+
You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.
-<Example code={`<button type="button" class="btn btn-primary position-relative">
+<Example code={`<button type="button" class="btn-solid theme-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-bg rounded-circle">
<span class="visually-hidden">New alerts</span>
Use `.btn-icon` for square buttons that contain only an icon. This class sets `aspect-ratio: 1` and removes padding, making the button perfectly square based on its `min-height`. Always include an `aria-label` attribute on icon-only buttons to ensure they are accessible to screen reader users.
-<Example code={`<button type="button" class="btn-solid theme-primary btn-icon" aria-label="Confirm">
+<Example code={`<button type="button" class="btn-icon" aria-label="Magic">
+ <svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#magic"></use></svg>
+ </button>
+ <button type="button" class="btn-solid theme-primary btn-icon" aria-label="Confirm">
<svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
</button>
<button type="button" class="btn-outline theme-secondary btn-icon" aria-label="Auto theme">
);
```
+#### Selectors
+
+The `$btn-variant-selectors` list controls which selectors receive the base button styles (tokens, display, padding, font, etc.). By default it includes `.btn`, `.btn-link`, `.btn-icon`, and all classes generated from the `$button-variants` map. This means variant classes like `.btn-solid` work standalone without requiring `.btn`.
+
+<ScssDocs name="btn-variant-selectors" file="scss/buttons/_button.scss" />
+
### Sass loops
#### Variant loop
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>`} />
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>`} />
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
<div class="card-footer text-body-secondary">
2 days ago
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Button</a>
+ <a href="#" class="btn-solid theme-primary">Button</a>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Button</a>
+ <a href="#" class="btn-solid theme-primary">Button</a>
</div>
</div>`} />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>`} />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>`} />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>`} />
Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
<Example code={`<p class="d-inline-flex gap-1">
- <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+ <a class="btn-solid theme-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+ <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
</Callout>
<Example code={`<p>
- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
+ <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute.
<Example code={`<p class="d-inline-flex gap-1">
- <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
+ <a class="btn-solid theme-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
+ <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
+ <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<p>This is a native dialog element. It uses the browser's built-in modal behavior for accessibility and focus management.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
Open dialog
</button>`} />
<p>Dialog body content goes here.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
-<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
+<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialog">
Open dialog
</button>
```
<p>This is a native dialog element, only it’s set to dark mode. It uses the browser's built-in modal behavior for accessibility and focus management.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogDark">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogDark">
Open dark dialog
</button>`} />
<p>I will not close if you click outside of me. Use the close button or press Escape.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
Open static backdrop dialog
</button>`} />
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#scrollingLongDialog">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#scrollingLongDialog">
Launch scrolling dialog
</button>`} />
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#scrollableBodyDialog">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#scrollableBodyDialog">
Launch scrollable body dialog
</button>`} />
<!-- Long content here -->
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
```
<p>You've reached the bottom of the overflow dialog!</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#overflowDialog">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#overflowDialog">
Launch overflow dialog
</button>`} />
<p>Click below to swap to a second dialog. Notice the backdrop stays visible—no flash!</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to second dialog</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to second dialog</button>
</div>
</dialog>
<p>This is the second dialog. You can swap back to the first, or close this one entirely.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
- <button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to first dialog</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to first dialog</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
Open first dialog
</button>`} />
</div>
<div class="dialog-footer">
<!-- This trigger is inside dialog1, so clicking it will swap -->
- <button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#dialog2">
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#dialog2">
Go to dialog 2
</button>
</div>
<p>You're now in dialog 2.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#dialog1">
+ <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#dialog1">
Back to dialog 1
</button>
</div>
<p>This dialog doesn't block the page. You can still interact with content behind it.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
- <Example code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
+ <Example code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
Open non-modal dialog
</button>`} />
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogXl">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogXl">
Extra large dialog
</button>
-<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogLg">
+<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogLg">
Large dialog
</button>
-<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogSm">
+<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogSm">
Small dialog
</button>`} />
<p>This dialog covers the entire viewport.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreen">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreen">
Fullscreen dialog
</button>`} />
<p>This dialog is fullscreen below the <code>lg</code> breakpoint.</p>
</div>
<div class="dialog-footer">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
</div>
</dialog>
-<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreenLg">
+<Example showMarkup={false} code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogFullscreenLg">
Fullscreen below lg
</button>`} />
Toggle dropdown menus with buttons whenever possible. Here's an example using a Bootstrap button:
<Example code={`<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Toggle dropdown
</button>
<ul class="dropdown-menu">
While `<button>` is the recommended control for a dropdown toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control’s purpose to assistive technologies such as screen readers.
<Example code={`<div class="dropdown">
- <a class="btn btn-solid theme-secondary" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <a class="btn-solid theme-secondary" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Toggle dropdown
</a>
We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that’s added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
<Example showMarkup={false} code={`<div class="btn-group">
- <button type="button" class="btn btn-solid theme-primary">Primary</button>
- <button type="button" class="btn btn-solid theme-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-primary">Primary</button>
+ <button type="button" class="btn-solid theme-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
```html
<!-- Example split danger button -->
<div class="btn-group">
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn-solid theme-danger">Danger</button>
+ <button type="button" class="btn-solid theme-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
Opt into darker dropdowns to match a dark navbar or custom style by adding `data-bs-theme="dark"` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
<Example code={`<div class="dropdown" data-bs-theme="dark">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown" data-bs-theme="dark">
- <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-inverse dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark">
- Switch to `right-start` at the `lg` breakpoint
<Example class="d-flex gap-2" code={`<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-placement="bottom-start md:bottom-end" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-placement="bottom-start md:bottom-end" aria-expanded="false">
Bottom start → md:bottom-end
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-placement="bottom lg:right" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-placement="bottom lg:right" aria-expanded="false">
Bottom → lg:right
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-placement="top-end md:right-start xl:bottom-start" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-placement="top-end md:right-start xl:bottom-start" aria-expanded="false">
Multi-breakpoint
</button>
<ul class="dropdown-menu">
Wrap a `.dropdown-item` trigger and a nested `.dropdown-menu` inside a `.dropdown-submenu` element.
<Example code={`<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown with submenu
</button>
<ul class="dropdown-menu">
Submenus can be nested to multiple levels. Each level opens to the side and flips direction when there's not enough viewport space.
<Example code={`<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Multi-level menu
</button>
<ul class="dropdown-menu">
When multiple submenu triggers exist at the same level, opening one automatically closes the others.
<Example code={`<div class="dropdown">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Multiple submenus
</button>
<ul class="dropdown-menu">
<Example code={`<div class="d-flex">
<div class="dropdown me-1">
- <button type="button" class="btn btn-solid theme-secondary" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
+ <button type="button" class="btn-solid theme-secondary" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
- <button type="button" class="btn btn-solid theme-secondary">Reference</button>
- <button type="button" class="btn btn-solid theme-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+ <button type="button" class="btn-solid theme-secondary">Reference</button>
+ <button type="button" class="btn-solid theme-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.
<Example code={`<div class="btn-group">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu">
</div>
<div class="btn-group">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu">
</div>
<div class="btn-group">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu">
</div>
<div class="btn-group">
- <button class="btn btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
+ <button class="btn-solid theme-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu">
<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
<path d="M1 3.5h14M1 8h14M1 12.5h14"/>
</svg>
<ResizableExample code={`<nav class="navbar navbar-expand-sm bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarNav" aria-labelledby="navbarNavLabel">
<ResizableExample code={`<nav class="navbar navbar-expand-sm bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarNavAltMarkup" aria-labelledby="navbarNavAltMarkupLabel">
<ResizableExample code={`<nav class="navbar navbar-expand-lg bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarNavDropdown" aria-labelledby="navbarNavDropdownLabel">
<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarText" aria-labelledby="navbarTextLabel">
<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarDarkOffcanvas" aria-controls="navbarDarkOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarDarkOffcanvas" aria-controls="navbarDarkOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
<path d="M1 3.5h14M1 8h14M1 12.5h14"/>
</svg>
<nav class="navbar navbar-expand-md" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarColor01" aria-labelledby="navbarColor01Label">
<nav class="navbar navbar-expand-md bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarColor02" aria-labelledby="navbarColor02Label">
<nav class="navbar navbar-expand-md bg-1" data-bs-theme="light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarColor03" aria-labelledby="navbarColor03Label">
<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Left Drawer</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarLeftDrawer" aria-controls="navbarLeftDrawer" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarLeftDrawer" aria-controls="navbarLeftDrawer" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="navbarLeftDrawer" aria-labelledby="navbarLeftDrawerLabel">
<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Top Drawer</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTopDrawer" aria-controls="navbarTopDrawer" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTopDrawer" aria-controls="navbarTopDrawer" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="navbarTopDrawer" aria-labelledby="navbarTopDrawerLabel">
<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1 fg-2">
<div class="container-fluid">
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarTogglerDemo01" aria-labelledby="navbarTogglerDemo01Label">
<ResizableExample code={`<nav class="navbar bg-1 fg-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarTogglerDemo02" aria-labelledby="navbarTogglerDemo02Label">
<ResizableExample code={`<nav class="navbar bg-1 fg-2">
<div class="container-fluid">
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<nav class="navbar bg-body" data-bs-theme="dark">
<div class="container-fluid">
- <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
</div>
You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="offcanvas"` is required.
-<Example code={`<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+<Example code={`<a class="btn-solid theme-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
- <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+ <button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
- <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling.
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
You can also enable `<body>` scrolling with a visible backdrop.
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
When backdrop is set to static, the offcanvas will not close when clicking outside of it.
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
To make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
-<Example code={`<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
+<Example code={`<button class="btn-solid theme-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
Try the top, right, bottom, and fullscreen examples out below.
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
</div>
</div>`} />
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
</div>
</div>`} />
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
</div>
</div>`} />
-<Example code={`<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFullscreen" aria-controls="offcanvasFullscreen">Toggle fullscreen offcanvas</button>
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFullscreen" aria-controls="offcanvasFullscreen">Toggle fullscreen offcanvas</button>
<div class="offcanvas offcanvas-fullscreen" tabindex="-1" id="offcanvasFullscreen" aria-labelledby="offcanvasFullscreenLabel">
<div class="offcanvas-header">
<p>Content for the offcanvas goes here. The footer will stick to the bottom.</p>
</div>
<div class="offcanvas-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
+ <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="offcanvas">Close</button>
+ <button type="button" class="btn-solid theme-primary">Save changes</button>
</div>
</div>`} />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
- <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
+ <a class="btn-solid theme-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>`} />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
- <a href="#" class="btn btn-primary">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary">Go somewhere</a>
</div>
</div>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
- <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
+ <a class="btn-solid theme-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
```
<span class="placeholder col-6"></span>
</p>
- <a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>`} />
+ <a class="btn-solid theme-primary disabled placeholder col-4" aria-disabled="true"></a>`} />
<Callout>
The use of `aria-hidden="true"` only indicates that the element should be hidden to screen readers. The *loading* behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update.
Click the button below to trigger a popover:
-<Example addStackblitzJs code={`<button type="button" class="btn btn-solid theme-primary"
+<Example addStackblitzJs code={`<button type="button" class="btn-solid theme-primary"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="This is the popover content—make it as long as you want.">
<Callout name="warning-data-bs-title-vs-title" type="warning" />
-<Example addStackblitzJs code={`<button type="button" class="btn btn-solid theme-primary"
+<Example addStackblitzJs code={`<button type="button" class="btn-solid theme-primary"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here’s some amazing content. It’s very engaging. Right?">
Set `data-bs-placement` to change the direction. Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
-<Example addStackblitzJs code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example addStackblitzJs code={`<button type="button" class="btn-solid theme-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left"
data-bs-content="Left popover">
Popover on left
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover">
Popover on top
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="bottom"
Popover on bottom
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="right"
Change placement at different breakpoints using responsive prefixes. The syntax is `breakpoint:placement`, where breakpoint is one of `sm`, `md`, `lg`, `xl`, or `2xl`.
-<Example addStackblitzJs code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example addStackblitzJs code={`<button type="button" class="btn-solid theme-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top md:right lg:bottom"
data-bs-content="This popover changes placement at different breakpoints.">
Top → md:right → lg:bottom
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left lg:top"
<ScssDocs name="custom-popovers" file="site/src/scss/_component-examples.scss" />
-<Example addStackblitzJs class="custom-popover-demo" code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example addStackblitzJs class="custom-popover-demo" code={`<button type="button" class="btn-solid theme-secondary"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `<a>` elements, not `<button>`s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
</Callout>
-<Example addStackblitzJs code={`<a tabindex="0" class="btn btn-solid theme-secondary" role="button"
+<Example addStackblitzJs code={`<a tabindex="0" class="btn-solid theme-secondary" role="button"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-title="Dismissible popover"
data-bs-toggle="popover"
data-bs-trigger="hover focus"
data-bs-content="Disabled popover">
- <button class="btn btn-primary" type="button" disabled>Disabled button</button>
+ <button class="btn-solid theme-primary" type="button" disabled>Disabled button</button>
</span>`} />
## CSS
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
-<Example code={`<button class="btn btn-primary" type="button" disabled>
+<Example code={`<button class="btn-solid theme-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
- <button class="btn btn-primary" type="button" disabled>
+ <button class="btn-solid theme-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>`} />
-<Example code={`<button class="btn btn-primary" type="button" disabled>
+<Example code={`<button class="btn-solid theme-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
- <button class="btn btn-primary" type="button" disabled>
+ <button class="btn-solid theme-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>`} />
</div>
<Example showMarkup={false} code={`
-<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+<button type="button" class="btn-solid theme-primary" id="liveToastBtn">Show live toast</button>
`} />
```html
-<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+<button type="button" class="btn-solid theme-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
- <button type="button" class="btn btn-primary btn-sm">Take action</button>
- <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
+ <button type="button" class="btn-solid theme-primary btn-sm">Take action</button>
+ <button type="button" class="btn-solid theme-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>`} />
Hover the button below to see a tooltip. By default, the tooltip will appear above their trigger element (anything with the `data-bs-toggle="tooltip"` attribute).
-<Example addStackblitzJs class="tooltip-demo" code={`<button type="button" class="btn btn-solid theme-primary"
+<Example addStackblitzJs class="tooltip-demo" code={`<button type="button" class="btn-solid theme-primary"
data-bs-toggle="tooltip"
data-bs-title="Tooltip on top">
Example tooltip
<ScssDocs name="custom-tooltip" file="site/src/scss/_component-examples.scss" />
-<Example addStackblitzJs class="tooltip-demo" code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example addStackblitzJs class="tooltip-demo" code={`<button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
data-bs-title="This top tooltip is themed via CSS variables.">
Set `data-bs-placement` to change the direction. Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
-<Example class="tooltip-demo" code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example class="tooltip-demo" code={`<button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="Tooltip on left">
Tooltip on left
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Tooltip on top">
Tooltip on top
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="Tooltip on bottom">
Tooltip on bottom
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-title="Tooltip on right">
Change placement at different breakpoints using responsive prefixes. The syntax is `breakpoint:placement`, where breakpoint is one of `sm`, `md`, `lg`, `xl`, or `2xl`.
-<Example class="tooltip-demo" code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example class="tooltip-demo" code={`<button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top md:right lg:bottom"
data-bs-title="Responsive tooltip">
Top → md:right → lg:bottom
</button>
- <button type="button" class="btn btn-solid theme-secondary"
+ <button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-placement="left lg:top"
data-bs-title="Responsive tooltip">
And with custom HTML added:
-<Example class="tooltip-demo" code={`<button type="button" class="btn btn-solid theme-secondary"
+<Example class="tooltip-demo" code={`<button type="button" class="btn-solid theme-secondary"
data-bs-toggle="tooltip"
data-bs-html="true"
data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
<Example class="tooltip-demo" addStackblitzJs code={`<span class="d-inline-block" tabindex="0"
data-bs-toggle="tooltip"
data-bs-title="Disabled tooltip">
- <button class="btn btn-primary" type="button" disabled>Disabled button</button>
+ <button class="btn-solid theme-primary" type="button" disabled>Disabled button</button>
</span>`} />
## CSS
For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
<Example class="d-flex justify-content-between" code={`<div class="dropdown" data-bs-theme="light">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
</div>
<div class="dropdown" data-bs-theme="dark">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<hr class="my-4"/>
<div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
+ <button class="btn-solid theme-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
<label class="form-label" for="checkLabel">Example new checkbox</label>
</div>
<div class="vstack gap-2">
- <button type="button" class="btn btn-solid theme-primary">Primary</button>
- <button type="button" class="btn btn-subtle theme-secondary">Secondary</button>
+ <button type="button" class="btn-solid theme-primary">Primary</button>
+ <button type="button" class="btn-subtle theme-secondary">Secondary</button>
</div>
</div>
<div class="col-md-6 vstack gap-3 p-4 bg-body" data-bs-theme="dark">
<label class="form-label" for="checkDarkLabel">Example new checkbox</label>
</div>
<div class="vstack gap-2">
- <button type="button" class="btn btn-solid theme-primary">Primary</button>
- <button type="button" class="btn btn-subtle theme-secondary">Secondary</button>
+ <button type="button" class="btn-solid theme-primary">Primary</button>
+ <button type="button" class="btn-subtle theme-secondary">Secondary</button>
</div>
</div>
</div>`} />
<Example class="vstack gap-3" code={`<div class="alert theme-primary">Primary alert</div>
<div>
- <button type="button" class="btn btn-solid theme-primary">Primary button</button>
- <button type="button" class="btn btn-outline theme-primary">Primary outline button</button>
- <button type="button" class="btn btn-subtle theme-primary">Primary subtle button</button>
- <button type="button" class="btn btn-text theme-primary">Primary text button</button>
+ <button type="button" class="btn-solid theme-primary">Primary button</button>
+ <button type="button" class="btn-outline theme-primary">Primary outline button</button>
+ <button type="button" class="btn-subtle theme-primary">Primary subtle button</button>
+ <button type="button" class="btn-text theme-primary">Primary text button</button>
</div>
<div>
<span class="badge theme-primary">Primary badge</span>
<Example code={`<div class="vstack gap-3 theme-primary">
<div class="alert">Primary alert</div>
<div>
- <button type="button" class="btn btn-solid">Primary button</button>
- <button type="button" class="btn btn-outline">Primary outline button</button>
- <button type="button" class="btn btn-subtle">Primary subtle button</button>
- <button type="button" class="btn btn-text">Primary text button</button>
+ <button type="button" class="btn-solid">Primary button</button>
+ <button type="button" class="btn-outline">Primary outline button</button>
+ <button type="button" class="btn-subtle">Primary subtle button</button>
+ <button type="button" class="btn-text">Primary text button</button>
</div>
<div>
<span class="badge">Primary badge</span>
<Example code={`<div class="vstack gap-3 theme-primary">
<div class="alert">Primary alert</div>
<div>
- <button type="button" class="btn btn-solid theme-emphasis">Emphasis button</button>
- <button type="button" class="btn btn-outline">Primary outline button</button>
- <button type="button" class="btn btn-subtle theme-danger">Danger subtle button</button>
- <button type="button" class="btn btn-text">Primary text button</button>
+ <button type="button" class="btn-solid theme-emphasis">Emphasis button</button>
+ <button type="button" class="btn-outline">Primary outline button</button>
+ <button type="button" class="btn-subtle theme-danger">Danger subtle button</button>
+ <button type="button" class="btn-text">Primary text button</button>
</div>
<div>
<span class="badge theme-success">Success badge</span>
robots: noindex,follow
---
-## Buttons
-
-<button class="btn btn-bd-primary">Primary button</button>
-<button class="btn btn-bd-accent">Accent button</button>
-<button class="btn btn-bd-light">Light button</button>
-
## Callouts
<Callout>
Use a button instead of an input for use cases like dashboard date filters. Add `data-bs-datepicker-display` to the text element to preserve icons when the date updates.
-<Example code={`<button type="button" class="btn btn-outline-secondary" data-bs-toggle="datepicker">
+<Example code={`<button type="button" class="btn-outline theme-secondary" data-bs-toggle="datepicker">
<svg class="bi" width="16" height="16"><use href="#calendar-week" /></svg>
<span data-bs-datepicker-display>Select date</span>
</button>`} />
For date range selection (e.g., dashboard time filters), use `data-bs-selection-mode="multiple-ranged"`. The calendar will close after both start and end dates are selected.
-<Example code={`<button type="button" class="btn btn-outline-secondary" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged">
+<Example code={`<button type="button" class="btn-outline theme-secondary" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged">
<svg class="bi" width="16" height="16"><use href="#calendar-week" /></svg>
<span data-bs-datepicker-display>Last 7 days</span>
</button>`} />
<div data-bs-toggle="datepicker" data-bs-inline="true">
<input type="hidden" name="selected_date">
</div>
- <button type="submit" class="btn btn-primary mt-3">Submit</button>
+ <button type="submit" class="btn-solid theme-primary mt-3">Submit</button>
</form>`} />
### Custom date formatting
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
- <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
+ <button type="submit" class="btn-solid theme-primary mb-3">Confirm identity</button>
</div>
</form>`} />
</div>
</div>
<div class="col-12">
- <button type="submit" class="btn btn-primary">Sign in</button>
+ <button type="submit" class="btn-solid theme-primary">Sign in</button>
</div>
</form>`} />
</div>
</div>
</div>
- <button type="submit" class="btn btn-primary">Sign in</button>
+ <button type="submit" class="btn-solid theme-primary">Sign in</button>
</form>`} />
### Horizontal form label sizing
</div>
</div>
<div class="col-auto">
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</div>
</form>`} />
</div>
</div>
<div class="col-auto">
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</div>
</form>`} />
</div>
<div class="col-12">
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</div>
</form>`} />
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</form>`} />
## Disabled forms
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
-However, if your form also includes custom button-like elements such as `<a class="btn btn-*">...</a>`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
+However, if your form also includes custom button-like elements such as `<a class="btn-*">...</a>`, these will only be given a style of `pointer-events: none`, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
<Example code={`<form>
<fieldset disabled>
</label>
</div>
</div>
- <button type="submit" class="btn btn-primary">Submit</button>
+ <button type="submit" class="btn-solid theme-primary">Submit</button>
</fieldset>
</form>`} />
</div>
</div>
<div class="col-12">
- <button class="btn btn-primary" type="submit">Submit form</button>
+ <button class="btn-solid theme-primary" type="submit">Submit form</button>
</div>
</form>`} />
</div>
</div>
<div class="col-12">
- <button class="btn btn-primary" type="submit">Submit form</button>
+ <button class="btn-solid theme-primary" type="submit">Submit form</button>
</div>
</form>`} />
</div>
</div>
<div class="col-12">
- <button class="btn btn-primary" type="submit">Submit form</button>
+ <button class="btn-solid theme-primary" type="submit">Submit form</button>
</div>
</form>`} />
</div>
<div class="mb-3">
- <button class="btn btn-primary" type="submit" disabled>Submit form</button>
+ <button class="btn-solid theme-primary" type="submit" disabled>Submit form</button>
</div>
</form>`} />
</div>
</div>
<div class="col-12">
- <button class="btn btn-primary" type="submit">Submit form</button>
+ <button class="btn-solid theme-primary" type="submit">Submit form</button>
</div>
</form>`} />
<BsTable>
| Type | Description | Link |
| --- | --- | --- |
-| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI. | {/*<a href="[[config:download.dist]]" class="btn btn-subtle theme-accent">Download</a>*/} |
-| <strong class="text-nowrap">Source files</strong> | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | {/*<a href="[[config:download.source]]" class="btn btn-subtle theme-accent">Download</a>*/} |
+| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI. | {/*<a href="[[config:download.dist]]" class="btn-subtle theme-accent">Download</a>*/} |
+| <strong class="text-nowrap">Source files</strong> | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | {/*<a href="[[config:download.source]]" class="btn-subtle theme-accent">Download</a>*/} |
</BsTable>
Should you require our full set of [build tools]([[docsref:/guides/contribute#tooling-setup]]), they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.
</head>
<body>
<h1>Hello, modularity!</h1>
- <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
+ <button id="popoverButton" type="button" class="btn-solid theme-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>
<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
<script type="importmap">
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Parcel!</h1>
- <button class="btn btn-primary">Primary button</button>
+ <button class="btn-solid theme-primary">Primary button</button>
</div>
</body>
</html>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
- <button class="btn btn-primary">Primary button</button>
+ <button class="btn-solid theme-primary">Primary button</button>
</div>
</body>
</html>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Webpack!</h1>
- <button class="btn btn-primary">Primary button</button>
+ <button class="btn-solid theme-primary">Primary button</button>
</div>
</body>
</html>
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
- <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
+ <a href="#" class="btn-solid theme-primary stretched-link">Go somewhere</a>
</div>
</div>`} />
Here are some real life examples of these classes:
-<Example class="bd-example-position-examples d-flex justify-content-around align-items-center" code={`<button type="button" class="btn btn-primary position-relative">
+<Example class="bd-example-position-examples d-flex justify-content-around align-items-center" code={`<button type="button" class="btn-solid theme-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill theme-secondary theme-contrast">+99 <span class="visually-hidden">unread messages</span></span>
</button>
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-theme-bg)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>
- <button type="button" class="btn btn-primary position-relative">
+ <button type="button" class="btn-solid theme-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle w-1 h-1 border border-bg rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>`} />
)
}
<a
- class="btn btn-subtle btn-sm theme-secondary"
+ class="btn-subtle btn-sm theme-secondary"
href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/docs/${id}`}
title="View and edit this file on GitHub"
target="_blank"
{
frontmatter.mdn && (
<a
- class="btn btn-subtle btn-sm theme-secondary"
+ class="btn-subtle btn-sm theme-secondary"
href={frontmatter.mdn}
title="View on MDN"
target="_blank"
{
frontmatter.csstricks && (
<a
- class="btn btn-secondary-text btn-sm"
+ class="btn-secondary-text btn-sm"
href={typeof frontmatter.csstricks === 'string' ? frontmatter.csstricks : frontmatter.csstricks.url}
title="View on CSS-Tricks"
target="_blank"
---
<button
- class=`btn ${layout === 'examples' ? 'btn-bd-primary' : 'btn-link nav-link px-0 px-lg-2'} py-2 dropdown-toggle d-flex align-items-center`
+ class=`btn ${layout === 'examples' ? 'btn-solid theme-accent' : 'btn-link nav-link px-0 px-lg-2'} py-2 dropdown-toggle d-flex align-items-center`
id="bd-theme"
type="button"
aria-expanded="false"
<div class="d-flex flex-column flex-md-row gap-3" slot="header-content">
<a
href={getConfig().download.dist_examples}
- class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
+ class="btn-lg btn-solid theme-accent d-flex align-items-center justify-content-center fw-semibold"
>
<svg class="bi me-2" aria-hidden="true"><use href="#box-seam"></use></svg>
Download examples
</a>
- <a href={getConfig().download.source} class="btn btn-lg bd-btn-lg btn-outline-secondary"> Download source code</a>
+ <a href={getConfig().download.source} class="btn-lg btn-outline theme-secondary"> Download source code</a>
</div>
<Fragment slot="main-content">
<ExamplesMain />
projects / thirdparty / bootstrap.git / commitdiff
