Bulma | Media Object
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The famous media object prevalent in social media interfaces, but it is useful in any context.
Example 1: This example illustrates simple social media interface using bulma media object.
<html> <head> <title>Bulma Media Object</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.adjust{ margin-top:50px; } </style> </head> <body> <div class='container adjust'> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src= </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>GeeksforGeeks</strong> <small>@GfG</small> <small>39m</small> <br> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. and some of the basic algorithms like Sorting, Searching etc. then you will comparatively take much less time than a complete newbie as you already know the basics. </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> </div> </body> </html> |
Output:
Example 2: We can include any Bulma elements like input, buttons, icons, textarea, etc. in this example we include Textarea element inside Bulma media object to illustrates how they work together.
<html> <head> <title>Bulma Media Object</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.adjust{ margin-top:50px; } </style> </head> <body> <div class='container adjust'> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src= </p> </figure> <div class="media-content"> <div class="field"> <p class="control"> <textarea class="textarea" placeholder="Ask your query..."> </textarea> </p> </div> <nav class="level"> <div class="level-left"> <div class="level-item"> <a class="button is-info">Submit</a> </div> </div> </nav> </div> </article> </div> </body> </html> |
Output:
Textarea in media object
Example 3: This example illustrates nested media objects.
<html> <head> <title>Bulma Media Object</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.adjust{ margin-top:50px; } </style> </head> <body> <div class='container adjust'> <article class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src= </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>Barbara Middleton</strong> <br> Prior knowledge of DS and Algo: If you are already well versed with the basic data structures like Arrays, Linked Lists etc. and some of the basic algorithms like Sorting, Searching etc. then you will comparatively take much less time than a complete newbie as you already know the basics. <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= 7pitvZTX400x400-300x300.jpg"> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>Sean Brown</strong> <br> Computer scientists learn by experience. We learn by seeing others solve problems and by solving problems by ourselves. ... By considering a number of different algorithms, we can begin to develop pattern recognition so that the next time a similar problem arises, we are better able to solve it. <br> <small><a>Like</a> · <a>Reply</a> · 2 hrs</small> </p> </div> <article class="media"> Not everyone has spent too much time on Data Structures. One should not feel superior if they know data structure well. </article> <article class="media"> The concept of an abstract data type might be hard for some people to grasp, but it's really not that difficult. </article> </div> </article> <article class="media"> <figure class="media-left"> <p class="image is-48x48"> <img src= /Z0pcI00C400x400-300x300.jpg"> </p> </figure> <div class="media-content"> <div class="content"> <p> <strong>Kayli Eunice </strong> <br> If you are able to understand algorithms you're doing good. ... By memorizing the algorithm you will always be quicker on simple plug and use situations regarding this algorithm, people usually acquire this after solving the same problem hundreds of times but yes you can simply memorize the algorithm. <br> <small><a>Like</a> · <a>Reply</a> · 2 hrs</small> </p> </div> </div> </article> </div> </article> </div> </body> </html> |
Output:
Nested media object
Please Login to comment...