The main component of a healthy environment for self esteem is that it needs be nurturing.

The main component of a healthy environment.

options

Multiline

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements than would fit in a single row.

is-one-quarter

is-half

is-one-quarter

Auto

                    

                        
                        <div class="columns is-multiline is-mobile">
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-half">
                            <code>is-half</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column is-one-quarter">
                            <code>is-one-quarter</code>
                          </div>
                          <div class="column">
                            Auto
                          </div>
                        </div>

Centering columns

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:

is-half

                    

                        
                        <div class="columns is-mobile is-centered">
                          <div class="column is-half">
                            <p class="bd-notification is-primary">
                              <code class="html">is-half</code><br>
                            </p>
                          </div>
                        </div>

Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

                    

                        
                        <div class="columns is-mobile is-multiline is-centered">
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              First Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              Our Second Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              Third Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              The Fourth Column
                            </p>
                          </div>
                          <div class="column is-narrow">
                            <p class="bd-notification is-primary">
                              <code class="html">is-narrow</code><br>
                              Fifth Column
                            </p>
                          </div>
                        </div>

Creative 01

Corporate 01

Burger Restaurant

Wedding

Corporate 02

Barber Shop

Logistics Cargo

Restaurant 01

Wedding Planner

Logistics Cargo 02

Creative 02

Bridal Dresses

Creative 03

Coming Soon

subscribe

columns

Columns powered by Flexbox