layout

The structure of your webpage

level


The structure of a level is the following:

  • level: main container
    • level-left for the left side
    • level-right for the right side
      • level-item for each individual element

In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.



                    

                        
                        <!-- Main container -->
                        <nav class="level">
                          <!-- Left side -->
                          <div class="level-left">
                            <div class="level-item">
                              <p class="subtitle is-5">
                                <strong>123</strong> posts
                              </p>
                            </div>
                            <div class="level-item">
                              <div class="field has-addons">
                                <p class="control">
                                  <input class="input" type="text" placeholder="Find a post">
                                </p>
                                <p class="control">
                                  <button class="button">
                                    Search
                                  </button>
                                </p>
                              </div>
                            </div>
                          </div>

                          <!-- Right side -->
                          <div class="level-right">
                            <p class="level-item"><strong>All</strong></p>
                            <p class="level-item"><a>Published</a></p>
                            <p class="level-item"><a>Drafts</a></p>
                            <p class="level-item"><a>Deleted</a></p>
                            <p class="level-item"><a class="button is-success">New</a></p>
                          </div>
                        </nav>
                        

                    
                




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

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