- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - Tabs
Description
Bulma provides tabbed navigation menu with different styles to display the content. You can create the tabbed navigation menu with base class of tabs and unordered list.
The below example demonstrates usage of tabs class to create tabbed navigation menu along with icons −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">Tabs</span><br><br>
<span class = "is-size-5">Simple Tab</span><br><br>
<div class = "tabs">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Centered Tab
</span>
<br>
<br>
<div class = "tabs is-centered">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Right Tab
</span>
<br>
<br>
<div class = "tabs is-right">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Tabs with Icons
</span>
<br>
<br>
<div class = "tabs">
<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-building" aria-hidden = "true"></i>
</span>
<span>About Us</span>
</a>
</li>
<li>
<a>
<span class = "icon is-small">
<i class = "fas fa-cogs" aria-hidden = "true"></i>
</span>
<span>Services</span>
</a>
</li>
<li>
<a>
<span class = "icon is-small">
<i class = "fas fa-file-signature" aria-hidden = "true"></i>
</span>
<span>Contact Us</span>
</a>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
Tab Sizes
You can specify size of tabs by using 3 modifiers such as is-small, is-medium and is-large to the tabs component.
The below example determines how to display the tabs in different sizes −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Tab Sizes
</span>
<br>
<br>
<span class = "is-size-5">
Small Tab
</span>
<br>
<br>
<div class = "tabs is-small">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Medium Tab
</span>
<br>
<br>
<div class = "tabs is-medium">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Large Tab
</span>
<br>
<br>
<div class = "tabs is-large">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
Tab Styles
You can specify style for tabs with borders (is-boxed class), rounded (is-toggle-rounded class) elements as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Tab Styles
</span>
<br>
<br>
<span class = "is-size-5">
Bordered Tab
</span>
<br>
<br>
<div class = "tabs is-boxed">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Toggle Tab
</span>
<br>
<br>
<div class = "tabs is-toggle">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Rounded Tab
</span>
<br>
<br>
<div class = "tabs is-toggle is-toggle-rounded">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
Combining Tabs
Bulma allows you to combine the tabs with different types of modifiers such as is-centered, is-boxed, is-medium, is-fullwidth etc as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Combining Tabs
</span>
<br>
<br>
<span class = "is-size-5">
Centered and Boxed Tab
</span>
<br>
<br>
<div class = "tabs is-centered is-boxed">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Toggle and Fullwidth Tab
</span>
<br>
<br>
<div class = "tabs is-toggle is-fullwidth">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Centered, Boxed and Medium Tab
</span>
<br>
<br>
<div class = "tabs is-centered is-boxed is-medium">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Toggle, Fullwidth and Large Tab
</span>
<br>
<br>
<div class = "tabs is-toggle is-fullwidth is-large">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
bulma_components.htm
Advertisements