Bulma Elements And Components With Programming Examples

By Sruthy

By Sruthy

Sruthy, with her 10+ years of experience, is a dynamic professional who seamlessly blends her creative soul with technical prowess. With a Technical Degree in Graphics Design and Communications and a Bachelor’s Degree in Electronics and Communication, she brings a unique combination of artistic flair…

Learn about our editorial policies.
Updated March 7, 2024

This guide will give you a comprehensive understanding of Bulma Elements and Components with programming code examples:

Bulma columns, layouts, and forms were explained in our previous tutorial. This is the third tutorial of the Bulma tutorial series.

In this tutorial, we’ve covered Bulma elements (block, box, content, title, button, tag, progress bar, notification, table, and image) and Bulma components (breadcrumb, card, message, dropdown, menu, modal, navbar, pagination, panel, and tab).

Let us begin with this tutorial on Bulma Elements and Components!

Bulma Elements and Components

Bulma Tutorial 3 Elements and Components

Bulma Elements

Block, Box, Content, and Title

Block

A block acts as a special tool for a code of the block. It adds a consistent margin between sibling HTML elements. The block class is the main class used to create a block.

Box

A box is a simple container. You can include other elements inside a box. The box class is the main class used to create a box.

For example, let’s consider a login form. You can include the username/email field and the password field inside a box element.

Content

Content is used as a container for adding HTML tags like heading tags, paragraph tags, list tags, table tags, quote tags, etc. The content class is the main class used to create content.

There are 3 additional size classes.

They are,

  1. is-small
  2. is-medium
  3. is-large

Title

There are two classes for adding a title and a subtitle.

They are,

  1. title
  2. subtitle

You can use one of the below classes to change the size of the title/subtitle.

  1. is-1
  2. is-2
  3. is-3
  4. is-4
  5. is-5
  6. is-6

Example

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>

<div class="container">

   <p class="is-size-4 has-text-primary">With Block</p>
   <div class="block">Some text...</div>
   <div class="block">Some text...</div>
   <div class="block">Some text...</div>

   <p class="is-size-4 has-text-primary">Without Block</p>
   <div>Some text...</div>
   <div>Some text...</div>
   <div>Some text...</div>

   <br>

   <p class="is-size-4 has-text-primary">Box</p>
   <div class="box">
     A simple box.
   </div>

   <p class="is-size-4 has-text-primary">With Content Class</p>
   <div class="content">
      <h4>Sample Heading</h4>
      <p>Some text here...</p>
    </div>

    <p class="is-size-4 has-text-primary">Without Content Class</p>
    <div>
      <h4>Sample Heading</h4>
      <p>Some text here...</p>
    </div>

   </div>

</body>

</html>

The below screenshot shows the browser output of the above code:

Block, Box, Content and Title - Elements and Components

Button

Basics

Buttons are commonly found in forms, chat boxes, etc. The button class is the main class used to create a button.

The below elements can be used to create a button:

  • <button>
  • <a>
  • <input type=”submit”>
  • <input type=”reset”>

Colors

You can use the is-$color classes (as shown below) to add colors to the buttons.

  1. is-white
  2. is-black
  3. is-light
  4. is-dark
  5. is-primary
  6. is-link
  7. is-info
  8. is-success
  9. is-warning
  10. is-danger

You can use the below two classes as well:

  1. is-text
  2. is-ghost

Sizes

There are some additional size classes.

They are,

  1. is-small
  2. is-medium
  3. is-large
  4. is-normal

Further, you can add the below size classes to change the size of multiple buttons.

  1. aresmall
  2. aremedium
  3. are-large

States

The below classes/attributes can change the state of the buttons:

  1. is-hovered
  2. is-focused
  3. is-active
  4. is-loading
  5. is-static
  6. disabled attribute

Alignments

There are 2 classes to change the default alignment of buttons.

They are,

  1. is-centered
  2. is-right

More about Buttons

Further, you can also use the below classes to add different styles to the buttons:

  • is-outlined – For outlined buttons
  • is-inverted – To invert the color of the button
  • is-rounded – To make the button round
  • is-responsive – For responsive buttons
  • is-fullwidth – For full-width buttons
  • delete – To create a delete button. It is a simple circle with a cross.

