Modal

Basic Modal

Basic Bootstrap Modal Example

HTML Code for this Element

<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
		</button>
		</div>
		<div class="modal-body">
			Content Goes Here
		</div>
		<div class="modal-footer ">
			<button type="button" class="btn btn-light">Save changes</button>
			<button type="button" class="btn btn-primary" data-bs-dismiss="modal">
				Close
			</button>
		</div>
	</div>
</div>

Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it.

HTML Code for this Element

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Content Goes Here
      </div>
      <div class="modal-footer">
	  	<button type="button" class="btn btn-primary">Understood</button>
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			Close
		</button>
      </div>
    </div>
  </div>
</div>

Scrolling Long Content

When modals are too long to fit into a single screen, they will scroll vertically but remain independent of the page itself.

HTML Code for this Element

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop2">
	Launch extra long modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
			<h1 class="modal-title fs-5" id="staticBackdropLabel">Long Modal</h1>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body d-flex align-items-center justify-content-center" style="height: 120vh;">
				...a lot of content...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save Data</button>
			<button type="button" class="btn btn-outline primary" data-bs-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>

Scrollable modal content

You can add a .modal-dialog-scrollable to the .modal-dialog to make the content scrollable.

HTML Code for this Element

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollableContent">
	Launch scrollable modal
</button>

<!-- Scrollable modal -->
<div class="modal fade" id="scrollableContent" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
			<h1 class="modal-title fs-5" id="staticBackdropLabel">Long Modal</h1>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body d-flex align-items-center justify-content-center" style="height: 30vh;">
				<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
				...a lot of content...
				<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save Data</button>
			<button type="button" class="btn btn-outline primary" data-bs-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>

Vertically centered

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

HTML Code for this Element

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#vCentered">
	Vertically Centered Modal
</button>

<!-- Modal -->
<div class="modal fade" id="vCentered" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
	<div class="modal-content">
		<div class="modal-header">
		<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
			Content goes here...
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Save changes</button>
			<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
		</div>
	</div>
	</div>
</div>

Varying Modal Content

Have different triggers for the same modal with slightly different contents.

Javascript Code for this Element

const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const recipient = button.getAttribute('data-bs-whatever')
    // If necessary, you could initiate an Ajax request here
    // and then do the updating in a callback.

    // Update the modal's content.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

HTML Code for this Element

<ul class="list-group">
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  A list item
	  <span class="badge text-bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  A second list item
	  <span class="badge text-bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  A third list item
	  <span class="badge text-bg-primary rounded-pill">8</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">4</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">6</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
	  Another list item
	  <span class="badge text-bg-primary rounded-pill">5</span>
	</li>
</ul>

Toggle between Modals

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.

HTML Code for this Element

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>

Modal Sizing

Determine the size of your modal with modal-sm, modal-lg, modal-xl or leaving it emoty for the defaullt size

HTML Code for this Element

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#modalSM">Small Modal</button>
<!-- small Modal -->
<div class="modal fade" id="modalSM" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-sm">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5" id="staticBackdropLabel">I'm a small modal</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#modalDef">Default Modal</button>
<!-- small Modal -->
<div class="modal fade" id="modalDef" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5" id="staticBackdropLabel">I'm a default size modal</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>
<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#modalLG">Large Modal</button>
<!-- Large Modal -->
<div class="modal fade" id="modalLG" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-lg">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5" id="staticBackdropLabel">I'm a large modal</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>
<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#modalXL">Extra Large Modal</button>
<!-- Extra Large Modal -->
<div class="modal fade" id="modalXL" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-xl">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5" id="staticBackdropLabel">I'm an extra large modal</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

Fullscreen Modal

Modal that covers the user viewport.

HTML Code for this Element

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#fullAll">Fullscreen</button>
<!-- Modal -->
<div class="modal fade" id="fullAll" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5">Title</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#fullSM">Fullscreen below sm</button>
<!-- Modal -->
<div class="modal fade" id="fullSM" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen-sm-down">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5">Title</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#fullMD">Fullscreen below md</button>
<!-- Modal -->
<div class="modal fade" id="fullMD" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen-md-down">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5">Title</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#fullLG">Fullscreen below lg</button>
<!-- Modal -->
<div class="modal fade" id="fullLG" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen-lg-down">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5">Title</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#fullXL">Fullscreen below xl</button>
<!-- Modal -->
<div class="modal fade" id="fullXL" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen-xl-down">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5">Title</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>

<!-- trigger -->
<button class="btn btn-primary mb-1 me-1" data-bs-toggle="modal" data-bs-target="#fullXXL">Fullscreen below xxl</button>
<!-- Modal -->
<div class="modal fade" id="fullXXL" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen-xxl-down">
	  <div class="modal-content">
		<div class="modal-header">
		  <h1 class="modal-title fs-5">Title</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		</div>
		<div class="modal-body">
		  Content Goes Here
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">Understood</button>
		  <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
			  Close
		  </button>
		</div>
	  </div>
	</div>
</div>