Bulma Tabs Sizes
Last Updated :
30 Jun, 2022
In Bulma we can choose the size of tabs as per our requirements. Bulma has tabs mainly in three sizes small, medium and large. To choose the size of tabs we use class is-small, is-medium and is-large.
Bulma Tabs Size Classes:
- is-small-: It provides small size to the tabs.
- is-medium-: It provides medium size to the tabs.
- is-medium-: It provides medium size to the tabs.
Syntax-:
<div class="tabs is-size">
.......
</div>
Example 1: We will use is-small modifier for small tab size.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tab Size</title>
<link rel='stylesheet' href=
</head>
<body>
<div class="tabs is-small">
<ul>
<li class="is-active"><a>GFG</a></li>
<li><a>Course</a></li>
<li><a>Practice</a></li>
<li><a>Jobs</a></li>
</ul>
</div>
</body>
</html>
|
Output-:
Small Tab Size
Example 2: We will use is-medium modifier for medium tab size.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tab Size</title>
<link rel='stylesheet' href=
</head>
<body>
<div class="tabs is-medium">
<ul>
<li class="is-active"><a>GFG</a></li>
<li><a>Course</a></li>
<li><a>Practice</a></li>
<li><a>Jobs</a></li>
</ul>
</div>
</body>
</html>
|
Output-:
Medium Tab Size
Example 3: We will use is-large modifier for large tab size.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tab Size</title>
<link rel='stylesheet' href=
</head>
<body>
<div class="tabs is-large">
<ul>
<li class="is-active"><a>GFG</a></li>
<li><a>Course</a></li>
<li><a>Practice</a></li>
<li><a>Jobs</a></li>
</ul>
</div>
</body>
</html>
|
Output-:
Large Tab Size
Example 4: Using all Three size in one
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Tab Size</title>
<link rel='stylesheet' href=
</head>
<body>
<div class="tabs is-small">
<ul>
<li class="is-active"><a>small</a></li>
<li><a>Course</a></li>
<li><a>Practice</a></li>
<li><a>Jobs</a></li>
</ul>
</div>
<div class="tabs is-medium">
<ul>
<li class="is-active"><a>mediaum</a></li>
<li><a>Course</a></li>
<li><a>Practice</a></li>
<li><a>Jobs</a></li>
</ul>
</div>
<div class="tabs is-large">
<ul>
<li class="is-active"><a>large</a></li>
<li><a>Course</a></li>
<li><a>Practice</a></li>
<li><a>Jobs</a></li>
</ul>
</div>
</body>
</html>
|
Reference Link: https://bulma.io/documentation/components/tabs/#sizes
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...