Furthermore, you can use Font Awesome icons, groups (button groups), and addons (button addons) with buttons. You can also combine the above classes to add different styles.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>

<body>

    <div class="container mt-2">

        <p class="is-size-4">Button Types</p>
        <div class="buttons">
           <button class="button">Button</button>
           <a class="button">Link</a>
           <input class="button" type="submit" value="Submit">
           <input class="button" type="reset" value="Reset">
        </div>

        <p class="is-size-4">Button Colours</p>
        <div class="buttons">
           <button class="button is-black">Black</button>
           <button class="button is-dark">Dark</button>
           <button class="button is-light">Light</button>
           <button class="button is-white">White</button>
           <button class="button is-text">Text</button>
           <button class="button is-ghost">Ghost</button>
        </div>

        <div class="buttons">
           <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>
        </div>

        <div class="buttons">
           <button class="button is-primary is-light">Light</button>
           <button class="button is-link is-light">Light</button>
           <button class="button is-info is-light">Light</button>
           <button class="button is-success is-light">Light</button>
           <button class="button is-warning is-light">Light</button>
           <button class="button is-danger is-light">Light</button>
        </div>

        <p class="is-size-4">Button Sizes</p>
        <div class="buttons">
           <button class="button is-small">Small</button>
           <button class="button">Default</button>
           <button class="button is-normal">Normal</button>
           <button class="button is-medium">Medium</button>
           <button class="button is-large">Large</button>
        </div>

        <div class="buttons are-large">
          <button class="button">Default</button>
          <button class="button">Default</button>
          <button class="button">Default</button>
        </div>

        <p class="is-size-4">Other Styles</p>
        <div class="buttons">
          <button class="button is-outlined">Outlined</button>
          <button class="button is-primary is-outlined">Outlined</button>
        </div>

        <div class="buttons">
          <button class="button is-primary is-inverted">Inverted</button>
          <button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
        </div>

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

        <div class="buttons">
           <button class="button is-focused">Focus</button>
           <button class="button is-primary is-focused">Focus</button>
        </div>

        <div class="buttons">
            <button class="button is-active">Active</button>
            <button class="button is-primary is-active">Active</button>
        </div>

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

         <div class="buttons">
            <span class="button is-static">Static</span>
         </div>

         <div class="buttons">
             <button class="button" title="Disabled button" disabled>Disabled</button>
             <button class="button is-primary" title="Disabled button" disabled>Disabled</button>
         </div>

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

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

</body>

</html>

The below screenshot shows the browser output of the above code:

Buttons - Elements and Components

Tag

A tag is a small label. The tag is the main class used to create a tag.

There are 2 additional size classes.

They are,

  1. is-medium
  2. is-large

Furthermore, similar to buttons, you can add the below size classes to change the size of multiple tags.

  1. aremedium
  2. are-large

You can use the is-$color classes to add colors to the tags and the is-rounded class to create a rounded tag. The tags class is used to create a list of tags.

Furthermore, you can use addons with tags.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
    <div class="container">

       <p class="is-size-4">Tag</p>
       <span class="tag">
          Tag 
       </span>

       <p class="is-size-4">Tag List</p>
       <div class="tags">
         <span class="tag">Tag 1</span>
         <span class="tag">Tag 2</span>
         <span class="tag">Tag 3</span>
       </div>

   </div>
</body>

</html>

The below screenshot shows the browser output of the above code:

Tags

Progress Bar

A progress bar is an indicator of the progress of a particular process. Progress is the main class used to create a progress bar. You can use the is-$color classes to add colors to the progress bars.

There are 3 additional size classes.

They are,

  1. is-small
  2. is-medium
  3. is-large

If you remove the value attribute, the progress bar will be shown as an indeterminate progress bar.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
    <div class="container">

      <p class="is-size-4 has-text-primary">Basic Progress Bar</p>
      <progress class="progress" value="35" max="100">35%</progress>

      <p class="is-size-4 has-text-primary">Indeterminate Progress Bar</p>
      <progress class="progress" max="100">35%</progress>

    </div>
</body>

</html>

The below screenshot shows the browser output of the above code:

Progress Bar

Notification

Notifications are used to show some important message to a user. The notification class is the main class used to create a notification.

You can use the is-$color classes to add colors to the notifications.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>

    <div class="container mt-2">

     <div class="notification is-primary">
         <button class="delete"></button>
         Some text...
     </div>

    </div>

