Modals

Modal dialogs styles and variations.

Get Started

1

Modal sizes

Basic modal

Bulma modals are a flexible component. It acts like a container that can hold any type of content. This is a basic implementation displaying a simple flex card. To use, add the class .modal-trigger to the element that is supposed to trigger the modal after being clicked. Add data-modal="MyModalID" to the same element to target the appropriate modal.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="basic-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="basic-modal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body">
                <div class="content">
                    <h2 class="has-text-centered pb-20">Hello from modal !</h2>
                    <p class="pb-20">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->

Small modal

Bulma ships only with a predefined modal size. Bulkit adds two more sizes : small modals and large modals. To create a small modal, add the .modal-sm to the .modal wrapper.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="basic-small-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="basic-small-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body">
                <div class="content">
                    <h2 class="has-text-centered pb-20">Hello from small modal !</h2>
                    <p class="pb-20">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->

Large modal

Bulma ships only with a predefined modal size. Bulkit adds two more sizes : small modals and large modals. To create a large modal, add the .modal-lg to the .modal wrapper.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="basic-large-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="basic-large-modal" class="modal modal-lg">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body">
                <div class="content">
                    <h2 class="has-text-centered pb-20">Hello from large modal !</h2>
                    <p class="pb-20">Lorem ipsum dolor sit amet, has vero libris melius ea, omnis velit comprehensam duo an, meis ornatus eam ad. Ius ut labores scaevola.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->

Card modal

If you want to display more complex content in your modal, card modals might be a good option. Modal sizes are still relevant and will resize your card according to the chosen size. Just add the .modal-card class to the .modal-content element. You can then set a header (.modal-card-head), a body (.modal-card-body) and a footer (.modal-card-footer).

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="basic-large-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="card-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-card modal-content">
        <header class="modal-card-head">
            <p class="modal-card-title">Select users</p>
            <button class="delete is-medium modal-dismiss" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <!-- User -->
            <div class="flex-card light-bordered hover-inset padding-10 mb-10">
                <div class="content content-flex">
                    <div class="card-avatar">
                        <img src="assets/img/avatars/ben.jpg">
                    </div>
                    <div class="card-name">
                        <div class="name">Kevin Smith</div>
                        <div class="position">Software Engineer</div>
                    </div>
                    <div class="card-select ml-auto">
                        <i class="material-icons">done</i>
                    </div>
                </div>
            </div>
            <!-- /User -->
            <!-- User -->
            <div class="flex-card light-bordered hover-inset padding-10 mb-10">
                <div class="content content-flex">
                    <div class="card-avatar">
                        <img src="assets/img/avatars/carolin.png">
                    </div>
                    <div class="card-name">
                        <div class="name">Marjory Cambell</div>
                        <div class="position">Sales Representative</div>
                    </div>
                    <div class="card-select ml-auto">
                        <i class="material-icons">done</i>
                    </div>
                </div>
            </div>
            <!-- /User -->
            <!-- User -->
            <div class="flex-card light-bordered hover-inset padding-10 mb-10">
                <div class="content content-flex">
                    <div class="card-avatar">
                        <img src="assets/img/avatars/kareem.jpg">
                    </div>
                    <div class="card-name">
                        <div class="name">Kareem Jabbar</div>
                        <div class="position">Accountant</div>
                    </div>
                    <div class="card-select ml-auto">
                        <i class="material-icons">done</i>
                    </div>
                </div>
            </div>
            <!-- /User -->
            <!-- User -->
            <div class="flex-card light-bordered hover-inset padding-10 mb-10">
                <div class="content content-flex">
                    <div class="card-avatar">
                        <img src="assets/img/avatars/melany.jpg">
                    </div>
                    <div class="card-name">
                        <div class="name">Melany Rogers</div>
                        <div class="position">Software Engineer</div>
                    </div>
                    <div class="card-select ml-auto">
                        <i class="material-icons">done</i>
                    </div>
                </div>
            </div>
            <!-- /User -->
            <!-- User -->
            <div class="flex-card light-bordered hover-inset padding-10 mb-10">
                <div class="content content-flex">
                    <div class="card-avatar">
                        <img src="assets/img/avatars/jeffrey.jpg">
                    </div>
                    <div class="card-name">
                        <div class="name">Jared Blight</div>
                        <div class="position">CTO</div>
                    </div>
                    <div class="card-select ml-auto">
                        <i class="material-icons">done</i>
                    </div>
                </div>
            </div>
            <!-- /User -->
        </section>
        <footer class="modal-card-foot">
            <button class="button is-link modal-dismiss">Close</button>
            <button class="button btn-align raised accent-btn no-lh modal-dismiss save-btn is-disabled">Save</button> 
        </footer>
    </div>
