You are viewing the deprecated 0.9.0 version of the website. Click here to view the latest version

Modal

A classic modal overlay, in which you can include any content you want

Colors No
Sizes No
Variables Yes

The modal structure is very simple:

  • modal: the main container
    • modal-background: a transparent overlay that can act as a click target to close the modal
    • modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content
    • modal-close: a simple cross located in the top right corner

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

To activate the modal, just add the is-active modifier on the .modal container. You may also want to add is-clipped modifier to a containing element (usually html) to stop scroll overflow.

No JavaScript
Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself.

Image modal

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

Launch image modal

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="https://versions.bulma.io/0.9.0/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

Modal card

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Type Default value Computed value
Name Type Default value Computed value
$modal-z string 40
$modal-background-background-color compound bulmaRgba($scheme-invert, 0.86)
$modal-content-width size 640px
$modal-content-margin-mobile size 20px
$modal-content-spacing-mobile size 160px
$modal-content-spacing-tablet size 40px
$modal-close-dimensions size 40px
$modal-close-right size 20px
$modal-close-top size 20px
$modal-card-spacing size 40px
$modal-card-head-background-color color $background hsl(0, 0%, 96%)
$modal-card-head-border-bottom size 1px solid $border
$modal-card-head-padding size 20px
$modal-card-head-radius size $radius-large 6px
$modal-card-title-color color $text-strong hsl(0, 0%, 21%)
$modal-card-title-line-height string 1
$modal-card-title-size size $size-4 1.5rem
$modal-card-foot-radius size $radius-large 6px
$modal-card-foot-border-top size 1px solid $border
$modal-card-body-background-color color $scheme-main hsl(0, 0%, 100%)
$modal-card-body-padding size 20px

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!