Bulma Components

Bulma provides a rich set of pre-styled components that help you build complex user interfaces quickly. These components are responsive, accessible, and follow modern design principles.

Breadcrumb

Breadcrumbs indicate the current page's location within a navigational hierarchy.

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

<!-- Breadcrumb with icons -->
<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-home" aria-hidden="true"></i>
        </span>
        <span>Bulma</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        <span>Documentation</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon is-small">
          <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
        </span>
        <span>Components</span>
      </a>
    </li>
    <li class="is-active">
      <a href="#" aria-current="page">
        <span class="icon is-small">
          <i class="fas fa-thumbs-up" aria-hidden="true"></i>
        </span>
        <span>Breadcrumb</span>
      </a>
    </li>
  </ul>
</nav>

<!-- Breadcrumb sizes -->
<nav class="breadcrumb is-small">Small breadcrumb</nav>
<nav class="breadcrumb is-medium">Medium breadcrumb</nav>
<nav class="breadcrumb is-large">Large breadcrumb</nav>

<!-- Breadcrumb alignment -->
<nav class="breadcrumb is-centered">Centered breadcrumb</nav>
<nav class="breadcrumb is-right">Right-aligned breadcrumb</nav>

<!-- Breadcrumb with arrows -->
<nav class="breadcrumb has-arrow-separator">With arrow separators</nav>
<nav class="breadcrumb has-bullet-separator">With bullet separators</nav>
<nav class="breadcrumb has-dot-separator">With dot separators</nav>
<nav class="breadcrumb has-succeeds-separator">With succeeds separators</nav>

Card

Cards are flexible containers that can hold headers, content, images, and actions.

Basic Card

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>

    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>

Card with Header and Footer

<div class="card">
  <header class="card-header">
    <p class="card-header-title">Component</p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </header>
  <div class="card-content">
    <div class="content">
      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. 
      Donec id elit non mi porta gravida at eget metus.
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>

Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Dropdown item</a>
      <a href="#" class="dropdown-item">Other dropdown item</a>
      <a href="#" class="dropdown-item is-active">Active dropdown item</a>
      <a href="#" class="dropdown-item">Other dropdown item</a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">With a divider</a>
    </div>
  </div>
</div>

<!-- Dropdown with hover -->
<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover dropdown</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu4" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
    </div>
  </div>
</div>

<!-- Dropdown positions -->
<div class="dropdown is-right">Right-aligned dropdown</div>
<div class="dropdown is-up">Dropup menu</div>

<!-- Dropdown with form elements -->
<div class="dropdown is-active">
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">Simple item</a>
      <label class="dropdown-item">Checkbox
        <input type="checkbox">
      </label>
      <div class="dropdown-item">
        <div class="field">
          <input class="input" type="text" placeholder="Text input">
        </div>
      </div>
    </div>
  </div>
</div>

<aside class="menu">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a>Team Settings</a></li>
    <li>
      <a class="is-active">Manage Your Team</a>
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </li>
    <li><a>Invitations</a></li>
    <li><a>Cloud Storage Environment Settings</a></li>
    <li><a>Authentication</a></li>
  </ul>
  <p class="menu-label">Transactions</p>
  <ul class="menu-list">
    <li><a>Payments</a></li>
    <li><a>Transfers</a></li>
    <li><a>Balance</a></li>
  </ul>
</aside>

Message

Messages are used to communicate important information to the user.

<article class="message">
  <div class="message-header">
    <p>Hello World</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. 
    Vestibulum rhoncus ac ex sit amet fringilla. 
  </div>
</article>

<!-- Message colors -->
<article class="message is-primary">
  <div class="message-header">
    <p>Primary</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

<article class="message is-link">
  <div class="message-header">
    <p>Link</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

<article class="message is-info">
  <div class="message-header">
    <p>Info</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

<article class="message is-success">
  <div class="message-header">
    <p>Success</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

<article class="message is-warning">
  <div class="message-header">
    <p>Warning</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

<article class="message is-danger">
  <div class="message-header">
    <p>Danger</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</article>

<!-- Message sizes -->
<article class="message is-small">Small message</article>
<article class="message is-medium">Medium message</article>
<article class="message is-large">Large message</article>