</body>

</html>

The below screenshot shows the browser output of the above code:

Notification

Table

Tables are another commonly used element in Bulma. The table is the main class used to create a table.

Below shows the structure of a table (the relevant tags have been shown).

  • <table>
  • <caption>
  • <thead>
  • <tbody>
  • <tfoot>
    • <tr>
    • <th>
    • <td>

You can use the below classes to style tables:

  • is-bordered – Add borders to all the cells
  • is-striped – Add stripes to the table
  • is-narrow – Make the cells narrower
  • is-hoverable – Add a hover effect on each row
  • is-fullwidth – For a fullwidth table
  • table-container – To create a scrollable table

You can also combine the above classes as shown in the below example:

Let’s see an example.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
    <div class="container">

      <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
         <caption>Student Marks</caption>
         <thead>
            <tr>
               <th>Student Name</th>
               <th>Total Marks</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>John</td>
               <td>320</td>
            </tr>
            <tr>
               <td>Bob</td>
               <td>298</td>
            </tr>
            <tr>
               <td>Ann</td>
               <td>342</td>
            </tr>
          </tbody>
      </table>

   </div>
</body>

</html>

The below screenshot shows the browser output of the above code:

Table

Image

Images are another commonly used element in Bulma. The image class is the main class used to create an image.

There are 7 dimension classes for fixed square images.

They are,

  1. is-16×16
  2. is-24×24
  3. is-32×32
  4. is-48×48
  5. is-64×64
  6. is-96×96
  7. is-128×128

There are 16 ratio modifiers.

They are,

  1. is-square (or 1 by 1)
  2. is-1by1
  3. is-5by4
  4. is-4by3
  5. is-3by2
  6. is-5by3
  7. is-16by9
  8. is-2by1
  9. is-3by1
  10. is-4by5
  11. is-3by4
  12. is-2by3
  13. is3by5
  14. is9by16
  15. is-1by2
  16. is-1by3

The is-rounded class is used to create rounded images.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
   <div class="container">

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

      <p class="is-size-4">Rounded Image</p>
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://bulma.io/images/placeholders/64x64.png">
      </figure>

    </div>
  </body>

</html>

The below screenshot shows the browser output of the above code:

Image

Bulma Components

Breadcrumb

A breadcrumb helps to identify the location of the current page. The breadcrumb class is the main class used to create a breadcrumb. The is-active class is added to the last <li> element to indicate the current page.

The below 2 classes can be used to change the default alignment of breadcrumbs:

  1. is-centered
  2. is-right

There are 3 additional sizes.

They are,

  1. is-small
  2. is-medium
  3. is-large

You can use one of the following separators with breadcrumbs.

  1. has-arrow-separator
  2. has-bullet-separator
  3. has-dot-separator
  4. has-succeeds-separator

Also, you can use Font Awesome icons with breadcrumbs.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<!--link Font Awesome-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>

<body>
     <div class="container">

        <p class="is-size-4">Basic Breadcrumbs</p>
        <nav class="breadcrumb" aria-label="breadcrumbs">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Bulma</a></li>
            <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
         </ul>
        </nav>

        <p class="is-size-4">Breadcrumb Alignments</p>
        <nav class="breadcrumb" aria-label="breadcrumbs">
           <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Bulma</a></li>
              <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
           </ul>
        </nav>
        <nav class="breadcrumb is-centered" aria-label="breadcrumbs"> 
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Bulma</a></li>
            <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
          </ul>
        </nav>
        <nav class="breadcrumb is-right" aria-label="breadcrumbs">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Bulma</a></li>
            <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
          </ul>
       </nav>

       <p class="is-size-4">Breadcrumbs with Icons</p>
       <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>Home</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="icon is-small">
                  <i class="fas fa-laptop-code" aria-hidden="true"></i>
                </span>
                <span>Bulma</span>
              </a>
            </li>
            <li class="is-active">
              <a href="#">
                <span class="icon is-small">
                   <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
                </span>
                <span>Breadcrumbs</span>
              </a>
            </li>
         </ul>
      </nav>

      <p class="is-size-4">Breadcrumb Separators</p>
      <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Bulma</a></li>
           <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
          </ul>
       </nav>
       <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Bulma</a></li>
           <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
         </ul>
        </nav>
        <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Bulma</a></li>
           <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
        </ul>
        </nav>
        <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Bulma</a></li>
           <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
        </ul>
      </nav>

      <p class="is-size-4">Breadcrumb Sizes</p>
      <nav class="breadcrumb is-small" aria-label="breadcrumbs">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Bulma</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
      </ul>
      </nav>
      <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Bulma</a></li>
         <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
      </ul>
      </nav>
      <nav class="breadcrumb is-large" aria-label="breadcrumbs">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Bulma</a></li>
         <li class="is-active"><a href="#" aria-current="page">Breadcrumbs</a></li>
         </ul>
      </nav>

    </div>
