
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>
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>
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>
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>
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="form-group"> <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="form-group"> <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="form-group"> <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="form-group"> <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="form-group"> <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="form-group"> <label for="field-6" class="control-label">Zip</label> <input type="text" class="form-control" id="field-6" placeholder="123456"> </div> </div> </div>
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>
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>
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.
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>
Call a modal with id myModal
with a single line of JavaScript:
$('#myModal').modal(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. |
.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')
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... })