Bulma Elements

Bulma provides a comprehensive set of basic elements that form the building blocks of your user interface. These elements are designed to work well together and follow consistent design principles.

Box

The .box element is a simple container with a border, padding, and shadow. It's perfect for containing related 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. 
          Nullam condimentum luctus turpis.
        </p>
      </div>
    </div>
  </article>
</div>

Buttons

Buttons are available in different colors, sizes, and states. They can be used for actions, links, or form submissions.

Button Colors

<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

Button Sizes

<button class="button is-small">Small</button>
<button class="button">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

Button Styles

<!-- Outlined buttons -->
<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined Primary</button>

<!-- Rounded buttons -->
<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded Primary</button>

<!-- Loading buttons -->
<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Loading Primary</button>

<!-- Disabled buttons -->
<button class="button" disabled>Disabled</button>
<button class="button is-primary" disabled>Disabled Primary</button>

<!-- Static button -->
<button class="button is-static">Static</button>

<!-- Button with icons -->
<button class="button">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</button>

<!-- Icon-only button -->
<button class="button is-primary">
  <span class="icon">
    <i class="fas fa-download"></i>
  </span>
</button>

Content

The .content class is used for typographic elements and provides sensible defaults for text content.

<div class="content">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>
  <blockquote>This is a blockquote</blockquote>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Delete

The .delete class creates a simple delete button, commonly used for notifications, tags, or modal windows.

<!-- Small delete -->
<button class="delete is-small"></button>

<!-- Normal delete -->
<button class="delete"></button>

<!-- Medium delete -->
<button class="delete is-medium"></button>

<!-- Large delete -->
<button class="delete is-large"></button>

<!-- Delete in notification -->
<div class="notification is-danger">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet.
</div>

Icons

Bulma works seamlessly with Font Awesome icons. Icons can be used standalone or combined with text.

Icon Sizes

<span class="icon">
  <i class="fas fa-home"></i>
</span>

<span class="icon is-small">
  <i class="fas fa-home"></i>
</span>

<span class="icon is-medium">
  <i class="fas fa-home"></i>
</span>

<span class="icon is-large">
  <i class="fas fa-home"></i>
</span>

Icons with Text

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-check"></i>
  </span>
  <span>Success</span>
</span>

Colored Icons

<span class="icon has-text-success">
  <i class="fas fa-check-square"></i>
</span>

<span class="icon has-text-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>

<span class="icon has-text-danger">
  <i class="fas fa-ban"></i>
</span>

<span class="icon has-text-info">
  <i class="fas fa-info-circle"></i>
</span>

Images

Bulma provides responsive image classes and ratio containers for maintaining aspect ratios.

Responsive Images

<figure class="image is-16x16">
  <img src="https://bulma.io/images/placeholders/16x16.png">
</figure>

<figure class="image is-24x24">
  <img src="https://bulma.io/images/placeholders/24x24.png">
</figure>

<figure class="image is-32x32">
  <img src="https://bulma.io/images/placeholders/32x32.png">
</figure>

<figure class="image is-48x48">
  <img src="https://bulma.io/images/placeholders/48x48.png">
</figure>

<figure class="image is-64x64">
  <img src="https://bulma.io/images/placeholders/64x64.png">
</figure>

<figure class="image is-96x96">
  <img src="https://bulma.io/images/placeholders/96x96.png">
</figure>

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

Image Ratios

<figure class="image is-square">
  <img src="https://bulma.io/images/placeholders/256x256.png">
</figure>

<figure class="image is-1by1">
  <img src="https://bulma.io/images/placeholders/256x256.png">
</figure>

<figure class="image is-5by4">
  <img src="https://bulma.io/images/placeholders/320x256.png">
</figure>

<figure class="image is-4by3">
  <img src="https://bulma.io/images/placeholders/320x240.png">
</figure>

<figure class="image is-3by2">
  <img src="https://bulma.io/images/placeholders/480x320.png">
</figure>

<figure class="image is-5by3">
  <img src="https://bulma.io/images/placeholders/480x288.png">
</figure>

<figure class="image is-16by9">
  <img src="https://bulma.io/images/placeholders/640x360.png">
</figure>

<figure class="image is-2by1">
  <img src="https://bulma.io/images/placeholders/640x320.png">
</figure>

