Tutorialsplane

Bootstrap Modal Plugin

Bootstrap Modal Plugin : Bootstrap Modals are basically dialog box/popup box which are used to provide some additional information or prompt user to perform some action. Bootstrap modals are easy to implement.

Bootstrap Modal Demo And Example


Create Basic Modal

Bootstrap Modal Plugin

Bootstrap Modal Example : Basic

  <!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tutorialsplane Modal Demo</h4>
            </div>
            <div class="modal-body">
                <p>Here the description starts here........</p>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->
<!----add button to trigger the modal---->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button>

Try it »

BootStrap Modal Sizes :

There are following bootstrap modal size available .
Note : Class .modal-sm is used for creating small modal.

Bootstrap Modal : Small

  <!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tutorialsplane Modal Demo : Small Modal</h4>
            </div>
            <div class="modal-body">
                <p>Here the description starts here........</p>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->
<!----add button to trigger the modal---->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button>

Try it »

Note : Class .modal-lg is used for creating large modal.

Bootstrap Modal : Large

  <!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tutorialsplane Modal Demo : Large Modal</h4>
            </div>
            <div class="modal-body">
                <p>Here the description starts here........</p>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->
<!----add button to trigger the modal---->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Large Modal</button>

Try it »

Gallery