Box

A white box to contain other elements

Colors No

Sizes No

Variables Yes

The box element is simply a container with a shadow, a border, a radius, and some padding.
For example, you can include a media object:

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

      <div class="box">
  <article class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img src="https://versions.bulma.io/0.8.1/images/placeholders/128x128.png" alt="Image">
      </figure>
    </div>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
          <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
        </p>
      </div>
      <nav class="level is-mobile">
        <div class="level-left">
          <a class="level-item" aria-label="reply">
            <span class="icon is-small">
              <i class="fas fa-reply" aria-hidden="true"></i>
            </span>
          </a>
          <a class="level-item" aria-label="retweet">
            <span class="icon is-small">
              <i class="fas fa-retweet" aria-hidden="true"></i>
            </span>
          </a>
          <a class="level-item" aria-label="like">
            <span class="icon is-small">
              <i class="fas fa-heart" aria-hidden="true"></i>
            </span>
          </a>
        </div>
      </nav>
    </div>
  </article>
</div>
    

Variables #

You can use these variables to customize this element. 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
`$box-color`	color	`$text`	`hsl(0, 0%, 29%)`
`$box-background-color`	color	`$scheme-main`	`hsl(0, 0%, 100%)`
`$box-radius`	size	`$radius-large`	`6px`
`$box-shadow`	size	`0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
`$box-padding`	size	`1.25rem`
`$box-link-hover-shadow`	size	`0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link`
`$box-link-active-shadow`	size	`inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link`

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

Box

Variables #

Support Bulma 😃

The official Bulma book! 😲