Skip to main content

Content

Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, and more.

Images

Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

Contents

Responsive images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Generic responsive image 
<img src="..." class="img-fluid" alt="Responsive image">

SVG images and IE 9-10

In Internet Explorer 9-10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

Image shapes

Add classes to an <img> element to easily style images in any project.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Aligning images

Align images with the helper float classes or text alignment classes. A simple centering class can also be used for block level images.

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners 
<img src="..." class="img-rounded pull-xs-left" alt="...">
<img src="..." class="img-rounded pull-xs-right" alt="...">
A generic square placeholder image with rounded corners 
<img src="..." class="img-rounded center-block" alt="...">
A generic square placeholder image with rounded corners 
<div class="text-xs-center">
  <img src="..." class="img-rounded" alt="...">
</div>