Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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>
  
    <!-- Tabs aligned to the center -->
    <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>
  
    <!-- Tabs aligned to the right -->
    <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>
  
    <!-- Small sized tabs -->
    <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>
  
    <!-- Medium sized tabs -->
    <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>
  
    <!-- Large sized tabs -->
    <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>
  <!-- Bulma CSS CDN -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome CDN -->
  <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>
              
            <!-- Using the home icon -->
            <span class="icon is-small">
              <i class="fas fa-home"
                 aria-hidden="true">
              </i>
            </span>
            <span>Home</span>
          </a>
        </li>
        <li>
          <a>
              
            <!-- Using the newspaper icon -->
            <span class="icon is-small">
              <i class="fas fa-newspaper"
                 aria-hidden="true">
              </i>
            </span>
            <span>Articles</span>
          </a>
        </li>
        <li>
          <a>
              
            <!-- Using the music icon -->
            <span class="icon is-small">
              <i class="fas fa-music" 
                 aria-hidden="true">
              </i>
            </span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
              
            <!-- Using the film icon -->
            <span class="icon is-small">
              <i class="fas fa-film"
                 aria-hidden="true">
              </i>
            </span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
              
            <!-- Using the file icon -->
            <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>
  <!-- Bulma CSS CDN -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome CDN -->
  <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>
  <!-- Bulma CSS CDN -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome CDN -->
  <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>
  <!-- Bulma CSS CDN -->
  <link rel='stylesheet' href=
  
  <!-- FontAwesome CDN -->
  <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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :