Bulma Centering Columns Option

Last Updated : 07 Feb, 2022

In this article, we’ll be seeing the Bulma centering columns options. The centering column alignment option is used to align your columns centered. This class reduces the extra writing of code when there is a need of creating extra space horizontally.

Bulma Centering Columns Option Class:

is-centered: This class is used to center the columns horizontally.

Syntax:

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

Example: Below code shows how columns are centered using is-centered class.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link
    rel="stylesheet"
    href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
</head>
<body>
    <div class="container content has-text-centered">
        <h1 class="has-text-success">
          GeekforGeeks</h1>
        <strong class="has-text-dark">
          Bulma Centering column option
        </strong>
        <br>
        <div class="columns is-mobile is-centered has-text-centered">
            <div class="column is-half">
              <p class="bd-notification is-primary">
                <p class="has-text-white has-background-primary">
                  is-centered class
                </p>
 
 
            </div>
        </div>
    </div>
</body>
</html>