Home >>Bootstrap Tutorial >Bootstrap Modal

Bootstrap Modal

Bootstrap modal is a popup-box you can also called it dialogue box. For built modal you can include HTML, CSS and bootstrap JavaScript modal plugin. The modal is always displayed on the top of your page where you can fixed the popup. When clicking on the button, modal’s come to down automatically from top. For creating the modal, Add class modal in a parent div, add data-toggle="modal" and data-target attribute in Button element.

Let's take an example of Bootstrap modal:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Modal</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Heading</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
         Put your text here..
        </div> 
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output:

Modal

Modal Size

You can also change the size of the modal by adding some predefined classes provides by bootstrap. You can add class modal-sm (for display small modal), modal-lg (for display large modal) and modal-xl (for display extra-large modal) together with the class .modal-dialog.

Let's take an example of Modal size:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Modal size</h2>
  <!-- Button to Open the Modal -->
  <div class="row">
  <div class="col-4">
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal1">
    Open modal
  </button>
    </div>
  <!-- The Modal -->
  <div class="modal fade" id="myModal1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Heading</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
         Put your text here..
		 (Modal-sm)
        </div> 
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
    <div class="col-4">
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal2">
    Open modal
  </button>
  </div>
  <!-- The Modal -->
  <div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Heading</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
         Put your text here..(Modal-lg)
        </div> 
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
    <div class="col-4">
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal3">
    Open modal
  </button>
   </div>
  <!-- The Modal -->
  <div class="modal fade" id="myModal3">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Heading</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
         Put your text here..(Modal-xl)
        </div> 
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>
</body>
</html>

Output:

Modal size

Scrolling Modal

You can also add scrolls to the content in modals. For displaying the large amount of content, bootstrap provides you predefined class . modal-dialog-scrollable together with class modal-dialog. It provides smooth scrolling to dialog box.

Let's take an example of scrolling modal:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Modal Scroll</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h1 class="modal-title">Heading</h1>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <h3>Smooth scrolling</h3>
          <p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
           <p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
		   <p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
		   <p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
		   <p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
		   <p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
		<p> Add text for scroll, Add text for scroll, Add text for scroll, Add text for scroll,Add text for scroll, Add text for scroll, </p>
		</div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div> 
</div>
</body>
</html>

Output:

Modal Scroll

Add animation

If you want to add animation to the modal. To add fading effects, add .fade class together with the class modal. You will see the effect at the of opening and closing the modal.

Let's take an example of fade animation:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Fading Modal</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal4">
    Open modal
  </button>
  <!-- The Modal -->
  <div class="modal fade" id="myModal4">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output:

Fading Modal

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads