Image align

A horizontal card layout that places media on the left and right, ideal for list-style feeds.

Left

Card title

Example text

<div class="card card-md-row"><img class="card-img-md-start card-img-top" src="https://tarkhov.github.io/postboot/assets/img/thumbnail.jpg"/>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
</div>

Class list

Breakpoint	Class
Extra small	`.card-img-start`
Small	`.card-img-sm-start`
Medium	`.card-img-md-start`
Large	`.card-img-lg-start`
Extra large	`.card-img-xl-start`
2 Extra large	`.card-img-xxl-start`
3 Extra large	`.card-img-3xl-start`
4 Extra large	`.card-img-4xl-start`
5 Extra large	`.card-img-5xl-start`

Right

Card title

Example text

<div class="card card-md-row">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div><img class="card-img-md-end card-img-bottom" src="https://tarkhov.github.io/postboot/assets/img/thumbnail.jpg"/>
</div>

Class list

Breakpoint	Class
Extra small	`.card-img-end`
Small	`.card-img-sm-end`
Medium	`.card-img-md-end`
Large	`.card-img-lg-end`
Extra large	`.card-img-xl-end`
2 Extra large	`.card-img-xxl-end`
3 Extra large	`.card-img-3xl-end`
4 Extra large	`.card-img-4xl-end`
5 Extra large	`.card-img-5xl-end`