Bulma Columns

Bulma's column system is built with Flexbox and provides a simple, intuitive way to create responsive layouts. Unlike traditional grid systems, Bulma columns automatically resize and wrap as needed.

Basic Columns

The fundamental structure uses .columns and .column:

Equal Width Columns

<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

Column Sizes

Control column width using size modifiers:

Specific Sizes

<div class="columns">
  <div class="column is-half">Half width</div>
  <div class="column">Auto</div>
  <div class="column">Auto</div>
</div>

<div class="columns">
  <div class="column is-one-third">33.33%</div>
  <div class="column is-two-thirds">66.66%</div>
</div>

<div class="columns">
  <div class="column is-one-quarter">25%</div>
  <div class="column">Auto</div>
  <div class="column is-half">50%</div>
</div>

All Available Sizes

Responsive Columns

Bulma provides responsive modifiers for different screen sizes:

Responsive Size Modifiers

<!-- Mobile: Full width, Desktop: Half width -->
<div class="column is-full-mobile is-half-desktop">

<!-- Tablet: One third, Desktop: One quarter -->
<div class="column is-one-third-tablet is-one-quarter-desktop">

<!-- Always full except on widescreen -->
<div class="column is-full until-widescreen">

<!-- Complex responsive behavior -->
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">

Breakpoint Modifiers

Nested Columns

You can nest columns within columns:

<div class="columns">
  <div class="column is-half">
    <div class="columns">
      <div class="column is-half">Nested 1</div>
      <div class="column is-half">Nested 2</div>
    </div>
  </div>
  <div class="column is-half">
    Parent column content
  </div>
</div>

Column Options

Column Gap

<!-- No gap between columns -->
<div class="columns is-gapless">
  <div class="column">First</div>
  <div class="column">Second</div>
</div>

<!-- Variable gap sizes -->
<div class="columns is-1">
<div class="columns is-2">
<div class="columns is-3">
<div class="columns is-4">
<div class="columns is-5">
<div class="columns is-6">
<div class="columns is-7">
<div class="columns is-8">

Vertical Alignment

<!-- Vertical center alignment -->
<div class="columns is-vcentered">
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>

<!-- Multiline columns -->
<div class="columns is-multiline">
  <div class="column is-4">Column 1</div>
  <div class="column is-4">Column 2</div>
  <div class="column is-4">Column 3</div>
  <div class="column is-4">Column 4</div>
</div>

<!-- Centered columns -->
<div class="columns is-centered">
  <div class="column is-half">Centered column</div>
</div>

Practical Examples

Blog Layout

<div class="columns">
  <!-- Sidebar -->
  <div class="column is-one-quarter">
    <aside class="menu">
      <!-- Sidebar content -->
    </aside>
  </div>
  
  <!-- Main content -->
  <div class="column">
    <article class="content">
      <!-- Blog post content -->
    </article>
  </div>
</div>

Pricing Cards

<div class="columns is-multiline is-centered">
  <div class="column is-one-third-tablet is-one-quarter-desktop">
    <div class="card">
      <div class="card-content">
        <p class="title">Basic</p>
        <p class="subtitle">$10/month</p>
      </div>
    </div>
  </div>
  
  <div class="column is-one-third-tablet is-one-quarter-desktop">
    <div class="card">
      <div class="card-content">
        <p class="title">Pro</p>
        <p class="subtitle">$25/month</p>
      </div>
    </div>
  </div>
  
  <div class="column is-one-third-tablet is-one-quarter-desktop">
    <div class="card">
      <div class="card-content">
        <p class="title">Enterprise</p>
        <p class="subtitle">$50/month</p>
      </div>
    </div>
  </div>
</div>

Dashboard Layout

<div class="columns is-multiline">
  <!-- Stats cards -->
  <div class="column is-3">
    <div class="card">
      <div class="card-content">Stat 1</div>
    </div>
  </div>
  <div class="column is-3">
    <div class="card">
      <div class="card-content">Stat 2</div>
    </div>
  </div>
  <div class="column is-3">
    <div class="card">
      <div class="card-content">Stat 3</div>
    </div>
  </div>
  <div class="column is-3">
    <div class="card">
      <div class="card-content">Stat 4</div>
    </div>
  </div>
  
  <!-- Main content area -->
  <div class="column is-8">
    <div class="card">
      <div class="card-content">Main Chart</div>
    </div>
  </div>
  
  <!-- Sidebar -->
  <div class="column is-4">
    <div class="card">
      <div class="card-content">Sidebar</div>
    </div>
  </div>
</div>

Best Practices

• Use is-multiline when you have many columns
• Combine responsive modifiers for mobile-first design
• Use semantic column sizes (is-half, is-one-third) for maintainability
• Consider using containers to limit maximum width
• Test your layouts on multiple screen sizes

Up next: Bulma Layout Components