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 Sizes.
Bulma Breadcrumb Sizes Classes:
- is-small: It is used for small size breadcrumbs.
- is-medium: It is used for medium-size breadcrumbs.
- is-large: It is used for large-size breadcrumbs.
Syntax:
<nav class="breadcrumb Sizes-Classes">
<ul>
.......
</ul>
</nav>
Below example illustrate the Bulma Breadcrumb Sizes:
Example 1: The following code demonstrates the is-small size class of the breadcrumb.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Breadcrumb Sizes</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 Sizes</b><br><br>
<nav class="breadcrumb is-small"
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 code demonstrates the is-medium size class of the breadcrumb.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Breadcrumb Sizes</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 Sizes</b><br><br>
<nav class="breadcrumb is-medium"
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 code demonstrates the is-large size class of the breadcrumb.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Breadcrumb Sizes</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 Sizes</b><br><br>
<nav class="breadcrumb is-large"
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/#sizes
