Latest web development tutorials

Bootstrap image

In this chapter, we will learn Bootstrap support for a picture. Bootstrap provides three can be applied to the image simple style class:

  • .img-rounded:Addborder-radius: 6pxto get the picture fillet.
  • .img-circle:addborder-radius: 50%to make the whole picture becomes circular.
  • .img-thumbnail:Add some padding (padding) and a gray border.

Consider the following examples demonstrate:


<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-rounded"> <Img src = "/wp-content/uploads/2014/06/download.png" class = "img-circle"> <Img src = "/wp-content/uploads/2014/06/download.png" class = "img-thumbnail">

try it"

The results are as follows:


<Img> class

The following classes are available to any image.

class description Examples
.img-rounded Adding a picture fillet (IE8 does not support) try it
.img-circle The picture becomes circular (IE8 does not support) try it
.img-thumbnail Thumbnails try it
.img-responsive Pictures Responsive (will scale well to the parent element) try it

Responsive image

By <img> tag to add .img-responsive image support class to make responsive design. Pictures will scale well to the parent element.

.img-responsive class max-width: 100%; and height: auto; style is applied on the image:


<Img src = "cinqueterre.jpg" class = "img-responsive" alt = "Cinque Terre">

try it"