sudhakarinfotech
(current)
Run Code
Live Code Editor- Bulma CSS Box With Media Object
Source Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bulma CSS Box Element With Media Object</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script> </head> <body> <h1 class="mt-6 ml-6 mb-4"> Bulma CSS Box Element With Media Object </h1> <div class="container"> <div class="columns"> <div class="column"> <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> Write down text content. </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> </div> </div> </body> </html>
Source Code Output :
Running