Use Custom Elements with Bootstrap for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Quick Start
Looking to quickly add Bootstrap Webcomponents to your project ?
Official Github page Bootstrap Web Components
Using a package manager download the Bootstrap Webcomponents NPM package
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
JS
Copy-paste the <script> tags into your <head> before all other javascript references to load the neccessary dependencies.
<script type="text/javascript" src="../node_modules/@smarthtmlelements/smart-core/source/smart.core.js"></script>
<script type="text/javascript" src="../src/bootstrap-elements.js""></script>
Starter Template
Here's an example on how to create a simple button on a page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="../node_modules/@smarthtmlelements/smart-core/source/smart.core.js"></script>
<script type="text/javascript" src="../src/bootstrap-elements.js"></script>
</head>
<body>
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
</body>
Components
Bootstrap Buttons
Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<bootstrap-button style-mode="primary">Primary</bootstrap-button>
<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
<bootstrap-button style-mode="success">Success</bootstrap-button>
<bootstrap-button style-mode="danger">Danger</bootstrap-button>
<bootstrap-button style-mode="warning">Warning</bootstrap-button>
<bootstrap-button style-mode="info">Info</bootstrap-button>
<bootstrap-button style-mode="light">Light</bootstrap-button>
<bootstrap-button style-mode="dark">Dark</bootstrap-button>
<bootstrap-button style-mode="link">Link</bootstrap-button>
StyleMode property allows the user to change the style of the elements.
Outlined Buttons
In need of a button, but not the hefty background colors they bring? Just add the class outlined to remove all background images and colors on any button.
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
<bootstrap-button outlined style-mode="link">Link</bootstrap-button>
Setting the outlined property the elements turn into outlined buttons with no filling untill hovered.
Buttons Sizes
Fancy larger or smaller buttons? Just set the sizeMode property to 'sm' or 'lg' for additional sizes.
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
<bootstrap-button size-mode="sm">Large Button</bootstrap-button>
<bootstrap-button size-mode="sm">Large Button</bootstrap-button>
Buttons can be reset back to normal if SizeMode is set to an empty string.
Disabled Buttons
<bootstrap-button disabled>Primary Button</bootstrap-button>
<bootstrap-button disabled>Button</bootstrap-button>
To disable/enable an element just set the disabled property.
Bootstrap Checkbox
Checkboxes are buttons that can be toggled. The checked state of these buttons can be updated via click or by setting the checked property to true. Checkboxes like the other toggle buttons can be pre-checked.
<bootstrap-check-box checked>Checked</bootstrap-check-box>
<bootstrap-check-box>Unchecked</bootstrap-check-box>
Appling/Removing the checked attribute will toggle the state of the button.
Bootstrap Toggle Button
<bootstrap-toggle-button checked>Checked</bootstrap-toggle-button>
<bootstrap-toggle-button>Unchecked</bootstrap-toggle-button>
Add the checked attribute to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the checked attribute to the button.
Bootstrap Radio Button
<bootstrap-radio-button checked> Active</bootstrap-radio-button>
<bootstrap-radio-button>Radio</bootstrap-radio-button>
<bootstrap-radio-button>Radio</bootstrap-radio-button>
Radio buttons are group elements that allow only one of them to be checked. Similar to the other toggle elements to set a button into checked state the property checked has to be applied to the element. All elements that have the same group property are considered to be in the same group. group can be set on initialization.
Bootstrap Dropdowns
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering; this is an intentional design decision. Dropdowns are built using the Smart Framework's DropDownPositioning API, which provides dynamic positioning and viewport detection. No additional references are required since the API is part of the base class smartelements.js.
Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key.
In order for a DropDown item to visually appear as an item it is neccessary to add the class .dropdown-item.
<bootstrap-drop-down label="Dropdown button">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
label property is used to set the label of the drop down button.
Dropdown varians
<!-- Example single danger button -->
<bootstrap-drop-down label="Danger" style-mode="danger">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-drop-down>
StyleMode determines the style of the DropDown.
Bootstrap Split Button
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret. 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.
Split Button varians
<!-- Example single danger button -->
<bootstrap-split-button label="Danger" style-mode="danger">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-split-button>
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<!-- Large button groups (default and split) -->
<bootstrap-drop-down label="Large button" size-mode="lg">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<bootstrap-split-button label="Large split button" size-mode="lg">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
<!-- Small button groups (default and split) -->
<bootstrap-drop-down label="Small button" size-mode="sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<bootstrap-split-button label="Small split button" size-mode="sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
Similar to the other buttons the sizeMode property determines the size of the component.
Directions
Dropup
Trigger dropdown menus above elements by adding changing the dropDownPosition property to 'top' to the parent element.
<!-- Default dropright button -->
<bootstrap-drop-down label="Dropup" drop-down-position="top"">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<!-- Split dropright button -->
<bootstrap-split-button label="Split dropup" drop-down-position="top">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
Dropright
Trigger dropdown menus at the right of the elements by adding changing the dropDownPosition property to 'right' to the parent element.
<!-- Default dropright button -->
<bootstrap-drop-down label="Dropright" drop-down-position="right"">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<!-- Split dropright button -->
<bootstrap-split-button label="Split dropright" drop-down-position="right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
Dropleft
Trigger dropdown menus at the left of the elements by adding changing the dropDownPosition property to 'left' to the parent element.
<!-- Default dropleft button -->
<bootstrap-drop-down label="Dropleft" drop-down-position="left"">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<!-- Split dropleft button -->
<bootstrap-split-button label="Split dropleft" drop-down-position="left">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
Menu items
Optionally you can use <button> elements in your dropdowns instead of just <a>'s.
<bootstrap-drop-down label="Dropdown">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down>
Custom alignment
If you want to use custom positioning instead of the dynamic, create a callback and pass it to the customDropDownPositionCallback property.
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-right to the drop down.
<bootstrap-drop-down label="Left-aligned but right aligned when large screen" custom-drop-down-position-callback="customDropDownPositioning">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down>
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-left to the drop down.
<bootstrap-drop-down label="Right-aligned but left aligned when large screen" custom-drop-down-position-callback="customDropDownPositioning">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down>
Menu content
Headers
Add a header to label sections of actions in any dropdown menu.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
Dividers
Separate groups of related menu items with a divider.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separate link</a>
</div>
Text
Place any freeform text within a dropdown with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
Methods
Public methods can be called directly on the element.
| Method | Description |
|---|---|
toggle() |
Toggles the dropdown. |
show() |
Shows the dropdown. |
hide() |
Hides the dropdown menu. |
update() |
Updates the position of an element’s dropdown. |
dispose() |
Destroys the element. |
Events
Events are fired directly from the element.
| Event | Description |
|---|---|
show |
This event fires immediately when the show instance method is called. |
shown |
This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). |
hide |
This event is fired immediately when the hide instance method has been called. |
hidden |
This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |
Binding to events is easy and simple:
document.querySelector('bootstrap-drop-down').addEventListener('show', function(){
//do something...
})
Bootstrap Input Groups
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.
<bootstrap-input-group class="mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</bootstrap-input-group>
<label for="basic-url">Your vanity URL</label>
<bootstrap-input-group class="mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</bootstrap-input-group>
<bootstrap-input-group>
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</bootstrap-input-group>
Wrapping
Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with the noWrap property.
<bootstrap-input-group no-wrap>
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</bootstrap-input-group>
Sizing
Add the sizeMode property in order to change the size of the input group.
<bootstrap-input-group size-mode="sm" class="mb-3">
<span class="input-group-text">Small</span>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<span class="input-group-text">Default</span>
</bootstrap-input-group>
<bootstrap-input-group size-mode="lg">
<span class="input-group-text">Large</span>
</bootstrap-input-group>
Checkbox and radios
Place any checkbox or radio option within an input group’s addon instead of text.
<bootstrap-input-group class="mb-3">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div></span>
</bootstrap-input-group>
<bootstrap-input-group">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
</div></span>
</bootstrap-input-group>
Multiple inputs
While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.
<bootstrap-input-group>
<span class="input-group-text">First and last name</span>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</bootstrap-input-group>
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input elements.
<bootstrap-input-group class="mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</bootstrap-input-group>
<bootstrap-input-group>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</bootstrap-input-group>
Buttons addons
Input groups with Bootstrap Button as addons.
<bootstrap-input-group class="mb-3">
<bootstrap-button style-mode="secondary" outlined>Button</bootstrap-button>
<input type="text" class="form-control" aria-label="Example text with button addon">
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
<bootstrap-button style-mode="secondary" outlined outlined>Button</bootstrap-button>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<bootstrap-button style-mode="secondary" outlined outlined>Button</bootstrap-button>
<bootstrap-button style-mode="secondary" outlined outlined>Button</bootstrap-button>
<input type="text" class="form-control">
</bootstrap-input-group>
<bootstrap-input-group>
<input type="text" class="form-control" placeholder="Recipient's username">
<bootstrap-button style-mode="secondary" outlined >Button</bootstrap-button>
<bootstrap-button style-mode="secondary" outlined >Button</bootstrap-button>
</bootstrap-input-group>
Buttons with dropdowns
Input groups with Bootstrap Dropdowns that contains Bootstrap buttons as addons.
<bootstrap-input-group class="mb-3">
<bootstrap-drop-down outlined label="Dropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-drop-down>
<input type="text" class="form-control">
</bootstrap-input-group>
<bootstrap-input-group>
<input type="text" class="form-control">
<bootstrap-drop-down outlined label="Dropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-drop-down>
</bootstrap-input-group>
Buttons with Split Buttons
Input groups with Bootstrap Split Buttons that contains Bootstrap buttons as addons.
<bootstrap-input-group class="mb-3">
<bootstrap-split-button outlined label="Dropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-split-button>
<input type="text" class="form-control">
</bootstrap-input-group>
<bootstrap-input-group>
<input type="text" class="form-control">
<bootstrap-split-button outlined label="Dropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-split-button>
</bootstrap-input-group>
Custom select
Input groups with a select insted of input.
<bootstrap-input-group class="mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="custom-select form-control" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<select class=" custom-select form-control" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<button class=" btn btn-outline-secondary" type="button">Button</button>
<select class="custom-select form-control" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</bootstrap-input-group>
<bootstrap-input-group>
<select class="custom-select form-control" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-outline-secondary" type="button">Button</button>
</bootstrap-input-group>
Custom file input
Input groups with a file upload.
<bootstrap-input-group class="mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="custom-select form-control" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<select class=" custom-select form-control" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<button class=" btn btn-outline-secondary" type="button">Button</button>
<select class="custom-select form-control" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</bootstrap-input-group>
<bootstrap-input-group>
<select class="custom-select form-control" aria-label="Example select with button addon">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-outline-secondary" type="button">Button</button>
</bootstrap-input-group>
Modal
Use Smart's Bootstrap JavaScript modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.
How it works
Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.
- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead.
- Clicking on the modal “backdrop” will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
- Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
- Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details.
-
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap
modals. To achieve the same effect, use some custom JavaScript:
document.querySelector('#myModal').addEventListener('shown', function() { document.querySelector('#myInput').select(); });
Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
Modal title
Modal body text goes here.
<bootstrap-modal>
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</bootstrap-modal>
Live demo
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Modal title
Modal body text goes here.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">
Launch demo modal
</button>
<!-- Modal -->
<bootstrap-modal id="exampleModalLive" class="fade">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</bootstrap-modal>
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. By default all modals are with auto height.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<bootstrap-modal id="exampleModalLong" class="fade">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</bootstrap-modal>
You can also create a scrollable modal that allows scroll the modal body by setting the scrollable property:
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
Launch demo modal
</button>
<!-- Modal -->
<bootstrap-modal id="exampleModalLive" class="fade" scrollable>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollable">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</bootstrap-modal>
Vertically centered
Add the centered property to vertically center the modal.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<!-- Button trigger vertically centered modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Vertically centered modal
</button>
<!-- Button trigger vertically centered scrollable modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollableCenter">
Vertically centered scrollable modal
</button>
<!-- Vertically centered modal -->
<bootstrap-modal id="exampleModalCenter" class="fade" centered>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</bootstrap-modal>
<!-- Vertically centered scrollable modal -->
<bootstrap-modal id="exampleModalCenter" class="fade" centered scrollable>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor auctor.</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>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</bootstrap-modal>
Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on relatedTarget.
New message
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<bootstrap-modal id="exampleModal" class="fade">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</bootstrap-modal>
Changing the contnet of the input inside the modal is simple as that:
window.onload = function () {
document.addEventListener('click', function () {
const target = event.target,
isButton = event.target.closest('button');
if (isButton && isButton.getAttribute('data-toggle') === 'modal') {
const modal = document.querySelector(isButton.getAttribute('data-target')),
data = isButton.getAttribute('data-whatever');
if (data) {
const modalInput = modal.querySelector('.modal-body input');
if (modalInput) {
modalInput.value = data;
}
}
if (modal) {
modal.toggle();
}
}
});
Change Animation
Animation is purely made via CSS. The default animation depends on the CSS class fade. Removing that class will disable it.
<bootstrap-modal> Empty Modal with no Animation </bootstrap-modal>
Embedding YouTube videos
Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more.
Optional Sizes
Modals have three optional sizes, available via modifier classes to be placed on a Modal These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1140px |
Extra large modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizeModeModal" data-size="xl">Extra large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizeModeModal" data-size="lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizeModeModal" data-size="sm">Small modal</button>
<bootstrap-modal id="sizeModeModal" class="fade">
<div class="modal-header">
<h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</bootstrap-modal>
Usage
The modal plugin toggles your hidden content on demand. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Properties
The following properties are available:
| Name | Type | Default | Description |
|---|---|---|---|
| backdrop | string | true | Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click or 'none' if you don't want to have a
.modal-backdrop element. |
| focus | boolean | true | Puts the modal in focus if true. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| opened | boolean | false | Shows the modal when initialized. |
| centered | boolean | false | Determines if the Modal is center or not. |
| scrollable | boolean | false | Determines if the Modal's body is scrollable or not. |
| sizeMode | string | '' | Determines the size of the modal. Possible values are: 'xl', 'lg', 'sm', ''. Empty string is the default size ( medium ). |
Proeprties can be set as attributes on the Tag of the HTML element or during the window.onload stage via Javascript.
Methods
toggle
Manually toggles the modal. If the modal is opened this method will close it and vice versa.
document.querySelector('bootstra-modal').toggle()
show
Manually opens the modal.
document.querySelector('bootstra-modal').show()
hide
Manually opens the modal.
document.querySelector('bootstra-modal').hide()
handleUpdate
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
document.querySelector('bootstra-modal').handleUpdate()
dispose
Removes the element from the DOM.
document.querySelector('bootstra-modal').dispose()
Events
Smart's Bootstrap modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <bootstrap-modal>)
| Event Type | Description |
|---|---|
| show | This event fires immediately when the show instance method is called. |
| shown | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). |
| hide | This event is fired immediately when the hide instance method has been
called. |
| hidden | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
Bootstrap Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Overview
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<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>
</form>
Form controls
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple="" class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
Readonly plain text
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail"
value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Range Inputs
Set horizontally scrollable range inputs using .form-control-range.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Checkboxes and radios
Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to help indicate the input’s state.
Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input≶s and <label≶s are sibling elements as opposed to an <input≶ within a <label≶. This is slightly more verbose as you must specify id and for attributes to relate the <input≶ and <label≶.
Default (stacked)
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
Horizontal form
Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls..
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
Layout
Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
Form groups
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Form row
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Column sizing
As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
Inline forms
Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
- Controls are
display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities. - Controls and input groups receive
width: auto to override the Bootstrap defaultwidth: 100%. - Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form control, even if you need to hide it from non-screenreader visitors with .sr-only.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck"> Remember me </label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Disabled forms
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Add the disabled attribute to a <fieldset> to disable all the controls within.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Validation
Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
How it works
Here’s how form validation works with Bootstrap:
- HTML form validation is applied via CSS’s two pseudo-classes,
:invalidand:valid. It applies to<input>,<select>, and<textarea>elements. - Bootstrap scopes the
:invalidand:validstyles to parent.was-validatedclass, usually applied to the<form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted). - To reset the appearance of the form (for instance, in the case of dynamic form submissions using
AJAX), remove the
.was-validatedclass from the<form>again after submission. - As a fallback,
.is-invalidand.is-validclasses may be used instead of the pseudo-classes for server side validation. They do not require a.was-validatedparent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a
<label>that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
- Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
- You may provide custom validity messages with
setCustomValidityin JavaScript.
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
Custom styles
For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <select>s are only available with .custom-select, and not .form-control.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Checkboxes and radios
Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check. We use the sibling selector (~) for all our <input> states—like :checked—to properly style our custom form indicator. When combined with the .custom-control-label class, we can also style the text for each item based on the <input>’s state. We hide the default <input> with opacity and use the .custom-control-label to build a new custom form indicator in its place with ::before and ::after. Unfortunately we can’t build a custom one from just the <input> because CSS’s content doesn’t work on that element. In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
Checkboxes
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
The following code should set the checkbox input to inditerminate state
document.querySelector('.your-checkbox').indeterminate = true;
Radios
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
Inline
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Disabled
Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Switches
A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Select menu
Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitatio
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Range
Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.
Tabs
There are three types of Tab controls : nav, tab and pills. The tabType property determines the type. By default it's set to 'tabs'.
Navs
Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
<bootstrap-tabs tab-type="nav">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Alignment
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned via the align property.
Centered with align="center"
<bootstrap-tabs tab-type="nav" alignment="center">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Right-aligned with align="end"
<bootstrap-tabs tab-type="nav" alignment="end">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Vertical-aligned with align="vertical"
<bootstrap-tabs tab-type="nav" alignment="vertical">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Vertical-aligned works with listType="nav" as well:
<bootstrap-tabs tab-type="nav" alignment="vertical" list-type="nav">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Tabs
Here's the default appearance of the Smart's bootstrap Tabs control. Setting the tabType property to 'tabs' will also change the the element to it's default state.
<bootstrap-tabs">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Pills
Pills is the third appearance of the Tab control. Changing the tabType property to 'pills' in order to change the appearance of the element.
<bootstrap-tabs tab-type="pills">
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Fill and justify
Force your Tab contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, set the fill property. Notice that all horizontal space is occupied, but not every nav item has the same width.
<bootstrap-tabs tab-type="pills" fill>
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
For equal-width elements, set the justified property. All horizontal space will be occupied by nav links, but unlike the fill above, every nav item will be the same width.
<bootstrap-tabs tab-type="pills" justified>
<a class="active" href="#">Active</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Regarding accessibility
If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the element. Note that navigation bars, even if visually styled as tabs with the tabType="tabs" property, should not be given role="tablist", role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. See JavaScript behavior for dynamic tabbed interfaces in this section for an example.
Using dropdowns
Tabs with dropdowns
<bootstrap-tabs>
<a class="active" href="#">Active</a>
<bootstrap-drop-down label="Dropdown" label-type="a" style-mode="">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-drop-down>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Pills with dropdowns
<bootstrap-tabs tab-type="pills">
<a class="active" href="#">Active</a>
<bootstrap-drop-down label="Dropdown" label-type="a" style-mode="">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</bootstrap-drop-down>
<a href="#">Link</a>
<a class="disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</bootstrap-tabs>
Dynamic Tabs
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
<bootstrap-tabs role="tablist">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">Home</a>
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">Profile</a>
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
aria-controls="contact" aria-selected="false">Contact</a>
</bootstrap-tabs>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
...
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
...
</div>
</div>
Dynamic Tabs also works with pills:
<bootstrap-tabs role="tablist" tab-type="pills">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
aria-controls="home" aria-selected="true">Home</a>
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
aria-controls="profile" aria-selected="false">Profile</a>
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab"
aria-controls="contact" aria-selected="false">Contact</a>
</bootstrap-tabs>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
...
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
...
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
...
</div>
</div>