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.
<!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:
Example 2: The following example demonstrates the is-left class for the breadcrumb.
<!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:
Example 3: The following example demonstrates the is-right class for the breadcrumb.
<!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>
Output:
Reference: https://bulma.io/documentation/components/breadcrumb/#alignment
