Bootstrap Images
Bootstrap Image Shapes
Rounded Corners:
Circle:
Thumbnail:
Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 does
not support rounded corners):
Circle
The .img-circle class shapes the image to a circle (IE8 does not
support rounded corners):
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:
Responsive Images
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class
to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and
height: auto; to the image:
Image Gallery
You can also use Bootstrap's grid system in conjunction with the .thumbnail class
to create an image gallery.
Note: You will learn more about the Grid System later in this tutorial (how to create a layout with different amount of columns).
Example
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
Try it Yourself »
Responsive Embeds
Also let videos or slideshows scale properly on any device.
Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.
The following example creates a responsive video by adding an .embed-responsive-item class
to an <iframe> tag (the video will then scale nicely to the parent element).
The containing <div> defines the aspect ratio of the video:
Example
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Try it Yourself »
What is aspect ratio?
The aspect ratio of an image
describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3
(the universal video format of the 20th
century), and 16:9 (universal for HD television and European digital
television).
You can choose between two aspect ratio classes:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Try it Yourself »
Complete Bootstrap Image Reference
For a complete reference of all image classes, go to our complete Bootstrap Image Reference.
Did You Know?
W3.CSS is an excellent alternative to Bootstrap.
W3.CSS is smaller, faster, and easier to use.
If you want to learn W3.CSS, go to our W3.CSS Tutorial.
