Bulma is a CSS framework based on flexbox. It comes with pre-styled components which makes it easier to make beautiful and responsive websites and web apps. In this article, we will be seeing how to combine different tabs modifiers together.
Bulma Tabs Style Classes:
- is-boxed: This class is used to set the tabs style to boxed.
- is-toggle: This class is used to set the tabs style to toggle.
- is-toggle-rounded with is-toggle: These classes are used to set the tabs style to toggle with the first and last item rounded.
- is-fullwidth: This class is used to set the tabs style to full-width. The tabs will take the full width available when this class is applied.
Bulma Tabs Size Modifiers:
- is-small: This class is used to set the size of the tab to small.
- is-medium: This class is used to set the size of the tab to medium.
- is-large: This class is used to set the size of the tab to large.
Bulma Tabs Alignment Modifiers:
- is-centered: This class is used to set the alignment to the tabs to center.
- is-right: This class is used to set the alignment to the tabs to the right.
The above modifiers can be combined together to get the style you want. For example, you can combine is-toggle with the is-fullwidth modifier to have the toggle tabs which takes up the whole width available.
Syntax:
<div class="tabs is-toggle is-fullwidth"> .... </div>
Example: The below example shows how to combine the tabs modifiers.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Tabs Combining</title>
<link rel='stylesheet' href=
<link rel="stylesheet" href=
<style>
.container>p {
margin-top: 30px;
}
.container>.tabs {
margin-top: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b class="is-size-4">Bulma Tabs Combining</b>
<div class="container is-fluid">
<p><b>
Boxed tabs which takes up fullwidth
and align to center:
</b></p>
<div class="tabs is-boxed is-fullwidth is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>
Rounded Toggle Tabs which are
aligned to the right:
</b></p>
<div class="tabs is-toggle is-toggle-rounded is-right">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>Toggle Tabs which takes up
fullwidth and are large in size:</b>
</p>
<div class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">a
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
|
Output:
Bulma Tabs Combining
Reference: https://bulma.io/documentation/components/tabs/#combining