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.