</div>
<!-- /Modal Markup -->
2

Image modals

Single image modal

Modals can be used to display images. Add the .image-modal to the .modal container. Then insert an image inside the .modal-content tag. See the code example for more details about html structure.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="single-image-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="single-image-modal" class="modal image-modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="image-grid">
            <figure class="image is-4by3 cornered">
                <img src="assets/img/photos/woman-glasses-back.jpeg" alt="">
                <figcaption>
                    <h2>Woman with <span>Glasses</span></h2>
                    <p>Lorem ipsum sit dolor amet os ludicrum alea jacta est. <br><span>Credits : @Unsplash</span></p>
                    <a href="#">View more</a>
                </figcaption>
            </figure>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->

Carousel modal

A carousel can be embeded inside an image modal to display more elements. See the markup for more details. Don't forget to initialize the carousel with javascript.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="carousel-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="carousel-modal" class="modal image-modal">
    <div class="modal-background"></div>
    <div class="modal-content">

        <div class="image-grid">
            <div class="slick-gallery">
                <div class="gallery-item">
                    <figure class="image is-4by3 cornered">
                        <img src="assets/img/photos/woman-glasses-back.jpeg" alt="">
                        <figcaption>
                            <h2>Woman with <span>Glasses</span></h2>
                            <p>Lorem ipsum sit dolor amet os ludicrum alea jacta est. <br><span>Credits : @Unsplash</span></p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
                <div class="gallery-item">
                    <figure class="image is-4by3 cornered">
                        <img src="assets/img/photos/woman-glasses.jpeg" alt="">
                        <figcaption>
                            <h2>Woman with <span>Glasses</span></h2>
                            <p>Lorem ipsum sit dolor amet os ludicrum alea jacta est. <br><span>Credits : @Unsplash</span></p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
                <div class="gallery-item">
                    <figure class="image is-4by3 cornered">
                        <img src="assets/img/photos/adam_bradley.jpg" alt="">
                        <figcaption>
                            <h2>Keynote <span>Speaker</span></h2>
                            <p>Lorem ipsum sit dolor amet os ludicrum alea jacta est. <br><span>Credits : @Unsplash</span></p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
                <div class="gallery-item">
                    <figure class="image is-4by3 cornered">
                        <img src="assets/img/photos/joel_zimmerman.jpg" alt="">
                        <figcaption>
                            <h2>Keynote <span>Speaker</span></h2>
                            <p>Lorem ipsum sit dolor amet os ludicrum alea jacta est. <br><span>Credits : @Unsplash</span></p>
                            <a href="#">View more</a>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->
3

Modal forms

Vertical form layout

You can embed any type of form inside a modal. Just add your form inside the .modal-content element.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="vertical-form-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="vertical-form-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body">
                <h2 class="title has-text-centered is-3 mb-40">Login</h2>
                <div class="control-material is-accent">
                    <input class="material-input" type="text" required>
                    <span class="material-highlight"></span>
                    <span class="bar"></span>
                    <label>Name *</label>
                </div>
                <div class="control-material is-accent">
                    <input class="material-input" type="text" required>
                    <span class="material-highlight"></span>
                    <span class="bar"></span>
                    <label>Password *</label>
                </div>
                <p class="has-text-left mt-30">
                    <a class="no-account is-accent" href="#">Dont have an account?</a>
                </p>
                <div class="mt-20">
                    <button class="button button-cta btn-align accent-btn raised is-fullwidth no-lh">Login</button>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->

Horizontal form layout

You can embed any type of form inside a modal. Just add your form inside the .modal-content element.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger" data-modal="horizontal-form-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="horizontal-form-modal" class="modal modal-lg">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body">
                <h2 class="title is-4 text-bold mb-40">Create project</h2>
                <form>
                    <div class="columns mt-40">
                        <div class="column">
                            <div class="control">
                                <label>Project ID</label>
                                <input class="input is-medium mt-5" type="text">
                            </div>
                            <div class="control">
                                <label>Project name</label>
                                <input class="input is-medium mt-5" type="text">
                            </div>
                        </div>
                        <div class="column">
                            <div class="control">
                                <label>Project category</label>
                                <input class="input is-medium mt-5" type="text">
                            </div>
                            <div class="control">
                                <label>Project type</label>
                                <input class="input is-medium mt-5" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column">
                            <div class="control">
                                <textarea class="textarea is-grow" rows="5" placeholder="Enter a project description ..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="mt-10">
                        <button class="button btn-align no-lh raised accent-btn modal-dismiss">Create</button>
                        <button class="button is-link no-lh modal-dismiss">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->
