Images

The classes below include a variety of ways to size images in pixel and percent-based widths.

Image Pixel Widths

50px

.image-50px

75px

.image-75px

100px

.image-100px

150px

.image-150px

200px

.image-200px

Responsive Image Pixel Widths

Extra Small (xs)

.image-xs-50px
.image-xs-75px
.image-xs-100px
.image-xs-150px
.image-xs-200px

Small (sm)

.image-sm-50px
.image-sm-75px
.image-sm-100px
.image-sm-150px
.image-sm-200px

Medium (md)

.image-md-50px
.image-md-75px
.image-md-100px
.image-md-150px
.image-md-200px

large (lg)

.image-lg-50px
.image-lg-75px
.image-lg-100px
.image-lg-150px
.image-lg-200px

Example

Image Percentage Widths

Using these classes will apply a consistant image width to all screen sizes. Images will always scale relative to the size of the container element.

25%

.image-25

33%

.image-33

50%

.image-50

66%

.image-66

75%

.image-75

100%

.image-100

Responsive Image Percentage Widths

Using these classes you can assign an image a different width for each breakpoint.

Extra Small (xs)

.image-xs-25
.image-xs-33
.image-xs-50
.image-xs-66
.image-xs-75
.image-xs-100

Small (sm)

.image-sm-25
.image-sm-33
.image-sm-50
.image-sm-66
.image-sm-75
.image-sm-100

Medium (md)

.image-md-25
.image-md-33
.image-md-50
.image-md-66
.image-md-75
.image-md-100

large (lg)

.image-lg-25
.image-lg-33
.image-lg-50
.image-lg-66
.image-lg-75
.image-lg-100

Example

Image Alignment

Using these classes you can align or float an image in different directions for each breakpoint.

Extra Small (xs)

.image-xs-align-left
.image-xs-align-right
.image-xs-align-none

Small (sm)

.image-sm-align-left
.image-sm-align-right
.image-sm-align-none

Medium (md)

.image-md-align-left
.image-md-align-right
.image-md-align-none

large (lg)

.image-lg-align-left
.image-lg-align-right
.image-lg-align-none

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

At ultrices mi tempus imperdiet nulla malesuada. Vel turpis nunc eget lorem. Leo a diam sollicitudin tempor id. Vitae justo eget magna fermentum iaculis. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In vitae turpis massa sed elementum tempus egestas sed sed. Facilisis magna etiam tempor orci eu lobortis elementum.

<div class="border padding margin-bottom"> <p><img class="image-lg-25 image-md-33 image-sm-50 image-xs-100 image-lg-align-left image-md-align-right image-sm-align-left image-xs-align-none margin-bottom" src="https://via.placeholder.com/1600x900" alt="placeholder image"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>At ultrices mi tempus imperdiet nulla malesuada. Vel turpis nunc eget lorem. Leo a diam sollicitudin tempor id. Vitae justo eget magna fermentum iaculis. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In vitae turpis massa sed elementum tempus egestas sed sed. Facilisis magna etiam tempor orci eu lobortis elementum.</p> </div>

Circle Images

Square images can be styles to appear as a circle by adding the .circular class.