Bulma | Tabs - GeeksforGeeks

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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- FontAwesome CDN -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- FontAwesome CDN -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- FontAwesome CDN -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- FontAwesome CDN -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>  </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:
Bulma
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?