<figure class="image is-3by1">
  <img src="https://bulma.io/images/placeholders/960x320.png">
</figure>

<figure class="image is-4by5">
  <img src="https://bulma.io/images/placeholders/256x320.png">
</figure>

<figure class="image is-3by4">
  <img src="https://bulma.io/images/placeholders/240x320.png">
</figure>

<figure class="image is-2by3">
  <img src="https://bulma.io/images/placeholders/320x480.png">
</figure>

<figure class="image is-3by5">
  <img src="https://bulma.io/images/placeholders/288x480.png">
</figure>

<figure class="image is-9by16">
  <img src="https://bulma.io/images/placeholders/360x640.png">
</figure>

<figure class="image is-1by2">
  <img src="https://bulma.io/images/placeholders/320x640.png">
</figure>

<figure class="image is-1by3">
  <img src="https://bulma.io/images/placeholders/320x960.png">
</figure>

Notification

Notifications are used to highlight important information or feedback to the user.

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
</div>

<div class="notification is-primary">
  <button class="delete"></button>
  Primary notification
</div>

<div class="notification is-link">
  <button class="delete"></button>
  Link notification
</div>

<div class="notification is-info">
  <button class="delete"></button>
  Info notification
</div>

<div class="notification is-success">
  <button class="delete"></button>
  Success notification
</div>

<div class="notification is-warning">
  <button class="delete"></button>
  Warning notification
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  Danger notification
</div>

Progress Bars

Progress bars indicate the completion percentage of a task or operation.

<progress class="progress" value="15" max="100">15%</progress>

<progress class="progress is-primary" value="30" max="100">30%</progress>

<progress class="progress is-link" value="45" max="100">45%</progress>

<progress class="progress is-info" value="60" max="100">60%</progress>

<progress class="progress is-success" value="75" max="100">75%</progress>

<progress class="progress is-warning" value="90" max="100">90%</progress>

<progress class="progress is-danger" value="100" max="100">100%</progress>

<!-- Indeterminate progress -->
<progress class="progress is-small">30%</progress>
<progress class="progress">30%</progress>
<progress class="progress is-medium">30%</progress>
<progress class="progress is-large">30%</progress>

Tables

Bulma provides clean, responsive table styles that work well across all screen sizes.

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

<!-- Table variants -->
<table class="table is-bordered">Bordered table</table>
<table class="table is-striped">Striped table</table>
<table class="table is-narrow">Narrow table</table>
<table class="table is-hoverable">Hoverable table</table>
<table class="table is-fullwidth">Fullwidth table</table>

<!-- Table sizes -->
<table class="table is-small">Small table</table>
<table class="table is-medium">Medium table</table>
<table class="table is-large">Large table</table>

Tags

Tags are small labeling and categorization elements.

<span class="tag">Normal</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>

<!-- Tag sizes -->
<span class="tag is-normal">Normal</span>
<span class="tag is-medium">Medium</span>
<span class="tag is-large">Large</span>

<!-- Tag with delete -->
<span class="tag is-success">
  Success Tag
  <button class="delete is-small"></button>
</span>

<!-- Tag groups -->
<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
</div>

<div class="tags are-medium">
  <span class="tag">Medium</span>
  <span class="tag">Tag</span>
  <span class="tag">Group</span>
</div>

<div class="tags are-large">
  <span class="tag">Large</span>
  <span class="tag">Tag</span>
  <span class="tag">Group</span>
</div>

Titles

Titles are used for section headings and come in different sizes.

<p class="title is-1">Title 1</p>
<p class="title is-2">Title 2</p>
<p class="title is-3">Title 3</p>
<p class="title is-4">Title 4</p>
<p class="title is-5">Title 5</p>
<p class="title is-6">Title 6</p>

<p class="subtitle is-1">Subtitle 1</p>
<p class="subtitle is-2">Subtitle 2</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="subtitle is-5">Subtitle 5</p>
<p class="subtitle is-6">Subtitle 6</p>

<!-- Combined title and subtitle -->
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>

<p class="title is-spaced">Title with more space</p>
<p class="subtitle">Subtitle</p>

Best Practices

• Use appropriate button colors to convey meaning
• Combine icons with text for better usability
• Use notifications for important user feedback
• Maintain image aspect ratios with ratio classes
• Use tags for categorization and labeling
• Choose title sizes that create clear hierarchy

Up next: Bulma Components