Bulma | Tabs
Bulma | tabs are a navigation menu component that has different styles to display the web content.
Basic Steps To Create Tabs
Follow the following steps to create Bulma basic tab.
- Step 1: - Assign
.tabsmodifier class to the tab container i. e<ul>base class. - Step 2: - Create unordered list using
<ul>&<li>and place<a>element inside the<li>. -
Step 3: - Finally, place the unordered list inside the tab container having modifier class
.tabs.
Example
Source Code
Download
<div class="tabs">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>HTML5</a></li>
<li><a>CSS3</a></li>
<li><a>Javascript</a></li>
</ul>
</div>
Source Code : Output
Bulma CSS Tab Alignment
Tabs can be aligned either in the center or in the right direction using the is-centered and is-right modifier class respectively.
Please keep in mind that by default tab is aligned in the left direction.
Tab Alignment: Right
To align the tab in the right side, assign the .is-right modifier class to the tab container having modifier class
.tabs.
Example
Source Code
Download
<div class="tabs is-right">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>JSON</a></li>
<li><a>Ajax</a></li>
<li><a>PHP</a></li>
</ul>
</div>
Source Code : Output
Bulma CSS Tab : Center Alignment
To align tab in the center, assign . is-centered modifier class to the tab container having modifier class .tabs.
Example
Source Code
Download
<div class="tabs is-centered">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>PHP</a></li>
<li><a>MySQL</a></li>
<li><a>Ajax</a></li>
</ul>
</div>
Source Code : Output
Bulma Tabs Sizes
Bulma CSS size comes in 3 different sizes such as normal, medium,large.The default tag size is normal.
To reset the tag to the normal size, use .is-normal modifier class.
Example
General Syntax
<element class="tag is-link is-normal">Normal</element>
<element class="tag is-link is-medium">Medium</element>
<element class="tag is-link is-large">Large</element>
Source Code
Download
<div class="container">
<div class="columns is-mobile">
<div class="column">
<span class="tag is-link is-normal">Normal Tag Size</span>
</div>
<div class="column">
<span class="tag is-primary is-medium">Medium Tag Size</span>
</div>
<div class="column">
<span class="tag is-info is-large">Large Tag Size</span>
</div>
</div>
</div>
Source Code : Output
Bulma CSS Tab With Icon
You can also use font awesome icon with tabs.
Example
General Syntax
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Tab Item</span>
</a>
</li>
</ul>
</div>
Source Code
Download
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>sudhakariinfotech</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>HTML5</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>CSS3</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Jquery</span>
</a>
</li>
</ul>
</div>
Source Code : Output
Bulma CSS Tab Size
Bulma provides 3 additional sizes of tabs such as: small,medium and large.
Tab Size:Small
To create small size of tab,you have to assign .is-small modifier class to the tab container that has .tabs modifier class.
Real Example
General Source Code
Example
Source Code
Download
<div class="tabs is-small">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>JS</a></li>
<li><a>Jquery</a></li>
<li><a>Ajax</a></li>
</ul>
</div>
Source Code : Output
Bulma CSS Tab Size
Bulma provides 3 additional sizes of tabs such as: small, medium and large.
Tab Size: Small
To create a small size tab, you have to assign .is-small modifier class to the tab container that has .tabs modifier class.
Real Example
General Source Code
Example
Source Code
Download
<div class="tabs is-small">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>JS</a></li>
<li><a>Jquery</a></li>
<li><a>Ajax</a></li>
</ul>
</div>
Source Code : Output
Tab Size: Medium
To create a medium size tab, you have to assign the .is-medium modifier class to the tab container that has .tabs modifier class.
Example
Source Code
Download
<div class="tabs is-medium">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>JS</a></li>
<li><a>Jquery</a></li>
<li><a>Ajax</a></li>
</ul>
</div>
Source Code : Output
Tab Size: Large
To create a large size tab, you have to assign the .is-large modifier class to the tab container that has .tabs modifier class.
Example
Source Code
Download
<div class="tabs is-large">
<ul>
<li class="is-active"><a>sudhakarinfotech</a></li>
<li><a>JS</a></li>
<li><a>Jquery</a></li>
<li><a>Ajax</a></li>
</ul>
</div>
Source Code : Output
Tab Styles
To make more class style with border, just assign the .is-boxed modifier class to the tab container having the .tabs modifier class.
Example
Source Code
Download
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Web Design</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Web Development</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Graphics Design</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>App Design</span>
</a>
</li>
</ul>
</div>
Source Code : Output
Source Code
Download
<div class="tabs is-toggle">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
Source Code : Output
Source Code
Download
<div class="tabs is-toggle is-toggle-rounded">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span>Music</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-file-alt"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
Source Code : Output
Source Code
Download
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</div>
Source Code : Output
Source Code
Download
<div class="tabs is-toggle is-fullwidth">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
Source Code : Output
Web Tutorials
