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