</body>

</html>

The below screenshot shows the browser output of the above code:

Breadcrumb

Card and Message

Card

A card is a boarded container. The card is the main class used to create this component.

The structure of a card is shown below (the relevant classes have been shown).

  • card
  • card-header
    • card-header-title
    • card-header-icon
  • card-image
  • card-content
  • card-footer
    • card-footer-item

If you want you can separately use the card elements like card header and/or card image and/or card content and/or card footer.

Message

A message is a colored block to show a message. The message is the main class used to create this component.

It can contain the below elements (the relevant classes has shown).

  • message-header
  • message-body

If you want you can remove the message header and keep the message body only.

There are 3 additional sizes.

They are,

  1. is-small
  2. is-medium
  3. is-large

You can use the is-$color classes to add colors to the messages.

Example

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
     <div class="container">

       <p class="is-size-4">Card</p>
       <div class="card">
          <header class="card-header">
             <p class="card-header-title">
                Sample Title
             </p>
          </header>
        <div class="card-content">
           <div class="content">
             <p>Some text...</p>
             <p>Some text...</p>
             <p>Some text...</p>
           </div>
        </div>
        <footer class="card-footer"> 
          <a href="#" class="card-footer-item">Link 1</a>
          <a href="#" class="card-footer-item">Link 2</a>
         </footer>
        </div>

        <br>

        <p class="is-size-4">Message</p>
        <article class="message is-info">
        <div class="message-header">
            <p>My Message</p>
            <button class="delete" aria-label="delete"></button>
        </div>
        <div class="message-body">
           Some text... 
        </div>
     </article>

    </div>
</body>

</html>

The below screenshot shows the browser output of the above code:

Card and Message

Dropdown

A button can be converted into a dropdown. The dropdown is the main class used to create a dropdown. The is-active class is added to the <a> element to indicate the active dropdown item.

The structure of a dropdown is shown below (the relevant classes have been shown).

  • dropdown
    • dropdown-trigger (for button)
    • dropdown-menu
      • dropdown-content
        • dropdown-item
        • dropdown-divider

Furthermore, add the is-up class with the dropdown class for dropups.

Let’s see an example.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<!--link Font Awesome-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>

<body>

    <div class="dropdown is-active m-5">
       <div class="dropdown-trigger">
          <button class="button is-warning" 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" role="menu">
           <div class="dropdown-content">
             <a class="dropdown-item" href="#">Action 1</a>
             <a class="dropdown-item is-active" href="#">Action 2</a>
             <a class="dropdown-item" href="#">Action 3</a>
             <hr class="dropdown-divider">
             <a href="#" class="dropdown-item">
                 With a divider
             </a>
          </div>
        </div>
       </div>

</body>

</html>

The below screenshot shows the browser output of the above code:

Dropdown

Menu

A menu is a type of vertical navigation component. The menu class is the main class used to create a menu. The is-active class is added to the <a> element to indicate the active menu item.

A menu also contains the below classes.

  • menu-label
  • menu-list

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>

<div class="container mt-2">

    <aside class="menu">
      <p class="menu-label">HTML</p>
      <ul class="menu-list">
         <li><a>HTML Basics</a></li>
         <li><a>Advanced HTML</a></li>
      </ul>
      <p class="menu-label">CSS</p>
      <ul class="menu-list">
        <li><a>CSS Basics</a></li>
        <li><a>Advanced CSS</a></li>
        <li>
          <a class="is-active">Frameworks</a>
            <ul>
              <li><a>Bulma</a></li>
              <li><a>Bootstrap</a></li>
              <li><a>Tailwind CSS</a></li>
              <li><a>Foundation</a></li>
             </ul>
          </li>
        </ul>
        <p class="menu-label">JavaScript</p>
        <ul class="menu-list">
          <li><a>JavaScript in 30 Days</a></li>
        </ul>
     </aside>

   </div>

  </body>

