Skip to content
Related Articles

Related Articles

Bulma Breadcrumb Alignment

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

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

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


Output:

Right Alignment

Right Alignment

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!