Bulma Modal Card

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.

Output:

Example 2: Another example illustrating the Bulma Modal card.

Output:

Reference: https://bulma.io/documentation/components/modal/#modal-card