Bootstrap 4
  Prev Page
Next Page  
Bootstrap 4 Modals
The Bootstrap modal component is a dialog box/popup window that is displayed on top of the current page. To create a modal, use the .modal class along with various other .modal-* classes to define each section of the modal.
Basic Modal

By Clicking the toggle button working modal below. It will slide down and fade in from the top of the page.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click Here!
</button>
<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">Title (Free Time Learning)</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</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>
Output :
Modal Size

Change the modal size by adding the .modal-sm class for small modals or .modal-lg class for large modals.

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smModal">
Small modal
</button>

<div class="modal fade" id="smModal">
<div class="modal-dialog modal-sm">
  <div class="modal-content">
	<div class="modal-header">
	  <h4 class="modal-title">Title (F T L)</h4>
	  <button type="button" class="close" data-dismiss="modal">&times;</button>
	</div>
	<div class="modal-body">
	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</div>
	<div class="modal-footer">
	  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	</div>
	
  </div>
</div>
</div>


<!-- Large modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lgModal">
Large modal
</button>

<div class="modal fade" id="lgModal">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
	<div class="modal-header">
	  <h4 class="modal-title">Title (Free Time Learn)</h4>
	  <button type="button" class="close" data-dismiss="modal">&times;</button>
	</div>
	<div class="modal-body">
	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
	when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>
	</div>
	<div class="modal-footer">
	  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	</div>
	
  </div>
</div>
</div>
Output :
Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click Here!
</button>
<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">Title (Free Time Learning)</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
	  <div class="modal-body">
		  <h5>Popover in a modal</h5>
		  <p>This <a href="#" role="button" data-toggle="popover" title="Popover Header" class="btn btn-info btn-sm popover-test" data-content="Sample Content.....">button</a> triggers a popover on click.</p>
		  <hr>
		  <h5>Tooltips in a modal</h5>
		  <p>The <a href="#" data-toggle="tooltip" data-placement="top" class="tooltip-test" title="Free Time Learn">( F T L )</a> have tooltips on hover.</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>

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
	$('[data-toggle="popover"]').popover();   
});
</script>
Output :
  Prev Page
Next Page