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.
Circle Images
Square images can be styles to appear as a circle by adding the .circular class.