Bulma Tabs Sizes

In Bulma we can choose the size of tabs as per our requirements. Bulma has tabs mainly in three sizes small, medium and large. To choose the size of tabs we use class is-small, is-medium and is-large.

Bulma Tabs Size Classes:

is-small-: It provides small size to the tabs.
is-medium-: It provides medium size to the tabs.
is-medium-: It provides medium size to the tabs.

Syntax-:

<div class="tabs is-size">
  .......
</div>

Example 1: We will use is-small modifier for small tab size.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Tab Size</title>

    <link rel='stylesheet' href=

    'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

</head>
 
<body>

    <div class="tabs is-small">

        <ul>

          <li class="is-active"><a>GFG</a></li>

          <li><a>Course</a></li>

          <li><a>Practice</a></li>

          <li><a>Jobs</a></li>

        </ul>

      </div>

</body>
 
</html>

Output-:

Small Tab Size

Example 2: We will use is-medium modifier for medium tab size.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Tab Size</title>

    <link rel='stylesheet' href=

    'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

</head>
 
<body>

    <div class="tabs is-medium">

        <ul>

          <li class="is-active"><a>GFG</a></li>

          <li><a>Course</a></li>

          <li><a>Practice</a></li>

          <li><a>Jobs</a></li>

        </ul>

      </div>

</body>
 
</html>

Output-:

Medium Tab Size

Example 3: We will use is-large modifier for large tab size.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Tab Size</title>

    <link rel='stylesheet' href=

    'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

</head>
 
<body>

    <div class="tabs is-large">

        <ul>

          <li class="is-active"><a>GFG</a></li>

          <li><a>Course</a></li>

          <li><a>Practice</a></li>

          <li><a>Jobs</a></li>

        </ul>

      </div>

</body>
 
</html>

Output-:

Large Tab Size

Example 4: Using all Three size in one

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Tab Size</title>

    <link rel='stylesheet' href=

    'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

</head>
 
<body>

    <div class="tabs is-small">

        <ul>

          <li class="is-active"><a>small</a></li>

          <li><a>Course</a></li>

          <li><a>Practice</a></li>

          <li><a>Jobs</a></li>

        </ul>

      </div>

          <div class="tabs is-medium">

        <ul>

          <li class="is-active"><a>mediaum</a></li>

          <li><a>Course</a></li>

          <li><a>Practice</a></li>

          <li><a>Jobs</a></li>

        </ul>

      </div>

          <div class="tabs is-large">

        <ul>

          <li class="is-active"><a>large</a></li>

          <li><a>Course</a></li>

          <li><a>Practice</a></li>

          <li><a>Jobs</a></li>

        </ul>

      </div>

</body>
 
</html>

Reference Link: https://bulma.io/documentation/components/tabs/#sizes

Article Tags :

CSS

Web Technologies

Bulma

Bulma-Form