Bootstrap Modal, Bootstrap Popup Box, How To Create a Modal, Bootstrap Modal Size, Bootstrap Small Modal, Bootstrap Large Modal, How to create popup box in Bootstrap

Bootstrap Modal, Bootstrap Popup Box

Modal is a popup box that always displayed on top of your current page. When you want to show some message then we use popup box. You can setup modal on button click.

How To Create a Modal

To create bootstrap popup box first of all place a button and set data-toggle="modal" then data-target="#mypopup"
Than in <div> use class .modal fade and id="mypopup". Bootstrap modal basically have 3 step header, body and footer. Follow the example

Example:- 

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

  <!-- The Modal -->
  <div class="modal fade" id="mypopup">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Your Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Your Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>

Modal Size

If you want you can change your popup modal size by using bootstrap classes .modal-sm for small modal and .modal-lg for large modal with .modal-dialog class.

Small Modal

Simply add following code.
 <div class="modal-dialog modal-sm">

Large Modal

Just add following code.
 <div class="modal-dialog modal-lg">

Note:- By default your modal will be medium size