Bootstrap 4 Modals

Bootstrap 4 modals are a dialog box/popup window that provides either the most important information to the user or taking important information from the user.

Example

Click To See Modal Example

Remember: Modals are built with HTML, CSS, and JavaScript.It has mainly three section namely the header,body and footer.Each has its own role and importance.

Bootstrap 4 Modal

General Syntax

		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
  Open modal
</button>
<div class="modal" tabindex="-1" role="dialog" id="modalId"> </div>
	  
Try It Now

Source Code

	
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
  Open modal
</button>
<div class="modal" tabindex="-1" role="dialog" id="modalId">
  <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>	
	
Try it yourself

Remember:In the above example data attributesdata-toggle="modal" & data-target="#modalId" is used inside button.Assign modal id to the button data attribute (data-target).

Boostrap 4 Modal Animation

To create modal animation ,use .fade class to modal container having .modal class.

General Syntax

		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
  Open modal
</button>     
<div class="modal fade" tabindex="-1" role="dialog" id="modalId"></div>
	  
Try It Now

Source Code

	
		<div class="container text-center my-2"> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
  Open modal
</button>
</div><!--/container-->
<div class="modal fade" tabindex="-1" role="dialog" id="modalId">
  <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>	
	
Try it yourself

Remember:To animate bootstrap modal,assign.modal to the modal container having .modal.

Bootstrap 4 Modal Size

Bootstrap modal size can be controlled by adding .modal-sm for small modal and .modal-lg class for large modal to the <div> that contains .modal-dialog.

General Syntax

		<div class="modal-dialog modal-lg"></div>
<div class="modal-dialog modal-sm"></div>
	  
Try It Now

Source Code

	
		<!-- large modal  -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLargeId">Large Model</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalLargeId">
  <div class="modal-dialog modal-lg" 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>	
	
Try it yourself

Remember:In the above example,.modal-sm & .modal-lg is assigned to the the <div> having .modal-dialog.

Centered Modal

To create modal vertical as well as horizontally center within the page, use .modal-dialog-centered class to the div that contain class .modal-dialog

General Syntax

		<div class="modal-dialog modal-dialog-centered" role="document"></div>
	  
Try It Now

Source Code

	
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">Centered Model</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalId">
  <div class="modal-dialog modal-dialog-centered" 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>	
	
Try it yourself

Remember:In the above example,.modal-dialog-centered is assigned to the the <div> having .modal-dialog.

Our Tutorials

Bootstrap 4 Modals
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS