layout

The structure of your webpage

media object


The media object is a UI element perfect for repeatable and nestable content.


Joo - Niche Multi-Purpose HTML Template

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.


                    

                        
                        <article class="media">
                          <figure class="media-left">
                            <p class="image is-64x64">
                              <img src="https://bulma.io/images/placeholders/128x128.png">
                            </p>
                          </figure>
                          <div class="media-content">
                            <div class="content">
                              <p>
                                <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
                                <br>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                              </p>
                            </div>
                            <nav class="level is-mobile">
                              <div class="level-left">
                                <a class="level-item">
                                  <span class="icon is-small"><i class="fas fa-reply"></i></span>
                                </a>
                                <a class="level-item">
                                  <span class="icon is-small"><i class="fas fa-retweet"></i></span>
                                </a>
                                <a class="level-item">
                                  <span class="icon is-small"><i class="fas fa-heart"></i></span>
                                </a>
                              </div>
                            </nav>
                          </div>
                          <div class="media-right">
                            <button class="delete"></button>
                          </div>
                        </article>
                        

                    
                

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.


Joo - Niche Multi-Purpose HTML Template


                    

                        
                        <article class="media">
                          <figure class="media-left">
                            <p class="image is-64x64">
                              <img src="https://bulma.io/images/placeholders/128x128.png">
                            </p>
                          </figure>
                          <div class="media-content">
                            <div class="field">
                              <p class="control">
                                <textarea class="textarea" placeholder="Add a comment..."></textarea>
                              </p>
                            </div>
                            <nav class="level">
                              <div class="level-left">
                                <div class="level-item">
                                  <a class="button is-info">Submit</a>
                                </div>
                              </div>
                              <div class="level-right">
                                <div class="level-item">
                                  <label class="checkbox">
                                    <input type="checkbox"> Press enter to submit
                                  </label>
                                </div>
                              </div>
                            </nav>
                          </div>
                        </article>
                        

                    
                




Niche Templates

Joo - Niche Multi-Purpose HTML Template
Creative 01
View more
Joo - Niche Multi-Purpose HTML Template
Corporate 01
View more
Joo - Niche Multi-Purpose HTML Template active
Burger Restaurant
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