Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup to add dialogs to yours. Learn how to customize Bootstrap Modals easily. Multiple examples and tutorial.
On this page:Bootstrap modals are lightweight and multi-purpose popups. Modals are split into three primary sections: header, body, and footer. Each has its role and so should be used accordingly.
<body>
so that modal content scrolls instead.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.position: fixed
, there are some caveats with using modals on mobile devices. See our browser support docs for details.autofocus
HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
media query. See the reduced motion section of our accessibility documentation.
Below is a basic modal example. Included are the header, body , and modal footer.
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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>
</div>
</div>
</div>
Toggle a working modal by clicking the following button. It will slide down and fade in from the top of the site.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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">
...
</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>
</div>
</div>
</div>
While modals become too long for the user’s viewport or device, they scroll separately of the page itself.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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>
</div>
</div>
</div>
You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable
to .modal-dialog
.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">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>
</div>
</div>
</div>
Add .modal-dialog-centered
to .modal-dialog
to vertically center the modal.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">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>
</div>
</div>
</div>
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
<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>
Use the Bootstrap grid inside a modal by nesting .container-fluid
inside the .modal-body
. Next, use the standard grid classes.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
In situation that you have many buttons that trigger the same modal with slightly different contents? Use event.relatedTarget
and HTML data-*
attributes to change the contents of the modal depending on button was clicked.
<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>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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>
</div>
</div>
</div>
$('#exampleModal').on('show.coreui.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
The $modal-fade-transform
variable determines the transform state of .modal-dialog
before the modal fade-in animation, the $modal-show-transform
variable determines the transform of .modal-dialog
at the end of the modal fade-in animation.
If you want for example a zoom-in animation, you can set $modal-fade-transform: scale(.8)
.
For modals that merely appear rather than fade into view, remove the .fade
class from your modal markup.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
If the height of modal changes while it is open, you should call $('#myModal').modal('handleUpdate')
to readjust the modal’s position in case a scrollbar appears.
Be sure to add role="dialog"
and aria-labelledby="..."
, referencing the modal title, to .modal
, and role="document"
to the .modal-dialog
itself.
Bootstrap modals have two sizes, available via css classes to be placed on a .modal-dialog
.
Size | Class | Modal max-width |
---|---|---|
Small | .modal-sm |
300px |
Default | None | 500px |
Large | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Our default modal without modifier class constitutes the “medium” size modal.
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-xl">Extra large modal</button>
<div class="modal fade cd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-lg">Large modal</button>
<div class="modal fade cd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-sm">Small modal</button>
<div class="modal fade cd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
The bootstrap modal plugin toggles your hidden content on request, using data attributes or JavaScript. It additionally adds .modal-open
to the <body>
to override default scrolling behavior and creates a .modal-backdrop
to implement a click area for dismissing shown modals when clicking outside the bootstrap modal.
Show a modal without writing JavaScript. Set data-toggle="modal"
on a controller component, like a button, along with a data-target="#foo"
or href="#foo"
to target a specific modal to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Create a modal with a single line of JavaScript:
var myModal = new coreui.Modal(document.getElementById('myModal'), options)
In version 3.x we removed jQuery in favor of regular JavaScript. CoreUI Library (@coreui/coreui) doesn’t need jQuery anymore. However, if you prefer to use jQuery over regular JavaScript, there is nothing to prevent.
Call a modal with id myModal
with a single line of JavaScript:
$('#myModal').modal(options)
Properties can be given via data attributes or JavaScript. For data attributes, add the option name to data-
, as in data-backdrop=""
.
Name | Type | Default | Description |
---|---|---|---|
backdrop | boolean or the string 'static' |
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard | boolean | true | Closes the modal when escape key is pressed |
focus | boolean | true | Puts the focus on the modal when initialized. |
show | boolean | true | Shows the modal when initialized. |
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Activates your content as a modal. Accepts an optional options object
.
var myModal = new coreui.Modal(document.getElementById('myModal'), {
keyboard: false
})
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.coreui.modal
or hidden.coreui.modal
event occurs).
myModal.toggle()
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.coreui.modal
event occurs).
myModal.show()
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.coreui.modal
event occurs).
myModal.hide()
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
myModal.handleUpdate()
Destroys an element’s modal.
myModal.dispose()
Static method which allows you to get the modal instance associated with a DOM element
var myModalEl = document.getElementById('myModal')
var modal = coreui.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">
).
Event type | Description |
---|---|
show.coreui.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
shown.coreui.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
hide.coreui.modal | This event is fired immediately when the hide instance method has been called. |
hidden.coreui.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
hidePrevented.coreui.modal | This event is fired when the modal is shown, its backdrop is static and a click outside the modal or a scape key press is performed. |
In version 3.x we removed jQuery in favor of regular JavaScript. CoreUI Library (@coreui/coreui) doesn’t need jQuery anymore. However, if you prefer to use jQuery over regular JavaScript, there is nothing to prevent.
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
.modal(options)
Activates your content as a modal. Accepts an optional options object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.coreui.modal
or hidden.coreui.modal
event occurs).
$('#myModal').modal('toggle')
.modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.coreui.modal
event occurs).
$('#myModal').modal('show')
.modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.coreui.modal
event occurs).
$('#myModal').modal('hide')
.modal('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).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Destroys an element’s modal.
Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">
).
Event Type | Description |
---|---|
show.coreui.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
shown.coreui.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
hide.coreui.modal | This event is fired immediately when the hide instance method has been called. |
hidden.coreui.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
$('#myModal').on('hidden.coreui.modal', function (e) {
// do something...
})