Basic Example
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<!-- 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">
Woohoo, you're reading this text in a modal!
</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>
Static backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">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">
I will not close if you click outside me. Don't even try to press escape key.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
<!-- 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>
Vertically centered
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>
Using the grid
Utilize the Bootstrap grid system within a modal by nesting .container-fluid within
the .modal-body. Then, use the normal grid system classes as you would anywhere
else.
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="mb-15">
<label for="field-1" class="control-label">Name</label>
<input type="text" class="form-control" id="field-1" placeholder="John">
</div>
</div>
<div class="col-md-6">
<div class="mb-15">
<label for="field-2" class="control-label">Surname</label>
<input type="text" class="form-control" id="field-2" placeholder="Doe">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mb-15">
<label for="field-3" class="control-label">Address</label>
<input type="text" class="form-control" id="field-3"
placeholder="Address">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="mb-15">
<label for="field-4" class="control-label">City</label>
<input type="text" class="form-control" id="field-4"
placeholder="Boston">
</div>
</div>
<div class="col-md-4">
<div class="mb-15">
<label for="field-5" class="control-label">Country</label>
<input type="text" class="form-control" id="field-5"
placeholder="United States">
</div>
</div>
<div class="col-md-4">
<div class="mb-15">
<label for="field-6" class="control-label">Zip</label>
<input type="text" class="form-control" id="field-6"
placeholder="123456">
</div>
</div>
</div>
Optional sizes
Modals have three optional sizes, available via modifier classes to be placed on a
.modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal
scrollbars on narrower viewports.
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
Positions
You can change the positions that appear by adding class with .modal-dialog,
corresponding to the following positions:
.modal-top-left, .modal-top-right, .modal-bottom-left,
.modal-bottom-center, .modal-bottom-right,
.modal-slide-left, .modal-slide-right
<div id="modal-top-right" tabindex="-1" role="dialog" aria-labelledby="TopRightLabel"
class="modal fade" aria-hidden="true">
<div class="modal-dialog modal-top-right" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="TopRightLabel">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">
Woohoo, you're reading this text in a modal!
</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>
Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. 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.
Via data attributes
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller
element, 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>
Via JavaScript
Call a modal with id myModal with a single line of JavaScript:
$('#myModal').modal(options)
Options
Options can be passed via data attributes or JavaScript. For data attributes, append 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 or on escape key press. |
| 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. |
Methods
.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.bs.modal or hidden.bs.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.bs.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.bs.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.
$('#myModal').modal('dispose')
Events
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.bs.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.bs.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.bs.modal | This event is fired immediately when the hide instance method has been
called. |
| hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| hidePrevented.bs.modal | This event is fired when the modal is shown, its backdrop is static and
a click outside the modal or an escape key press is performed. |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})