Bulma | Tabs
Last Updated :
01 Jul, 2020
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.
Tabs in Bulma are simple responsive horizontal navigation tabs with different styles. They require the following structure:
- A container for the tabs.
- The HTML <ul> element for holding the tags.
- A list of <li> elements for each tag.
- HTML anchor elements <a> for each tag link.
Example 1: This example illustrates simple Bulma tabs.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class="columns is-centered">
<div class="column is-10">
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs">
<ul>
<li class="is-active"
><a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example illustrates tabs with different alignment.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>
Tabs
</h1>
</div>
<div class="tabs">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<div class="tabs is-right">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example illustrates tabs with different sizes.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>
Tabs
</h1>
</div>
<div class="tabs is-small">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<div class="tabs is-medium">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<div class="tabs is-large">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
|
Output:
Example 4: This example illustrates tabs with the use of font-awesome icons.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<script src=
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</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>
</div>
</body>
</html>
|
Output:
Example 5: This example illustrates boxed style tabs (the active tab will be boxed).
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<script src=
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</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>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</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 class='is-active'>
<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>
</div>
</body>
</html>
|
Output:
Example 6: This example illustrates mutually exclusive tabs.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<script src=
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-toggle is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-user-circle"
aria-hidden="true">
</i>
</span>
<span>Profile</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</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>
</div>
</body>
</html>
|
Output:
Example 7: This example illustrates mutually exclusive rounded tabs.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
<script src=
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-toggle
is-toggle-rounded is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-user-circle"
aria-hidden="true">
</i>
</span>
<span>Profile</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</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>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...