Bootstrap Modal Plugin

In this tutorial we discuss BS Modal Plugin

The Modal Plugin

This is a dialog box or popup window that is displayed on top of the current page:

How To Create a Modal

The following example shows how to create a basic modal:


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      <div class="modal-body">
        <p>I'm model plugin.</p>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Try it Yourself »

Example Explained

The "Modal content" part:

The <div> with class="modal-content" styles the modal (border, background-color, etc.). Inside this <div>, add the modal's header, body, and footer.

The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.

The .modal-body class is define the body of model. You can add any HTML markup here; paragraphs, images, videos, etc.

The .modal-footer class change style view footer of the modal.

Modal Size

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

Add the size class to the <div> element with class .modal-dialog:

For Small Modal

<div class="modal-dialog modal-sm">
Try it Yourself »

For Large Modal

<div class="modal-dialog modal-lg">
Try it Yourself »