Open In App

Bulma Centering Columns Option

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 07 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads