Use Custom Elements with Bootstrap for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Story
UI Components based on Bootstrap 4+, Web Components and Smart.
Feel free to use these components for both private as well as commercial projects.
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
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>