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 =
</ 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 =
</ 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 =
</ 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
Reference: https://bulma.io/documentation/components/breadcrumb/#alignment
Share your thoughts in the comments
Please Login to comment...