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=
</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