Bulma | Tabs

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 



Example 2: This example illustrates tabs with different alignment.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

Example 2: This example illustrates tabs with different sizes.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 4: This example illustrates tabs with the use of font-awesome icons.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 



Example 5: This example illustrates boxed style tabs (the active tab will be boxed).

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

Example 6: This example illustrates mutually exclusive tabs.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

Example 7: This example illustrates mutually exclusive rounded tabs.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.