4

Message modals

Success modal

You can create message modals wich are useful when you want to return a status. Message modals icons animation rely on vivus js library. Every modal type is controled by a javascript snippet. The following is a success modal, check the code examples for more details.

Open modal

Error modal

You can create message modals wich are useful when you want to return a status. Message modals icons animation rely on vivus js library. Every modal type is controled by a javascript snippet. The following is an error modal, check the code examples for more details.

Open modal

Warning modal

You can create message modals wich are useful when you want to return a status. Message modals icons animation rely on vivus js library. Every modal type is controled by a javascript snippet. The following is a warning modal, check the code examples for more details.

Open modal

Info modal

You can create message modals wich are useful when you want to return a status. Message modals icons animation rely on vivus js library. Every modal type is controled by a javascript snippet. The following is an info modal, check the code examples for more details.

Open modal
SHOW CODE 

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger success-trigger" data-modal="success-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="success-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body has-text-centered">
                <div class="content has-text-centered">
                    <div class="pb-20">
                        <div id="success-icon" class="vivus-svg modal-svg"></div>
                    </div>
                    <h2 class="title is-3 no-margin">Success !</h2>
                    <p class="pt-20">Things went as expected.</p>
                </div>
                <div class="mt-20">
                    <a class="button success-btn raised btn-align modal-dismiss">Proceed</a>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->
                                            

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger error-trigger" data-modal="error-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="error-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body has-text-centered">
                <div class="content has-text-centered">
                    <div class="pb-20">
                        <div id="error-icon" class="vivus-svg modal-svg"></div>
                    </div>
                    <h2 class="title is-3 no-margin">Oops !</h2>
                    <p class="pt-20">Something went wrong.</p>
                </div>
                <div class="mt-20">
                    <a class="button danger-btn raised btn-align modal-dismiss">Go back</a>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->
                                            

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger warning-trigger" data-modal="warning-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="warning-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body has-text-centered">
                <div class="content has-text-centered">
                    <div class="pb-20">
                        <div id="warning-icon" class="vivus-svg modal-svg"></div>
                    </div>
                    <h2 class="title is-3 no-margin">Warning !</h2>
                    <p class="pt-20">Are you sure to do this?</p>
                </div>
                <div class="mt-20">
                    <a class="button is-link btn-align modal-dismiss">Cancel</a>
                    <a class="button warning-btn raised btn-align modal-dismiss">Do it</a>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->
                                            

<!-- Modal trigger -->
<a class="button button-cta btn-align primary-btn raised modal-trigger info-trigger" data-modal="info-modal">Open modal</a>
<!-- /Modal trigger -->

<!-- Modal Markup -->
<div id="info-modal" class="modal modal-sm">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="flex-card simple-shadow">
            <div class="card-body has-text-centered">
                <div class="content has-text-centered">
                    <div class="pb-20">
                        <div id="info-icon" class="vivus-svg modal-svg"></div>
                    </div>
                    <h2 class="title is-3 no-margin">Info</h2>
                    <p class="pt-20">Read the hints to learn faster.</p>
                </div>
                <div class="mt-20">
                    <a class="button info-btn raised btn-align modal-dismiss">Go back</a>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large is-hidden" aria-label="close"></button>
</div>
<!-- /Modal Markup -->
5

Overlay colors

Default overlay

Several modal overlay colors are available. The default one is a light grey.

Open modal

Hero overlay

The hero overlay takes the color of your main hero gradient, predefined in the currently active color scheme. To activate it, add the .modal-hero class to the .modal parent container.

Open modal

Success overlay

You can display a success overlay. To activate it, add the .modal-success class to the .modal parent container.

Open modal

Error overlay

You can display a error overlay. To activate it, add the .modal-error class to the .modal parent container.

Open modal

Warning overlay

You can display a warning overlay. To activate it, add the .modal-warning class to the .modal parent container.

Open modal

Info overlay

You can display a info overlay. To activate it, add the .modal-info class to the .modal parent container.

Open modal