Open In App

Bulma Breadcrumb Alignment

Last Updated : 02 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Similar Reads

React Suite Breadcrumb &lt;Breadcrumb&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Breadcrumb component allows the user to display the current page path and that too within a navigational hierarchy. There are different props for each breadcrumb item for the user to design the path hierarchy.
3 min read
Bulma | Breadcrumb
Bulma is a free, 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. Bulma breadcrumb is a simple navigation component. The dividers between the nav links are automatically created when class 'breadcrumb' is added in the nav ta
5 min read
Bulma Breadcrumb Alternative Separators
Bulma Breadcrumb is a simple navigation component that can be used to navigate around pages. This can be used to see the page where a user is located currently and also go back to a previous page. In this article, we will learn about Breadcrumb Alternative Separators, that is used to separate these breadcrumbs. Bulma Breadcrumb Alternative Separato
2 min read
Bulma Breadcrumb Sizes
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,
2 min read
Bulma Breadcrumb Icons
Bulma is a modern CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites faster. In this article, we will be seeing how to add the icons to the breadcrumb in Bulma. To add icons to the breadcrumbs, you just have to add an icon container containing the Font Awesome icon
2 min read
Bulma Breadcrumb Variables
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. Variable Used: Va
2 min read
Bulma Responsive Alignment
Bulma Responsive Alignment is used to make your website responsive. You can choose a specific alignment for each viewport width. Simply append the viewport width to the alignment modifier. Responsive Alignment Classes: has-text-left-mobile: This class is used to make the alignment if the screen width is up to 768px.has-text-left-touch: This class i
2 min read
Bulma Alignment
Bulma Alignment is used to align your website content, there are 4 different alignment classes in Bulma. You can use any of them to align your context. Alignment Classes: has-text-centered: This class is used to align the context centered.has-text-justified: This class is used to align the context justified.has-text-left: This class is used to alig
1 min read
Bulma Vertical Alignment
The Bulma Vertical alignment is used to align your columns vertically, add the is-vcentered modifier to the columns container. Bulma Vertical Alignment Class: is-vcentered: This class is used to center the columns vertically. Syntax: &lt;div class="columns is-vcentered"&gt;&lt;/div&gt; Example: Below example illustrates the Bulma vertical alignment
1 min read
Bulma Tabs Alignment
Bulma is an open-source CSS framework that provides pre-built components which can be combined together to make responsive websites and web applications. In Bulma, we can align the list of the tabs in the center, right, and left. Bulma Tabs Alignment Classes: is-centered: This class is used to center the list of the tab.is-left: This class is used
2 min read
Article Tags :