← all Bulma classes list

Bulma class: .box

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

Preview

Image

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

Use Shuffle AI to build your own Bulma CSS templates

Quickly design stunning Bulma CSS templates with the power of Shuffle AI — no coding required.

Check .box in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

More in Bulma Containers