Bulma Box

A box is an element in Bulma framework that is used to contain other elements e.g. text, images, buttons, etc.

A Bulma box is simply a container with the following properties:

- A border
- Radius
- Some padding
- A shadow

How to create a box in Bulma?

A Bulma box can be created by using the box modifier in the main container (a div element etc.). Then you may use various content elements like a paragraph, span, images, etc.

The example below shows a simple box with a paragraph, tags in Bulma, and a few font-awesome icons:

Example code:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>


</head>

<body>

<div class="container">

<div class="box">

  <article class="media">

    <div class="media-left">

      <figure class="image is-64x64">

        <img src="https://bulma.io/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>

        <span class="tag">CSS</span> <span class="tag">HTML</span> <span class="tag">JavaScript</span>

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


</div>

</body>

</html>

Another example with three boxes

Now see the example below with three boxes with different elements for contents.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>




</head>

<body>

<div class="container">

<div class="box">

  <article class="media">

    <div class="media-left">

      <figure class="image is-64x64">

        <img src="https://bulma.io/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>

        <span class="tag">CSS</span> <span class="tag">HTML</span> <span class="tag">JavaScript</span>

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







<div class="box">

  <article class="media">

    <div class="media-left">

      <figure class="image is-64x64">

        <img src="https://bulma.io/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>







<div class="box">

  <article class="media">

    <div class="media-left">

      <figure class="image is-64x64">

        <img src="https://bulma.io/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>

      <button class="button is-info is-small">Like</button>

      <button class="button is-primary is-small">Share</button>

      <button class="button is-success is-small">Bookmark</button>

    </div>

  </article>

</div>

</div>

</body>

</html>

Customizing the box

You may customize the look of the box by using Saas variables.

The following variables are available for the box element:

$box-background-color
$box-color
$box-radius
$box-shadow
$box-padding
$box-link-hover-shadow
$box-link-active-shadow

To learn how to customize box and other Bulma elements, go to this section here.

How to create a box in Bulma?

Another example with three boxes

Customizing the box

Learn More: