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.

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.

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.

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).

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/images/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/images/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/images/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/images/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/images/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.

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/images/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.

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/images/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/images/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/images/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/images/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.

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.

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.

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.

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.

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.

SHOW CODE
5

Overlay colors

Default overlay

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

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.

Success overlay

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

Error overlay

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

Warning overlay

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

Info overlay

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