Skip to content
Related Articles

Related Articles

Bulma Breadcrumb Sizes

Improve Article
Save Article
  • Last Updated : 02 Feb, 2022
Improve Article
Save Article

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=
</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

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=
</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

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=
</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>


Output:

Large Size Breadcrumb

Large Size Breadcrumb

Reference: https://bulma.io/documentation/components/breadcrumb/#sizes


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!