Bootstrap CSS Classes

« All Bootstrap CSS classes

Bootstrap CSS class .media

<div class="media">
  <img class="d-flex mr-3" src="/placeholder/pictures/image.svg" alt="Placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

Preview

CSS source

/* _media.scss:1 */
.media {
  display: flex;
  align-items: flex-start;
}

Check .media 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 →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →

More Bootstrap CSS classes in Media Objects category

.media
.d-flex align-self-start
.right aligned media
.d-flex align-self-center
.nested media
.d-flex align-self-end
Shuffle Editor

An online editor for busy developers.

Shuffle Editor on Facebook Shuffle Editor on Twitter Shuffle Editor on Dribbble

Products

UI Components

Support

Company

© 2024 Shuffle. All rights reserved.