Another example with three boxes

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

CSS HTML JavaScript

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

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

Bulma Code		Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </head> <body> <div class="container"> <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image"> </figure> </div> <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. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> <span class="tag">CSS</span> <span class="tag">HTML</span> <span class="tag">JavaScript</span> </div> <nav class="level is-mobile"> <div class="level-left"> <a class="level-item" aria-label="reply"> <span class="icon is-small"> <i class="fas fa-reply" aria-hidden="true"></i> </span> </a> <a class="level-item" aria-label="retweet"> <span class="icon is-small"> <i class="fas fa-retweet" aria-hidden="true"></i> </span> </a> <a class="level-item" aria-label="like"> <span class="icon is-small"> <i class="fas fa-heart" aria-hidden="true"></i> </span> </a> </div> </nav> </div> </article> </div> <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image"> </figure> </div> <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. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> </div> <nav class="level is-mobile"> <div class="level-left"> <a class="level-item" aria-label="reply"> <span class="icon is-small"> <i class="fas fa-reply" aria-hidden="true"></i> </span> </a> <a class="level-item" aria-label="retweet"> <span class="icon is-small"> <i class="fas fa-retweet" aria-hidden="true"></i> </span> </a> <a class="level-item" aria-label="like"> <span class="icon is-small"> <i class="fas fa-heart" aria-hidden="true"></i> </span> </a> </div> </nav> </div> </article> </div> <div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image"> </figure> </div> <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. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> </div> <nav class="level is-mobile"> <div class="level-left"> <a class="level-item" aria-label="reply"> <span class="icon is-small"> <i class="fas fa-reply" aria-hidden="true"></i> </span> </a> <a class="level-item" aria-label="retweet"> <span class="icon is-small"> <i class="fas fa-retweet" aria-hidden="true"></i> </span> </a> <a class="level-item" aria-label="like"> <span class="icon is-small"> <i class="fas fa-heart" aria-hidden="true"></i> </span> </a> </div> </nav> <button class="button is-info is-small">Like</button> <button class="button is-primary is-small">Share</button> <button class="button is-success is-small">Bookmark</button> </div> </article> </div> </div> </body> </html>		John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. CSS HTML JavaScript John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.