Bulma Vertical Alignment

The Bulma Vertical alignment is used to align your columns vertically, add the is-vcentered modifier to the columns container.

Bulma Vertical Alignment Class:

is-vcentered: This class is used to center the columns vertically.

Syntax:

<div class="columns is-vcentered"></div>

Example: Below example illustrates the Bulma vertical alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>

<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Vertical Alignment</b>
    <br>
    <br>
    <div class="container mx-4">
        <div class="columns is-vcentered">
            <div class="column has-background-success is-8"> 
              First column 
            </div>
            <div class="column is-0"></div>
            <div class="column has-background-primary"> 
              Second column, this Column have the less width
              so the vertical alignment will be visible with 
              the First Column.
            </div>
        </div>
    </div>
</body>
</html>

Output:

Reference: https://bulma.io/documentation/columns/options/#vertical-alignment

Bulma Vertical Alignment

Explore