Bulma - Media Object

Description

Bulma provides media objects for building various types of components like blog comments, tweets, etc which defines a left-aligned or right-aligned image alongwith the textual content.

Let's create a simple example of media object element by using the media class in the article tag −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Media Object Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Media Object
            </span>
            <br>
            <br>
            
            <article class = "media">
               <figure class = "media-left">
                  <p class = "image is-64x64">
                     <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
                  </p>
               </figure>
               <div class = "media-content">
                  <div class = "content">
                     <p>
                        <strong>Will Smith</strong> 
                        <small>@wsmith</small> 
                        <small>45m</small>
                        <br>
                        This is some sample text. This is some sample text. 
                        This is some sample text. This is some sample text. 
                        This is some sample text. This is some sample text. 
                        This is some sample text. This is some sample text.
                     </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>
            </article>
         </div>
      </section>
      
   </body>
</html>

Execute the above code and you will get the below output −

Nesting Media Object

You can nest the media objects within another media object up to 3 levels.

The below simple example describes usage of nested media object element −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Media Object Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
         <span class = "title">
            Nested Media Object
         </span>
         <br>
         <br>
         
         <article class = "media">
            <figure class = "media-left">
               <p class = "image is-64x64">
                  <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
               </p>
            </figure>
            <div class = "media-content">
               <div class = "content">
                  <p>
                     <strong>Will Smith</strong> <small>@wsmith</small> <small>45m</small>
                     <br>
                     This is some sample text. This is some sample text. This is some 
                     sample text. This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text. This is some 
                     sample text.
                  </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>
               
               <article class = "media">
                  <figure class = "media-left">
                     <p class = "image is-48x48">
                        <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
                     </p>
                  </figure>
                  <div class = "media-content">
                     <div class = "content">
                        <p>
                           <strong>Tom Hanks</strong>
                           <br>
                           This is some sample text. This is some sample text. This is 
                           some sample text. This is some sample text. This is some 
                           sample text. This is some sample text. This is some sample 
                           text. This is some sample text.
                           <br>
                           <small><a>Like</a> . <a>Reply</a> . 3 hrs</small>
                        </p>
                     </div>
                     
                     <article class = "media">
                        <figure class = "media-left">
                           <p class = "image is-48x48">
                              <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
                           </p>
                        </figure>
                        <div class = "media-content">
                           <div class = "content">
                              <p>
                                 <strong>Johnny Depp</strong>
                                 <br>
                                 This is some sample text. This is some sample text. 
                                 This is some sample text. This is some sample text. 
                                 This is some sample text. This is some sample text. 
                                 This is some sample text. This is some sample text.
                                 <br>
                                 <small><a>Like</a> . <a>Reply</a> . 5 hrs</small>
                              </p>
                           </div>
                        </div>
                     </article>
                     
                  </div>
               </article>
            </div>
         </article>
      </section>
      
   </body>
</html>

It displays the below output −

bulma_layout.htm
Advertisements