columns

Columns powered by Flexbox

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-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

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>
                        

                    
                

القوالب المتاحة

Joo - Niche Multi-Purpose HTML Template
إبداعى 01
View more
Joo - Niche Multi-Purpose HTML Template
شركات 01
View more
Joo - Niche Multi-Purpose HTML Template
مطعم برجر
View more
Joo - Niche Multi-Purpose HTML Template
حفل زفاف
View more
Joo - Niche Multi-Purpose HTML Template مفعل
شركات 02
Joo - Niche Multi-Purpose HTML Template
صالون حلاقة
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن
View more
Joo - Niche Multi-Purpose HTML Template
مطعم 01
View more
Joo - Niche Multi-Purpose HTML Template
منظم حفلات
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن 02
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 02
View more
Joo - Niche Multi-Purpose HTML Template
فساتين الزفاف
View more
Joo - Niche Multi-Purpose HTML Template
تحت الإنشاء
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 03
View more