CODEWITHSUNDEEP
javascripthtmlcsssassbulma
filipbarak
filipbarak

Reputation: 1905

Horizontally centering items in Columns in Bulma Framework

I would like to center my content horizontally inside of the columns of Bulma.

Here's an example:

http://prntscr.com/hooo8l

I would like to center those 'class="column is-2"' in the 'columns' div.

Here's how my code starts:

<div class="columns is-vcentered">
    <div class="column is-three-fifths is-offset-one-fifth has-text-centered">
        <div class="columns is-desktop is-vcentered">
            <div class="column is-2">
                    <button mat-raised-button color="primary" (click)="initTimer()">
                        <mat-icon>play_arrow</mat-icon>
                        Start Timer
                    </button>
            </div>

And I would like to center that is-2 with the button inside.

Any help would be appreciated. Thanks!

Upvotes: 3

Views: 22875

Answers (1)

meldev
meldev

Reputation: 399

If you want to center align the buttons within their container and their container within the available space, this is what you want to do the following:

<div class="columns is-centered">
  <div class="column has-text-centered is-2">
    <a class="button">Button 1</a>
  </div>
  <div class="column has-text-centered is-2">
    <a class="button">Button 2</a>
  </div>
  <div class="column has-text-centered is-2">
    <a class="button">Button 3</a>
  </div>
  <div class="column has-text-centered is-2">
    <a class="button">Button 4</a>
  </div>
</div>

JS Fiddle example

Hope this is what you meant.

Upvotes: 28

Related Questions