Open In App

Bulma | Media Object

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 26 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads