columns

Columns powered by Flexbox

gap



Default gap

Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem.
Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default.

Default gap

Default gap

Default gap

Default gap



Gapless

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

First column

Second column

Third column

Fourth column

                    

                        
                        <div class="columns is-gapless">
                          <div class="column">
                            No gap
                          </div>
                          <div class="column">
                            No gap
                          </div>
                          <div class="column">
                            No gap
                          </div>
                          <div class="column">
                            No gap
                          </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 مفعل
مطعم برجر
Joo - Niche Multi-Purpose HTML Template
حفل زفاف
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
مطعم 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