Bulma Modal Card

Last Updated : 13 Jan, 2023

Bulma is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

In this article, we will learn about Bulma Modal cards. Bulma framework provides the user a modal overlay in which we can add any content. The modal card can include anything like text, buttons, links, images, etc. The full implementation of the Bulma Modal card is shown below and also discussed the classes used in creating a modal card.

Bulma Modal Classes:

modal-card: This class is used for creating a modal card container.
modal-card-head: This class is used for adding a header to a modal card.
modal-card-title: This class is used for adding the title to your modal card.
modal-card-body: This class is used for adding content to your modal card.
modal-card-foot: This class is used for adding footer content to your modal card.

Syntax:

<div class="modal">
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">...</p>      
        ...
    </header>
    <div class="modal-card-body">
        ...
    </div>
    <footer class="modal-card-foot">
        ...
    </footer>
  </div>
</div>

Example 1: Below example illustrates the Bulma Modal card using the above classes.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bulma Modal Card</title> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
</head> 
<body class="has-text-centered content"> 
    <h1 class="title has-text-success">GeeksforGeeks</h1> 
    <h2 class="subtitle">Bulma Modal Card</h2> 
    <div class="container"> 
        <div class="modal" id="modal1"> 
            <div class="modal-background"></div> 
            <div class="modal-card"> 
                <header class="modal-card-head"> 
                    <p class="modal-card-title">Welcome to GeeksforGeeks</p> 
  
  
                    <button class="delete" aria-label="close"></button> 
                </header> 
                <section class="modal-card-body"> 
                    <h1>Hola!</h1> 
                      
<p>Welcome Geek! Learn all CS fundamentals, do programming,  
                       participate in contests, an many more.</p> 
  
  
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220211204421/logo-200x200.jpg"
                          alt=""> 
                </section> 
                <footer class="modal-card-foot"> 
                    <button class="button is-danger">Cancel</button> 
                </footer> 
            </div> 
        </div> 
        <button onclick="openModal();" class="button is-success"> 
            Open Modal  
        </button> 
    </div> 
  
    <script> 
       // Function for opening the modal 
       function openModal()  
       { 
        // is-active class of the modal 
        document.getElementById("modal1").classList.add("is-active"); 
       } 
       // Adding event listeners for closing the modal 
        document.querySelectorAll( 
        ".modal-background, .modal-close," + 
        ".modal-card-head .delete,.modal-card-foot .button" 
       ) 
        .forEach(($el) => { 
          const $modal = $el.closest(".modal"); 
  
          $el.addEventListener("click", () => { 
            // removing is-active class from modal 
            $modal.classList.remove("is-active"); 
          }); 
        }); 
    </script> 
</body> 
</html> 

Output:

Bulma Modal Card

Example 2: Another example illustrating the Bulma Modal card.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bulma Modal Card</title> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
    <style> 
      .container  
      { 
        margin-top: 25px; 
      } 
    </style> 
</head> 
  
<body class="has-text-centered content"> 
    <h1 class="title has-text-success">GeeksforGeeks</h1> 
    <h2 class="subtitle">Bulma Modal Card</h2> 
    <div class="container"> 
        <div class="modal" id="modal1"> 
            <div class="modal-background"></div> 
            <div class="modal-card"> 
              <header class="modal-card-head"> 
                <p class="modal-card-title">GeeksforGeeks</p> 
  
  
                <button class="delete" aria-label="close"></button> 
              </header> 
              <section class="modal-card-body left"> 
                <h1>Learn at GeeksforGeeks</h1> 
                  
<p>Find below all list of courses.</p> 
  
  
                <ol class="is-lower-alpha has-text-left"> 
                  <a href= 
"https://www.geeksforgeeks.org/courses/dsa-self-paced?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=dsa-self-paced"> 
                     <li>Fork Java</li> 
                  </a>                   
                  <a href= 
"https://www.geeksforgeeks.org/courses/fork-java"> 
                    <li>DSA- Self Paced</li> 
                  </a> 
                  <a href= 
"https://www.geeksforgeeks.org/courses/system-design-live?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=system-design-live"> 
                     <li>System Design</li> 
                  </a> 
                  <a href= 
"https://www.geeksforgeeks.org/courses/full-stack-node?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=full-stack-node 
                    <li>Full Stack Development with React & Node JS - Live</li> 
                  </a> 
                </ol> 
                 <a href= 
"https://www.geeksforgeeks.org/courses?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=courses" class="subtitle"> 
                  Find more 
                 </a> 
              </section> 
              <footer class="modal-card-foot"> 
                <button class="button is-danger">Cancel</button> 
              </footer> 
            </div> 
        </div> 
        <button onclick="openModal();" class="button is-success"> 
           Explore  
        </button> 
    </div> 
  
    <script> 
          
        // Function to open the modal 
        function openModal()  
       { 
         // Add is-active class on the modal 
         document.getElementById("modal1").classList.add("is-active"); 
       } 
  
       // Add event listeners to close the modal 
       // whenever user click outside modal 
        document.querySelectorAll( 
          ".modal-background, .modal-close," +  
          ".modal-card-head .delete, .modal-card-foot .button" 
        ) 
       .forEach(($el) => { 
          const $modal = $el.closest(".modal"); 
  
          $el.addEventListener("click", () => { 
            // Remove the is-active class from the modal 
            $modal.classList.remove("is-active"); 
          }); 
        }); 
    </script> 
</body> 
</html> 