Bulma Media Object
The Media Object is a versatile Bulma component for creating flexible layouts where media (like images or icons) is positioned alongside textual content. It's perfect for comments, blog posts, tweets, and any content with a media element.
Basic Media Object
The simplest media object consists of a media element on the left and content on the right.
Example:
John Doe @johndoe 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Profile">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Doe</strong> <small>@johndoe</small> <small>31m</small>
<br>
Content goes here...
</p>
</div>
</div>
</article>Media Object Structure
A media object consists of three main parts:
| Element | Class | Purpose |
|---|---|---|
| Container | .media | Main wrapper element |
| Left side | .media-left | For media (images, icons, avatars) |
| Right side | .media-content | For textual/content area |
| Right side (alt) | .media-right | For secondary content on right |
Media Object with Right Side
Add a .media-right element for additional content on the right side.
Jane Smith @janesmith
Just finished reading an amazing book about web development!
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="path/to/image.png" alt="Profile">
</p>
</figure>
<div class="media-content">
<div class="content">
<!-- Main content here -->
</div>
<!-- Additional content like buttons, stats -->
</div>
<div class="media-right">
<!-- Right side content (delete button, menu, etc.) -->
<button class="delete"></button>
</div>
</article>Different Image Sizes
Control the size of the media image using Bulma's image classes.
Small avatar (32x32) - Perfect for comments
Medium avatar (48x48) - Good for posts
Large image (96x96) - For featured content
<!-- Different Image Sizes -->
<article class="media">
<figure class="media-left">
<!-- Small rounded avatar -->
<p class="image is-32x32">
<img src="avatar.png" class="is-rounded" alt="Small">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Small avatar</p>
</div>
</div>
</article>
<article class="media">
<figure class="media-left">
<!-- Medium rounded avatar -->
<p class="image is-48x48">
<img src="avatar.png" class="is-rounded" alt="Medium">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Medium avatar</p>
</div>
</div>
</article>
<article class="media">
<figure class="media-left">
<!-- Large image -->
<p class="image is-96x96">
<img src="image.png" alt="Large">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Large image</p>
</div>
</div>
</article>Nested Media Objects
Media objects can be nested to create comment threads or hierarchical structures.
Alex Johnson @alexj
What are your thoughts on the new Bulma features?
Taylor Swift @taylorswift
I think the new utilities are amazing!
Chris Evans @chrisevans
Completely agree with you!
Emma Watson @emmawatson
The responsive helpers are my favorite.
<!-- Nested Media Objects -->
<article class="media">
<!-- Main content -->
<figure class="media-left">
<p class="image is-64x64">
<img src="author.png" alt="Author">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Main post content...</p>
</div>
<!-- Nested reply -->
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src="reply1.png" alt="Reply">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>First reply...</p>
</div>
<!-- Second level nested -->
<article class="media">
<figure class="media-left">
<p class="image is-32x32">
<img src="reply2.png" alt="Reply">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Second level reply...</p>
</div>
</div>
</article>
</div>
</article>
</div>
</article>Media Object with Form
Add form elements inside media objects for comments or replies.
<!-- Media Object with Form -->
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="user.png" alt="User">
</p>
</figure>
<div class="media-content">
<!-- Textarea for comment -->
<div class="field">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
</div>
<!-- Form buttons and options -->
<nav class="level">
<div class="level-left">
<div class="level-item">
<button class="button is-info">Submit</button>
</div>
</div>
<div class="level-right">
<div class="level-item">
<label class="checkbox">
<input type="checkbox"> Notify me of replies
</label>
</div>
</div>
</nav>
</div>
</article>Media Object with Icons
Use icons instead of images for a cleaner look.
System Notification
Your account has been successfully updated.
Success Message
Your payment was processed successfully.
Warning
Your storage is almost full.
<!-- Media Object with Icons -->
<article class="media">
<div class="media-left">
<!-- Large icon -->
<span class="icon is-large has-text-primary">
<i class="fas fa-2x fa-user-circle"></i>
</span>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>Title</strong>
<br>
Content with icon
</p>
</div>
</div>
</article>
<!-- Different icon colors -->
<article class="media">
<div class="media-left">
<span class="icon is-large has-text-success">
<i class="fas fa-2x fa-check-circle"></i>
</span>
</div>
<!-- Content -->
</article>
<article class="media">
<div class="media-left">
<span class="icon is-large has-text-warning">
<i class="fas fa-2x fa-exclamation-triangle"></i>
</span>
</div>
<!-- Content -->
</article>Complex Media Object
Combine multiple elements for rich content display.
<!-- Complex Media Object -->
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="avatar.png" class="is-rounded" alt="Author">
</p>
</figure>
<div class="media-content">
<div class="content">
<!-- Author info and post content -->
<p>
<strong>Author Name</strong> <small>@handle</small> <small>time</small>
<br>
Post content with hashtags...
<br>
<a href="#">#tag1</a> <a href="#">#tag2</a>
</p>
</div>
<!-- Nested content (message, card, etc.) -->
<article class="media">
<div class="media-content">
<div class="content">
<article class="message is-info">
<div class="message-body">
Nested content like article preview
</div>
</article>
</div>
</div>
</article>
<!-- Interactive buttons -->
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
<span>Like</span>
</a>
<!-- More buttons -->
</div>
</nav>
</div>
<!-- Right side actions -->
<div class="media-right">
<button class="button is-light">
<span class="icon"><i class="fas fa-bookmark"></i></span>
</button>
</div>
</article>Responsive Media Object
Make media objects responsive using Bulma's responsive helpers.
<!-- Stack on mobile, horizontal on tablet+ -->
<article class="media">
<figure class="media-left is-hidden-mobile">
<!-- Hidden on mobile -->
<p class="image is-48x48">
<img src="avatar.png" alt="Avatar">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Content that works on all screens</p>
</div>
</div>
</article>
<!-- Different image sizes per breakpoint -->
<article class="media">
<figure class="media-left">
<p class="image is-32x32-mobile is-48x48-tablet">
<img src="avatar.png" alt="Avatar">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>Responsive image sizing</p>
</div>
</div>
</article>
<!-- Stack media objects on mobile -->
<div class="media-stack-mobile">
<article class="media">
<!-- Media object 1 -->
</article>
<article class="media">
<!-- Media object 2 -->
</article>
</div>Use Cases
1. Social Media Feed
<!-- Social media post -->
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img class="is-rounded" src="user-avatar.png" alt="User">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>User Name</strong> <small>@username</small> <small>10m</small>
<br>
Post content goes here with mentions and hashtags.
<br>
<a href="#">#bulma</a> <a href="#">@mentioneduser</a>
</p>
</div>
<!-- Post image/video -->
<div class="content">
<img src="post-image.jpg" alt="Post image" style="max-width: 100%; border-radius: 6px;">
</div>
<!-- Interaction buttons -->
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="far fa-heart"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="far fa-comment"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="far fa-share-square"></i></span>
</a>
</div>
</nav>
<!-- Comments section -->
<article class="media">
<!-- Nested comments -->
</article>
</div>
</article>2. Comment System
<!-- Blog post comment -->
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img class="is-rounded" src="commenter.png" alt="Commenter">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Commenter Name</strong>
<small class="has-text-grey">2 days ago</small>
<br>
Great article! I learned a lot about media objects.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-thumbs-up"></i></span>
<small>24</small>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-thumbs-down"></i></span>
<small>2</small>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
<small>Reply</small>
</a>
</div>
</nav>
<!-- Reply form -->
<article class="media">
<figure class="media-left">
<p class="image is-32x32">
<img class="is-rounded" src="current-user.png" alt="You">
</p>
</figure>
<div class="media-content">
<div class="field">
<p class="control">
<textarea class="textarea is-small" placeholder="Write a reply..."></textarea>
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-small is-info">Post Reply</button>
</p>
</div>
</div>
</article>
</div>
</article>3. Notification System
<!-- Notification item -->
<article class="media">
<div class="media-left">
<span class="icon has-background-info has-text-white is-medium">
<i class="fas fa-bell"></i>
</span>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>New Message</strong>
<br>
You received a new message from John Doe
<br>
<small class="has-text-grey">Just now</small>
</p>
</div>
</div>
<div class="media-right">
<button class="delete is-small"></button>
</div>
</article>
<!-- Different notification types -->
<article class="media">
<div class="media-left">
<span class="icon has-background-success has-text-white is-medium">
<i class="fas fa-check"></i>
</span>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>Success!</strong>
<br>
Your profile has been updated
</p>
</div>
</div>
</article>Custom Styling
Customize media objects with additional CSS.
/* Add borders between media objects */
.media + .media {
border-top: 1px solid #eee;
padding-top: 1rem;
margin-top: 1rem;
}
/* Hover effects */
.media:hover {
background-color: #f9f9f9;
border-radius: 6px;
padding: 0.5rem;
transition: all 0.2s ease;
}
/* Custom media object with shadow */
.media-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Stack media objects vertically on mobile */
@media screen and (max-width: 768px) {
.media-stack {
flex-direction: column;
}
.media-stack .media-left {
margin-bottom: 1rem;
}
}
/* Custom media object sizes */
.media-large .media-left {
margin-right: 2rem;
}
.media-compact .media-left {
margin-right: 0.5rem;
}
.media-compact .image {
width: 32px;
height: 32px;
}Best Practices
1. When to Use Media Objects
- Social media posts and feeds
- Comment systems and discussion threads
- Notification panels
- Product reviews with user avatars
- Blog post previews with author info
- Chat/message interfaces
2. Accessibility Tips
- Always provide
alttext for images - Use semantic HTML (
article,figure) - Ensure proper contrast for text and icons
- Make interactive elements keyboard accessible
- Add ARIA labels when needed
3. Performance Considerations
- Optimize images for web (proper size, compression)
- Lazy load images in long feeds
- Consider using CSS sprites for icons
- Limit nesting depth for complex threads
- Implement pagination or virtual scrolling for large lists
Pro Tip: Combine Media Objects with other Bulma components like.level, .message, and .card for more sophisticated layouts. Use responsive utilities to ensure they look great on all devices.
Up next: Bulma Hero Component
