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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
01 Jul, 2020
Like Article
Save Article