Open In App

Bulma Nesting 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.

Bulma Media Object is a component that is very relevant to use in a social media interface as a part of the common commenting section. But this is extremely useful also in e-commerce as well as blog websites and websites GeeksforGeeks itself. Nesting is also an integral part of using the media object as the commenting section because nesting helps us add and show the UI part of replying to a comment. 

Bulma Nesting Media Object Classes:

  • media: This class is added to the media object container.
  • media-left: This class is used to add an image or icon or text to the left of the content of the media object. 
  • media-content: This class is added to the content container to the media content.
  • content: This class is used to specify the content of the media object.
  • field: This class is used to add a field/textarea to the media object.

Syntax:

<article class="media">
    <figure class="media-left">
        <p>
            ...
        </p>
    </figure>
    <div class="media-content">
        <div class="content">
            <p>
                ...
            </p>
        </div>
    </div>
</article>

Example 1: The code below demonstrates the nesting of media objects using the above-given classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
  
    <!-- custom css -->
    <style>
        div.adjust {
            margin-top: 50px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green; font-size: 2.5rem;">
            GeeksforGeeks
        </h1>
        <h3 style="font-size: 1.5rem;">
            Bulma Nesting Media Object
        </h3>
    </center>
  
    <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 Team</strong>
                        <br>
                        Initial understanding of DS and Algo: 
                        If you are already familiar with some 
                        of the fundamental data structures, 
                        such as arrays and linked lists, as
                        well as some of the fundamental algorithms,
                        such as sorting and searching, you will, 
                        on average, finish the task faster than 
                        a total novice.
                        <br>
                        <small><a>Like</a> · <a>Reply</a
                            Â· 13 hrs</small>
                    </p>
                </div>
                <article class="media">
                    <figure class="media-left">
                        <p class="image is-48x48">
                            <img src=
                        </p>
                    </figure>
                    <div class="media-content">
                        <div class="content">
                            <p>
                                <strong>John Doe</strong>
                                <br>
                                By doing, computer scientists gain 
                                knowledge. We gain knowledge from 
                                both seeing others solve challenges 
                                and from solving our own problems. 
                                We can start to build pattern 
                                recognition so that the next time a 
                                similar issue comes, we are better 
                                able to handle it by taking into 
                                account a variety of alternative 
                                techniques.
                                <br>
                                <small><a>Like</a> · <a>Reply</a
                                    Â· 14 hrs</small>
                            </p>
  
                        </div>
                        <article class="media">
                            Not everybody has devoted a lot of 
                            effort to studying data structures. 
                            If one is knowledgeable with data 
                            structures, they shouldn't feel superior.
                        </article>
                    </div>
                </article>
                <article class="media">
                    <figure class="media-left">
                        <p class="image is-48x48">
                            <img src=
                        </p>
  
                    </figure>
                    <div class="media-content">
                        <div class="content">
  
                            <p>
                                <strong>Jane Doe</strong>
                                <br>
                                You're doing well if you can comprehend 
                                algorithms. People typically gain this 
                                after solving the same problem hundreds 
                                of times, but yes, you may simply memorise 
                                the method. By memorising the algorithm, you
                                will always be quicker in simple plug-and-use
                                circumstances relating this algorithm.
                                <br>
                                <small><a>Like</a> · <a>Reply</a>
                                    Â· 17 hrs</small>
                            </p>
                        </div>
                    </div>
                </article>
            </div>
        </article>
    </div>
</body>
  
</html>


Output:

 

Example 2: The code below demonstrates the nesting of media objects using the above-given classes and adding an empty textarea for adding another comment.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
  
    <!-- custom css -->
    <style>
        div.adjust {
            margin-top: 50px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green; font-size: 2.5rem;">
            GeeksforGeeks
        </h1>
        <h3 style="font-size: 1.5rem;">
            Bulma Nesting Media Object
        </h3>
    </center>
    <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 Team</strong>
                        <br>
                        Initial understanding of DS and Algo: 
                        If you are already familiar with some 
                        of the fundamental data structures, 
                        such as arrays and linked lists, as
                        well as some of the fundamental algorithms, 
                        such as sorting and searching, you will, 
                        on average, finish the task faster than 
                        a total novice.
                        <br>
                        <small><a>Like</a> · <a>Reply</a
                            Â· 13 hrs</small>
                    </p>
  
                </div>
                <article class="media">
                    <figure class="media-left">
                        <p class="image is-48x48">
                            <img src=
                        </p>
  
                    </figure>
                    <div class="media-content">
                        <div class="content">
  
                            <p>
                                <strong>John Doe</strong>
                                <br>
                                By doing, computer scientists gain knowledge.
                                We gain knowledge from both seeing others solve
                                challenges and from solving our own problems. We can
                                start to build pattern recognition so that the
                                next time a similar issue comes, we are better able
                                to handle it by taking into account a variety of
                                alternative techniques.
                                <br>
                                <small><a>Like</a> · <a>Reply</a> · 14 hrs</small>
                            </p>
  
                        </div>
                        <article class="media">
                            Not everybody has devoted a lot of effort to
                            studying data structures. If one is knowledgeable
                            with data structures, they shouldn't feel superior.
                        </article>
                    </div>
                </article>
            </div>
        </article>
        <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="Add your comment.">
                        </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:

 

Reference: https://bulma.io/documentation/layout/media-object/#nesting 



Last Updated : 28 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads