Restaurant | Joo - Niche Multi-Purpose HTML Template

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.

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

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>

Creative 01

Corporate 01

Burger Restaurant

Wedding

Corporate 02

Barber Shop

Logistics Cargo

Restaurant 01

Wedding Planner

Logistics Cargo 02

Creative 02

Bridal Dresses

Creative 03

Coming Soon

Discover Our Menu

roasted chicken

tasty drink

sea foods