</html>

The below screenshot shows the browser output of the above code:

Menu - Elements and Components

Modal

A modal is a dialogue box that appears on top of the page. It can be used to show important messages to users. The modal class is the main class used to create a modal.

It also contains the below classes:

  • modal-background
  • modal-content
  • modal-close

Note: You need to link jQuery to function the modal.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>

   <a class="button is-info modal-open m-2" data-target="#modal">Click Me!</a>
   <div id="modal" class="modal">
      <div class="modal-background"></div>
      <div class="modal-content">
         <div class="box">
           Write something here...
         </div>
      </div>
      <button class="modal-close has-background-primary" aria-label="close"></button>
   </div>

<!--link jQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
    $(".modal-open").click(function() {
        $(".modal").addClass("is-active"); 
    });

    $(".modal-close").click(function() {
       $(".modal").removeClass("is-active");
   });
</script>

</body>

</html>

The below screenshots show the browser output of the above code:

  • Before clicking the button (when the page loads).

Modal 1

  • After clicking the button.

Modal 2

Navbar

A navbar (also known as a navigation bar) is a navigation header that is placed at the top of the page. The navbar is the main class used to create a navbar.

The structure of a navbar is shown below (the relevant classes have been shown):

  • navbar
    • navbar-brand
      • navbar-burger
    • navbar-menu
      • navbar-start
      • navbar-end
        • navbar-item
          • navbar-link
          • navbar-dropdown
            • navbar-divider

You can use the is-$color classes to add colors to the navbars.

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>

   <nav class="navbar" role="navigation" aria-label="main navigation">
       <div class="navbar-brand">
         <a class="navbar-item" href="#">
           Logo
         </a>
         <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
         </a>
        </div>

        <div id="navbarExample" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">
              Home
            </a>
            <a class="navbar-item">
               Courses
            </a>
            <div class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
                  Profile
               </a>
               <div class="navbar-dropdown">
                  <a class="navbar-item">Settings</a>
                  <a class="navbar-item">My Courses</a>
                  <a class="navbar-item">My Certifications</a>
                  <hr class="navbar-divider">
                  <a class="navbar-item">Logout</a>
               </div>
             </div>
         </div>
         <div class="navbar-end">
            <div class="navbar-item">
               <div class="buttons">
                  <a class="button is-link">
                    <strong>Chat with Us</strong>
                  </a>
               </div>
           </div>
         </div>
      </div>
</nav>

</body>

</html>

The below screenshots show the browser output of the above code:

  • Before hovering over the profile link (when the page loads)

Navbar 1

  • After hovering over the profile link.

Navbar 2

  • On mobile screen

Logo

Pagination

Pagination is the process of arranging content into multiple pages. The pagination class is the main class used to create pagination. The is-current class is added to the <a> element to indicate the current page.

The pagination structure is shown below (the relevant classes have been shown).

  • pagination
    • pagination-previous and pagination-next
    • pagination-list
      • pagination-link
      • pagination-ellipsis

The below 2 classes can be used to change the default alignment of pagination:

  1. is-centered
  2. is-right

There are 3 additional sizes.

They are,

  1. is-small
  2. is-medium
  3. is-large

Furthermore, you can add the is-rounded classes for rounded pagination items.

Let’s see an example.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>

<div class="container mt-2">

     <nav class="pagination is-centered" role="navigation" aria-label="pagination">
        <a class="pagination-previous" title="This is the first page">Previous</a>
        <a class="pagination-next">Next page</a>
        <ul class="pagination-list">
          <li>
             <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
          </li>
          <li>
             <a class="pagination-link" aria-label="Goto page 2">2</a>
          </li>
          <li>
            <a class="pagination-link" aria-label="Goto page 3">3</a>
          </li>
        </ul>
     </nav>

</div>

</body>

</html>

The below screenshot shows the browser output of the above code:

Pagination

Tab and Panel

Tab

The tabs class is the main class used to create a tab. The is-active class is added to the <li> element to indicate the active tab.

