Bulma Vertical Alignment

Last Updated : 20 Jan, 2022

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>