Bulma Box

The Box component is one of the simplest yet most useful components in Bulma. It provides a white container with subtle shadows and padding, perfect for grouping content together in a visually appealing way.

Basic Box

The basic box is created with a single class:

<div class="box">
  <p class="title">Box Title</p>
  <p class="subtitle">Box Subtitle</p>
  <p>This is a simple box component with padding and shadow.</p>
</div>

Box with Different Content Types

Box with Media Content

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

Box with Form Elements

<div class="box">
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Enter your name" />
    </div>
  </div>
  
  <div class="field">
    <label class="label">Message</label>
    <div class="control">
      <textarea class="textarea" placeholder="Enter your message"></textarea>
    </div>
  </div>
  
  <button class="button is-primary">Submit</button>
</div>

Box with Lists

<div class="box">
  <h2 class="title is-4">Features List</h2>
  <ul>
    <li>Responsive design</li>
    <li>Flexbox-based</li>
    <li>Modern and clean</li>
    <li>Easy to customize</li>
  </ul>
</div>

Nested Boxes

You can nest boxes inside each other for complex layouts:

<div class="box">
  <h2 class="title is-4">Main Container</h2>
  <p>This is the main box content.</p>
  
  <div class="box">
    <h3 class="title is-5">Nested Box</h3>
    <p>This is a nested box with its own content.</p>
    
    <div class="box">
      <p>Deeply nested box for additional grouping.</p>
    </div>
  </div>
</div>

Box with Colors

Combine box with color helpers:

<!-- Primary Box -->
<div class="box has-background-primary has-text-white">
  <p class="title has-text-white">Primary Box</p>
  <p>This box has a primary background.</p>
</div>

<!-- Success Box -->
<div class="box has-background-success-light">
  <p class="title">Success Box</p>
  <p>This box has a light success background.</p>
</div>

<!-- Warning Box with Border -->
<div class="box has-background-warning-light has-border-warning">
  <p class="title">Warning</p>
  <p>Important notice with warning styling.</p>
</div>

Box in Columns Layout

<div class="columns">
  <div class="column">
    <div class="box">
      <h3 class="title is-5">Feature 1</h3>
      <p>Description of feature 1.</p>
    </div>
  </div>
  
  <div class="column">
    <div class="box">
      <h3 class="title is-5">Feature 2</h3>
      <p>Description of feature 2.</p>
    </div>
  </div>
  
  <div class="column">
    <div class="box">
      <h3 class="title is-5">Feature 3</h3>
      <p>Description of feature 3.</p>
    </div>
  </div>
</div>

Box with Footer

<div class="box">
  <div class="content">
    <h3 class="title is-4">Article Title</h3>
    <p>This is the main content of the article. It contains important information that users need to read.</p>
  </div>
  
  <footer class="box-footer">
    <div class="level">
      <div class="level-left">
        <span class="tag is-info">Tagged: CSS</span>
      </div>
      <div class="level-right">
        <button class="button is-small is-primary">Read More</button>
      </div>
    </div>
  </footer>
</div>

Interactive Box

<!-- Hover effect box -->
<div class="box is-clickable" style="cursor: pointer;">
  <h3 class="title is-5">Clickable Box</h3>
  <p>This box has a hover effect and is clickable.</p>
</div>

<!-- Box with loading state -->
<div class="box">
  <div class="level">
    <div class="level-left">
      <h3 class="title is-5">Loading Content</h3>
    </div>
    <div class="level-right">
      <button class="button is-loading">Loading</button>
    </div>
  </div>
</div>

Responsive Box Variations

<!-- Box with different padding on mobile -->
<div class="box p-2-mobile p-4-tablet">
  <p>This box has different padding on mobile vs tablet.</p>
</div>

<!-- Full-width box on mobile -->
<div class="box is-fullwidth-mobile">
  <p>This box becomes full width on mobile devices.</p>
</div>

Use Cases

1. Dashboard Widgets

<div class="columns is-multiline">
  <div class="column is-3">
    <div class="box has-text-centered">
      <p class="title">150</p>
      <p class="subtitle">New Users</p>
    </div>
  </div>
  <div class="column is-3">
    <div class="box has-text-centered">
      <p class="title">1,250</p>
      <p class="subtitle">Page Views</p>
    </div>
  </div>
  <div class="column is-3">
    <div class="box has-text-centered">
      <p class="title">$2,500</p>
      <p class="subtitle">Revenue</p>
    </div>
  </div>
  <div class="column is-3">
    <div class="box has-text-centered">
      <p class="title">85%</p>
      <p class="subtitle">Growth</p>
    </div>
  </div>
</div>

2. User Profile Card

<div class="box">
  <div class="media">
    <div class="media-left">
      <figure class="image is-96x96">
        <img class="is-rounded" src="profile.jpg" alt="Profile" />
      </figure>
    </div>
    <div class="media-content">
      <p class="title is-4">John Doe</p>
      <p class="subtitle is-6">@johndoe</p>
      <div class="content">
        <p>Frontend Developer | Bulma Expert</p>
        <p>📍 San Francisco, CA</p>
        <p>
          <span class="tag is-primary">JavaScript</span>
          <span class="tag is-info">React</span>
          <span class="tag is-success">CSS</span>
        </p>
      </div>
    </div>
  </div>
</div>

3. Pricing Card

<div class="box has-text-centered">
  <p class="title is-3">Pro</p>
  <p class="subtitle is-5">$29/month</p>
  
  <div class="content">
    <ul>
      <li>✅ 10 Projects</li>
      <li>✅ 5GB Storage</li>
      <li>✅ Priority Support</li>
      <li>✅ Advanced Analytics</li>
    </ul>
  </div>
  
  <button class="button is-primary is-fullwidth">Get Started</button>
</div>

Customization

/* Custom box styles */
.box {
  /* Custom shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Custom border radius */
  border-radius: 12px;
  
  /* Custom border */
  border: 1px solid #e0e0e0;
  
  /* Custom transition */
  transition: all 0.3s ease;
}

/* Hover effect */
.box:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Custom box variations */
.box.is-accent {
  border-left: 4px solid #ff3860;
}

.box.is-highlighted {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

Best Practices

• Use boxes to group related content together
• Maintain consistent padding within boxes
• Combine with columns for responsive grid layouts
• Use color helpers to create visual hierarchy
• Add subtle hover effects for interactive elements
• Keep box content focused and concise

Up next: Bulma Breadcrumb Navigation