Modal

  1. Home
  2. Components
  3. Modal

Static Modal

Below is a static modal example (meaning its position and display have been overridden)

									
										<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-danger">Save</button>
														<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
													</div>
												</div>
											</div>
										</div>

Basic Modals

Default Modal

Toggle a modal via JavaScript by clicking the button above.

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body.

Disable Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Form Components

Login Form

Created Simple Login Form.

Form with Icons

Login Form With Icon.

Bootstrap Input Style Form

Bootstrap Form using Floating Label fields.

Varying modal content

Buttons that all trigger the same modal with slightly different contents. Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

Below is a live demo followed by example HTML and JavaScript.

										
											$('#exampleModal').on('show.bs.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. We'll use jQuery here, but you could use a data binding library or other methods instead.
												var modal = $(this)
												modal.find('.modal-title').text('New message to ' + recipient)
												modal.find('.modal-body input').val(recipient)
											})
										
									
									
										<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
										<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
										<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
										<div class="modal fade text-left" 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>
Navbar Color Options
Layout Options
Sidebar menu Background
Sidebar Background Image
background image
background image
background image
background image
More Themes
Try Layout Builder