The below tags/elements are used to create tabs:

  • <ul>
  • <li>
  • <a>

The below 2 classes can be used to change the default alignment of a tab:

  1. is-centered
  2. is-right

Also, you can use Font Awesome icons with tabs.

There are 3 additional sizes.

They are,

  1. is-small
  2. is-medium
  3. is-large

Furthermore, you can use the below classes with tabs:

  • is-boxed: For more classic style tabs with borders
  • is-toggle: For mutually exclusive tabs
  • is-toggle with is-toggle-rounded: To round the first and last items
  • is-fullwidth: For whole width tabs

You can also combine the above classes for styling.

Panel

The panel class is the main class used to create a panel.

The structure of a panel is shown below (the relevant classes have been shown).

  • panel
    • panel-heading
    • panel-tabs
    • panel-block
      • control
      • input
      • button
      • panel-icon

You can use the is-$color classes to add colors to the panels.

Example

Let’s see an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<!--link Font Awesome-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
</head>

<body>
    <div class="container mb-2">

      <p class="is-size-4">Basic Tabs</p>
      <div class="tabs">
        <ul>
           <li class="is-active"><a>Item A</a></li>
           <li><a>Item B</a></li>
           <li><a>Item C</a></li>
        </ul>
      </div>

      <p class="is-size-4">Tabs with Styles</p>
      <p class="is-size-6">Boxed Tabs</p>
      <div class="tabs is-boxed">
        <ul>
           <li class="is-active"><a>Item A</a></li>
           <li><a>Item B</a></li>
           <li><a>Item C</a></li>
       </ul>
     </div>
     <p class="is-size-6">Mutually Exclusive Tabs </p>
     <div class="tabs is-toggle">
       <ul>
         <li class="is-active"><a>Item A</a></li>
         <li><a>Item B</a></li>
         <li><a>Item C</a></li>
       </ul>
      </div>
      <p class="is-size-6">Rounded Tabs</p>
      <div class="tabs is-toggle is-toggle-rounded">
         <ul>
            <li class="is-active"><a>Item A</a></li>
            <li><a>Item B</a></li>
            <li><a>Item C</a></li>
         </ul>
      </div>
      <p class="is-size-6">Full-width Tabs</p>
      <div class="tabs is-fullwidth">
         <ul>
           <li class="is-active"><a>Item A</a></li>
           <li><a>Item B</a></li>
           <li><a>Item C</a></li>
         </ul>
      </div>

      <p class="is-size-4">Combining Tabs</p>
      <div class="tabs is-toggle is-fullwidth">
        <ul>
          <li class="is-active"><a>Item A</a></li>
          <li><a>Item B</a></li>
          <li><a>Item C</a></li>
        </ul>
        </div>
           <p class="is-size-4">Basic Panel</p>
           <article class="panel is-link">
              <p class="panel-heading">
                   Heading
              </p>
              <p class="panel-tabs">
                 <a class="is-active">IT</a>
                 <a>Engineering</a>
                 <a>Accounting</a>
                 <a>Medicine</a>
                 <a>History</a>
              </p>
              <div class="panel-block">
                <p class="control has-icons-left">
                    <input class="input is-link" type="text" placeholder="Search">
                        <span class="icon is-left">
                           <i class="fas fa-search" aria-hidden="true"></i>
                        </span>
                 </p>
               </div>
               <a class="panel-block is-active">
                  <span class="panel-icon">
                     <i class="fas fa-book" aria-hidden="true"></i>
                  </span>
                  HTML
               </a>
               <a class="panel-block">
                  <span class="panel-icon">
                     <i class="fas fa-book" aria-hidden="true"></i>
                  </span>
                   CSS
                </a>
                <a class="panel-block">
                   <span class="panel-icon">
                      <i class="fas fa-book" aria-hidden="true"></i>
                    </span>
                    JavaScript
                 </a>
            </article>

       </div>
</body>

</html>

The below screenshot shows the browser output of the above code:

Tab and Panel - Elements and Components

Conclusion

Bulma provides several elements and components. There are several modifiers available like colors, sizes, alignments, etc. for styling those elements and components.

We hope this tutorial would have given you a clear understanding of Bulma Elements and Components.

Happy learning!

<<PREV Tutorial | NEXT Tutorial>>

Was this helpful?

Thanks for your feedback!

Leave a Comment