Media Object

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Media Object

.media & .media-body
Generic placeholder image
Media heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Media Object Nesting

.media & .media-body
Generic placeholder image
Media heading 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.
Generic placeholder image
Media heading 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.
Generic placeholder image
Media heading 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.
Generic placeholder image
Media heading 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.
Generic placeholder image
Media heading 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.
Generic placeholder image
Media heading 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Media Object Alignment

.media .media-body & .align-self-*
Generic placeholder image
Media heading: Start

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Generic placeholder image
Media heading: Center

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Generic placeholder image
Media heading: End

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Order

.order-# = .order-{1-12}
Media heading 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.
Generic placeholder image
Generic placeholder image
Media heading 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est esse rerum quaerat doloremque? Sint doloribus sed doloremque cum quos quas, at quia perferendis ea ad incidunt iure tempora. Quasi, recusandae repellat corporis libero explicabo suscipit.

Media List

.media .media-body & .list-unstyled