Bulma Breadcrumb Sizes

Last Updated : 02 Feb, 2022

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

In Bulma, a breadcrumb is a simple navigation component. To navigate the component, we only require a breadcrumb container and a ul list. In this article, we will learn about Bulma Breadcrumb Sizes.

Bulma Breadcrumb Sizes Classes:

is-small: It is used for small size breadcrumbs.
is-medium: It is used for medium-size breadcrumbs.
is-large: It is used for large-size breadcrumbs.

Syntax:

<nav class="breadcrumb Sizes-Classes">
  <ul>
    .......
  </ul>
</nav>

Below example illustrate the Bulma Breadcrumb Sizes:

Example 1: The following code demonstrates the is-small size class of the breadcrumb.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Breadcrumb Sizes</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
<body > 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Breadcrumb Sizes</b><br><br> 
    <nav class="breadcrumb is-small" 
         aria-label="breadcrumbs"> 
        <ul> 
            <li class="is-active"> 
              <a href="#">GeeksforGeeks</a> 
            </li> 
            <li><a href="#">Courses</a></li> 
            <li><a href="#">Practice</a></li> 
            <li><a href="#">Jobs</a></li> 
        </ul> 
     </nav>      
</body> 
</html> 

Output:

Small Size Breadcrumb

Example 2: The following code demonstrates the is-medium size class of the breadcrumb.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bulma Breadcrumb Sizes</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
<body > 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Breadcrumb Sizes</b><br><br> 
    <nav class="breadcrumb is-medium" 
         aria-label="breadcrumbs"> 
        <ul> 
            <li class="is-active"> 
              <a href="#">GeeksforGeeks</a> 
            </li> 
            <li><a href="#">Courses</a></li> 
            <li><a href="#">Practice</a></li> 
            <li><a href="#">Jobs</a></li> 
        </ul> 
      </nav> 
</body> 
</html> 

Output:

Medium Size Breadcrumb

Example 3: The following code demonstrates the is-large size class of the breadcrumb.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Breadcrumb Sizes</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
<body > 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Breadcrumb Sizes</b><br><br> 
    <nav class="breadcrumb is-large" 
         aria-label="breadcrumbs"> 
        <ul> 
            <li class="is-active"> 
              <a href="#">GeeksforGeeks</a> 
            </li> 
            <li><a href="#">Courses</a></li> 
            <li><a href="#">Practice</a></li> 
            <li><a href="#">Jobs</a></li> 
        </ul> 
     </nav>      
</body> 
</html> 