columns

Columns powered by Flexbox

nesting



You can nest columns to have more flexibility in your design. You only need to follow this structure:

  • columns: top-level columns container
    • column
      • columns: nested columns
        • column and so on…

The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

Multiline columns will also have a gap between each line.

                    

                        
                        <div class="columns">
                          <div class="column">
                            <p class="bd-notification is-info">First column</p>
                            <div class="columns is-mobile">
                              <div class="column">
                                <p class="bd-notification is-info">First nested column</p>
                              </div>
                              <div class="column">
                                <p class="bd-notification is-info">Second nested column</p>
                              </div>
                            </div>
                          </div>
                          <div class="column">
                            <p class="bd-notification is-danger">Second column</p>
                            <div class="columns is-mobile">
                              <div class="column is-half">
                                <p class="bd-notification is-danger">50%</p>
                              </div>
                              <div class="column">
                                <p class="bd-notification is-danger">Auto</p>
                              </div>
                              <div class="column">
                                <p class="bd-notification is-danger">Auto</p>
                              </div>
                            </div>
                          </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