Skip to content
Related Articles

Related Articles

Bulma Centering Columns Option

Improve Article
Save Article
  • Last Updated : 07 Feb, 2022
Improve Article
Save Article

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


Output: 

Bulma Centering Columns Option

Bulma Centering Columns Option

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!