Modal

The modal is a classic overlay dialog box that appears in front of page content.

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
      Modal content goes here
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

<!-- Simple modal -->
<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
    <div class="box">
      <p>Modal content can include any Bulma element</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<!-- Modal sizes -->
<div class="modal is-small">Small modal</div>
<div class="modal is-medium">Medium modal</div>
<div class="modal is-large">Large modal</div>

<!-- Modal with image -->
<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Image">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

Navbar

The navbar is a responsive horizontal navigation bar that can contain links, dropdowns, and more.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Documentation</a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">About</a>
          <a class="navbar-item">Jobs</a>
          <a class="navbar-item">Contact</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Report an issue</a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary"><strong>Sign up</strong></a>
          <a class="button is-light">Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- Navbar variants -->
<nav class="navbar is-primary">Primary navbar</nav>
<nav class="navbar is-link">Link navbar</nav>
<nav class="navbar is-info">Info navbar</nav>
<nav class="navbar is-success">Success navbar</nav>
<nav class="navbar is-warning">Warning navbar</nav>
<nav class="navbar is-danger">Danger navbar</nav>

<!-- Navbar with search -->
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <!-- Navbar items -->
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field has-addons">
          <div class="control">
            <input class="input" type="text" placeholder="Search...">
          </div>
          <div class="control">
            <a class="button is-info">Search</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- Fixed navbar -->
<nav class="navbar is-fixed-top">Fixed to top</nav>
<nav class="navbar is-fixed-bottom">Fixed to bottom</nav>

<!-- Navbar with transparent background -->
<nav class="navbar is-transparent">Transparent navbar</nav>

Pagination

Pagination indicates a series of related content exists across multiple pages.

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" disabled>Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

<!-- Pagination sizes -->
<nav class="pagination is-small">Small pagination</nav>
<nav class="pagination is-medium">Medium pagination</nav>
<nav class="pagination is-large">Large pagination</nav>

<!-- Pagination alignment -->
<nav class="pagination is-centered">Centered pagination</nav>
<nav class="pagination is-right">Right-aligned pagination</nav>

<!-- Rounded pagination -->
<nav class="pagination is-rounded">Rounded pagination</nav>

<!-- Simple pagination -->
<nav class="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
</nav>

Panel

The panel is a simple container for grouping related content with a heading.

<nav class="panel">
  <p class="panel-heading">Repositories</p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
  <label class="panel-block">
    <input type="checkbox">
    remember me
  </label>
  <div class="panel-block">
    <button class="button is-link is-outlined is-fullwidth">
      Reset all filters
    </button>
  </div>
</nav>

<!-- Panel colors -->
<nav class="panel is-primary">Primary panel</nav>
<nav class="panel is-link">Link panel</nav>
<nav class="panel is-info">Info panel</nav>
<nav class="panel is-success">Success panel</nav>
<nav class="panel is-warning">Warning panel</nav>
<nav class="panel is-danger">Danger panel</nav>

Tabs

Tabs are used for switching between different views or sections of content.

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

<!-- Tabs alignment -->
<div class="tabs is-centered">Centered tabs</div>
<div class="tabs is-right">Right-aligned tabs</div>

<!-- Tabs sizes -->
<div class="tabs is-small">Small tabs</div>
<div class="tabs is-medium">Medium tabs</div>
<div class="tabs is-large">Large tabs</div>

<!-- Tabs styles -->
<div class="tabs is-boxed">Boxed tabs</div>
<div class="tabs is-toggle">Toggle tabs</div>
<div class="tabs is-toggle is-toggle-rounded">Rounded toggle tabs</div>

<!-- Fullwidth tabs -->
<div class="tabs is-fullwidth">Fullwidth tabs</div>

<!-- Tabs with icons -->
<div class="tabs">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

Best Practices

Use appropriate components for different UI patterns
Ensure responsive behavior for mobile devices
Maintain consistent spacing and alignment
Use semantic HTML structure for accessibility
Test components across different screen sizes
Follow Bulma's naming conventions for consistency

Up next: Bulma Helper Classes

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

Bulma CSS Tutorial