Bootstrap 4 Modal Tutorial With Example

In Bootstrap 4 Modal Tutorial With Example, you will learn how to create modals with Bootstrap 4. Modal is generally a dialog box or popup window that is used to provide information to the user or prompt user to take necessary actions before moving on. Modals are mostly used to warn users for situations like session timeout or to receive their final confirmation before going to perform any critical actions such as saving or deleting data.

Bootstrap 4 Modal Tutorial With Example

Bootstrap allows you to add a modal dialog box to your website. A modal is a dialog box that takes a focus while the rest of the screen is dimmed or grayed out. A Modal popup can be closed either by clicking on a close button or clicking outside the modal window.

#1: Bootstrap 4 Modal

The modal is a component that is displayed as a popup dialog box over the page, making it perfect for things like AJAX forms, alerts, error messages.

First, we will create a button that is going to display our modal. We will create a simple Bootstrap 4 button and assign it two attributes with values.

We will implement the data-target attribute with the value referencing the id of the modal element itself and data-toggle set to modal.

The modal is created using a <div> container with the class .modal. Inside a modal, you can have the header, body and a footer, wrapped in a container with a .modal-dialog class. The header has a class .modal-header, the body has .modal-body, and the footer – .modal-footer.

You can also add the close button with data-dismiss=modal class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Modal Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Modal</h2>
  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#data">
    Open Modal
  </button>
   <!-- Modal -->
   <div class="modal" id="data">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Welcome</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Hello Investmentnovel
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap modal will look like below screenshot.

Bootstrap 4 Modal Example

#2: Bootstrap 4 Modal Animation

You can use a .fade class to add the fading effect when opening and closing the modal.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Modal Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Modal Animation</h2>
  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#data">
    Open Modal
  </button>
   <!-- Modal -->
   <div class="modal fade" id="data">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Welcome</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Hello Investmentnovel
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap modal animation will look like below screenshot.

Bootstrap 4 Modal Animation Example

#3: Bootstrap 4 Modal Size

It is possible to set the size of the modal using classes. By default, modals are medium in size, but you can change that by adding the certain class to the .modal-dialog container.  You can increase or decrease a size by adding .modal-lg or .modal-sm class to the .modal-dialog class.

Example Of Small Modal

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Modal Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Small Modal</h2>
  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#data">
    Open Modal
  </button>
   <!-- Modal -->
   <div class="modal fade" id="data">
    <div class="modal-dialog  modal-sm">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Welcome</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Hello Investmentnovel
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap small modal size will look like below screenshot.

Bootstrap 4 Small Modal Size Example

Example Of Large Modal

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Modal Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Large Modal</h2>
  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#data">
    Open Modal
  </button>
   <!-- Modal -->
   <div class="modal fade" id="data">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Welcome</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Hello Investmentnovel
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap large modal size will look like below screenshot.

Bootstrap 4 Large Modal Size Example

#4: Bootstrap 4 Centered Modal

Center the modal vertically and horizontally within a page, using the .modal-dialog-centered class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Modal Tutorial With Example</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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Centered Modal</h2>
  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#data">
    Open Modal
  </button>
   <!-- Modal -->
   <div class="modal fade" id="data">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Welcome</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Hello Investmentnovel
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>

The example of a Bootstrap centered modal will look like below screenshot.

Bootstrap 4 Centered Modal Example

At last, our Bootstrap 4 Modal Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.