Bootstrap Images
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap Images
❮ Previous
Next ❯
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):
Example
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">Try it Yourself »
Circle
The .img-circle class shapes the image to a circle (IE8 does not
support rounded corners):
Example
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque
Terre">Try it Yourself »
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:
Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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:
Example
<img class="img-responsive" src="img_chania.jpg" alt="Chania"> Try it Yourself »
Image Gallery
You can also use Bootstrap's grid system in conjunction with the .thumbnail class
to create an image gallery.
Lorem ipsum donec id elit non mi porta gravida at eget metus.
Lorem ipsum donec id elit non mi porta gravida at eget metus.
Lorem ipsum donec id elit non mi porta gravida at eget metus.
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="http://kkky.hostkda.com/w3images/lights.jpg">
<img src="http://kkky.hostkda.com/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="http://kkky.hostkda.com/w3images/nature.jpg">
<img src="http://kkky.hostkda.com/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="http://kkky.hostkda.com/w3images/fjords.jpg">
<img src="http://kkky.hostkda.com/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 »
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
Complete Bootstrap Image Reference
For a complete reference of all image classes, go to our complete
Bootstrap Image Reference.
❮ Previous
Next ❯