Bulma Breadcrumb Alignment

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 Alignment.

Bulma Breadcrumb Alignment Classes:

is-centered: It is used for the center alignment of the breadcrumb container.
is-left: It is used for the left alignment of the breadcrumb container.
is-right: It is used for the right alignment of the breadcrumb container.

Syntax:

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

Below example illustrate the Bulma Breadcrumb Alignment:

Example 1: The following example demonstrates the is-centered class for the breadcrumb.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Breadcrumb Alignment</title> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
<body class="has-text-centered"> 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Breadcrumb Alignment</b><br><br> 
    <nav class="breadcrumb is-centered" 
         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:

Center Alignment

Example 2: The following example demonstrates the is-left class for the breadcrumb.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Breadcrumb Alignment</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 Alignment</b><br><br> 
    <nav class="breadcrumb is-left" 
         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:

Left Alignment

Example 3: The following example demonstrates the is-right class for the breadcrumb.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Breadcrumb Alignment</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
<body class="has-text-centered"> 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Breadcrumb Alignment</b><br><br> 
    <nav class="breadcrumb is-right" 
         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> 