← all Bulma classes list

Bulma class: .media-left

<article class="media">
  <figure class="media-left">
    <p class="image is-64x64">
      <img src="https://bulma.io/images/placeholders/128x128.png">
    </p>
  </figure>
  <div class="media-content">
    <div class="content">
      <p>
        <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
      </p>
    </div>
  </div>
  <div class="media-right">
    <button class="delete"></button>
  </div>
</article>

Preview

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Use Shuffle AI to build your own Bulma CSS templates

Quickly design stunning Bulma CSS templates with the power of Shuffle AI — no coding required.

Check .media-left in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →
Open in Visual Editor →

More in Bulma Media

Bulma CSS