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>
                        

                    
                




Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template active
Corporate 01
Joo - Niche Multi-Purpose HTML Template
Burger Restaurant
View more
Joo - Niche Multi-Purpose HTML Template
Wedding
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 02
View more
Joo - Niche Multi-Purpose HTML Template
Barber Shop
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo
View more
Joo - Niche Multi-Purpose HTML Template
Restaurant 01
View more
Joo - Niche Multi-Purpose HTML Template
Wedding Planner
View more
Joo - Niche Multi-Purpose HTML Template
Logistics Cargo 02
View more
Joo - Niche Multi-Purpose HTML Template
Creative 02
View more
Joo - Niche Multi-Purpose HTML Template
Bridal Dresses
View more
Joo - Niche Multi-Purpose HTML Template
Coming Soon
View more
Joo - Niche Multi-Purpose HTML Template
Creative 03
View more