Everything you need to create a website with Bulma


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

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 verticaly 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

Launch example modal

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

To activate the modal, just add the is-active modifier on the .modal container

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="">
  <button class="modal-close"></button>

Modal card

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

Launch 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"></button>
    <section class="modal-card-body">
      <!-- Content ... -->
    <footer class="modal-card-foot">
      <a class="button is-success">Save changes</a>
      <a class="button">Cancel</a>

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!