Bulma is an open-source CSS framework used to make beautiful and responsive websites for devices with a variety of screen sizes. In this article, we will be seeing Bulma Tabs style classes which are used to set the style of the tabs. Bulma tabs come in four different styles: boxed, toggle, rounded-toggle, and full-width. Tab style can be set by using the CSS classes provided by Bulma.
Bulma Tab 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.
Syntax:
<div class="tabs Tab-Style-Classes"> ... </div>
Below example illustrate the Bulma Tabs Styles:
Example: The below example shows all the different tab styles in Bulma.
HTML
<!DOCTYPE html> <html>
<head>
<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 Tab Styles</b>
<div class="container">
<p><b>Normal Tabs:</b></p>
<div class="tabs 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>Boxed Tabs:</b></p>
<div class="tabs is-centered is-boxed">
<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:</b></p>
<div class="tabs is-centered is-toggle">
<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:</b></p>
<div class="tabs is-centered is-toggle is-toggle-rounded">
<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>Fullwidth Tabs:</b></p>
<div class="tabs is-centered is-fullwidth">
<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>
</div>
</body>
</html>
|
Output:
Bulma Tabs Styles
Reference: https://bulma.io/documentation/components/tabs/#styles