How to create a basic Modal component in Bootstrap ?

Last Updated : 04 Oct, 2021

Modals are JavaScript pop-ups that help us to deliver very useful content in the website like displaying save, delete, download or close confirmation on the website. Bootstrap modals are lightweight and multipurpose JavaScript components. They are also customizable and responsive components. In this article, we will learn about how to create a basic modal component using the bootstrap framework.

For that first, we have to import the following bootstrap CDN in our HTML file.

<!– Bootstrap CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>

<!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>

Example: In this example, we will see how to create a basic modal using the Bootstrap modal component.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <!-- Required meta tags -->
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
  
    <!-- Bootstrap CSS -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity= 
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous"> 
  
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal"
        style="margin: 2em;"> 
        Demo Modal 
    </button> 
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" 
        tabindex="-1" aria-labelledby="exampleModalLabel" 
        aria-hidden="true"> 
          
        <div class="modal-dialog"> 
            <div class="modal-content"> 
                <div class="modal-header"> 
                    <h5 class="modal-title" 
                        id="exampleModalLabel"> 
                        This is sample title. 
                    </h5> 
                    <button type="button" class="btn-close" 
                        data-bs-dismiss="modal" 
                        aria-label="Close"> 
                    </button> 
                </div> 
  
                <div class="modal-body"> 
                    This is the body of the modal. 
                </div> 
                <div class="modal-footer"> 
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-bs-dismiss="modal"> 
                        Close 
                    </button> 
  
                    <button type="button" 
                        class="btn btn-primary"> 
                        Save 
                    </button> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 