Bulma Tabs Alignment

Last Updated : 09 Feb, 2022

Bulma is an open-source CSS framework that provides pre-built components which can be combined together to make responsive websites and web applications. In Bulma, we can align the list of the tabs in the center, right, and left.

Bulma Tabs Alignment Classes:

is-centered: This class is used to center the list of the tab.
is-left: This class is used to align the list of the tab on the left.
is-right: This class is used to align the list of the tab on the left.

Syntax:

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

Example 1: In the example below, we used is-centered to make the position of tabs in the center.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Tabs Alignment</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body class="has-text-centered">
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Tabs Alignment</b><br>
    <div class="tabs is-centered">
        <ul>
            <li class="is-active"><a>GFG</a></li>
            <li><a>Courses</a></li>
            <li><a>Practice</a></li>
            <li><a>Jobs</a></li>
        </ul>
    </div>
</body>
 
</html>

Output:

Bulma Center Tab Alignment

Example 2: In the example below, we used is-left to make the position of tabs in the left.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Tabs Alignment</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body>
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Tabs Alignment</b><br>
    <div class="tabs is-left">
        <ul>
            <li class="is-active"><a>GFG</a></li>
            <li><a>Courses</a></li>
            <li><a>Practice</a></li>
            <li><a>Jobs</a></li>
        </ul>
    </div>
</body>
 
</html>

Output:

Bulma Tag Left Alignment

Example 3: In the example below, we used is-right to make the position of tabs in the right.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Tabs Alignment</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body class="has-text-centered">
    <h2 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h2>
    <b>Bulma Tabs Alignment</b><br>
     <div class="tabs is-right">
        <ul>
            <li class="is-active"><a>GFG</a></li>
            <li><a>Courses</a></li>
            <li><a>Practice</a></li>
            <li><a>Jobs</a></li>
        </ul>
    </div>
</body>
 
</html>