Buttons Box Notifications Hero Card
 
 
 
 

Bulma CheatSheet

Buttons


Buttons/Colors

.is-primary .is-link Info Success Warning Danger 
                  
        <a class="button is-primary">Primary</a>
        <a class="button is-link">Link</a>
        <a class="button is-info">Info</a>
        <a class="button is-success">Success</a>
        <a class="button is-warning">Warning</a>
        <a class="button is-danger">Danger</a>

Buttons/Sizes

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

Buttons/Styles

Outlined Outlined Outlined Outlined Outlined Outlined 
                  
      <a class="button is-outlined">Outlined</a>
      <a class="button is-primary is-outlined">Outlined</a>
      <a class="button is-link is-outlined">Outlined</a>
      <a class="button is-info is-outlined">Outlined</a>
      <a class="button is-success is-outlined">Outlined</a>
      <a class="button is-danger is-outlined">Outlined</a>
Rounded Rounded Rounded Rounded Rounded Rounded 
                    
      <a class="button is-rounded">Rounded</a>
      <a class="button is-primary is-rounded">Rounded</a>
      <a class="button is-link is-rounded">Rounded</a>
      <a class="button is-info is-rounded">Rounded</a>
      <a class="button is-success is-rounded">Rounded</a>
      <a class="button is-danger is-rounded">Rounded</a>

Buttons/State

Normal Normal Normal Normal Normal Normal Normal 
                    
      <a class="button">Normal</a>
      <a class="button is-primary">Normal</a>
      <a class="button is-link">Normal</a>
      <a class="button is-info">Normal</a>
      <a class="button is-success">Normal</a>
      <a class="button is-warning">Normal</a>
      <a class="button is-danger">Normal</a>
Hover Hover Hover Hover Hover Hover Hover 
                      
        <a class="button is-hovered">Hover</a>
        <a class="button is-primary is-hovered">Hover</a>
        <a class="button is-link is-hovered">Hover</a>
        <a class="button is-info is-hovered">Hover</a>
        <a class="button is-success is-hovered">Hover</a>
        <a class="button is-warning is-hovered">Hover</a>
        <a class="button is-danger is-hovered">Hover</a>
Focus Focus Focus Focus Focus Focus Focus 
                      
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>
Active Active Active Active Active Active Active 
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
<a class="button is-danger is-active">Active</a>
Loading Loading Loading Loading Loading Loading Loading 
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>
Disabled Disabled Disabled Disabled Disabled Disabled Disabled 
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>

Box


 

Image

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

                    
          <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,
                  </p>
                </div>
                <nav class="level is-mobile">
                  <div class="level-left">
                    <a class="level-item" aria-label="reply">
                      <span class="icon is-small">
                        <i class="fas fa-reply" aria-hidden="true"></i>
                      </span>
                    </a>
                    <a class="level-item" aria-label="retweet">
                      <span class="icon is-small">
                        <i class="fas fa-retweet" aria-hidden="true"></i>
                      </span>
                    </a>
                    <a class="level-item" aria-label="like">
                      <span class="icon is-small">
                        <i class="fas fa-heart" aria-hidden="true"></i>
                      </span>
                    </a>
                  </div>
                </nav>
              </div>
            </article>
          </div>

Notifications


 

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. 

                  
                    <div class="notification">
                      <button class="delete"></button>
                      <strong>Pellentesque risus mi</strong><a>felis venenatis</a>
                    </div>

Hero



Primary title

Primary subtitle 

          
            <section class="hero is-primary">
              <div class="hero-body">
                <div class="container">
                  <h1 class="title">
                    Primary title
                  </h1>
                  <h2 class="subtitle">
                    Primary subtitle
                  </h2>
                </div>
              </div>
            </section>

Card



Placeholder image
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive 
                    
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://bulma.io/images/placeholders/1280x960.png" >
            </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" >
                </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>

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive 
                    
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              Component
            </p>
            <a href="#" class="card-header-icon" aria-label="more options">
              <span class="icon">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          <div class="card-content">
            <div class="content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
              <a href="#">@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>
          <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>

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood 

                    
        <div class="card">
          <div class="card-content">
            <p class="title">
              “There are two hard things in computer science: cache invalidation, naming things,
               and off-by-one errors.”
            </p>
            <p class="subtitle">
              Jeff Atwood
            </p>
          </div>
          <footer class="card-footer">
            <p class="card-footer-item">
              <span>
                View on <a href="https://twitter.com/codinghorror/">Twitter</a>
              </span>
            </p>
            <p class="card-footer-item">
              <span>
                Share on <a href="#">Facebook</a>
              </span>
            </p>
          </footer>
        </div>