Bootstrap Images

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Bootstrap Images

In this tutorial you will learn how to style images, creating thumbnails, grids of images and videos, and so on using Bootstrap.

Styling Images with Bootstrap

Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience.

Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.

Example

  •  src="125x125.jpg" class="img-rounded" alt="Rounded Image">
  •  src="125x125.jpg" class="img-circle" alt="Circular Image">
  •  src="125x125.jpg" class="img-thumbnail" alt="Thumbnail Image">

— The output of the above example will look something like this:

Bootstrap Image Styling

 

Warning:The classes .img-rounded and .img-circle do not work in IE8 and lower versions due to lack of support for CSS border-radius property.


Creating Responsive Images and Videos

In Bootstrap you can make the images responsive too. Just add the class .img-responsive to the tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it scales nicely to fit the containing element — in case if the width of the image is larger than the containing element itself.

Example

  •  src="kites.jpg" class="img-responsive" alt="Flying Kites">
  •  src="sky.jpg" class="img-responsive" alt="Cloudy Sky">
  •  src="balloons.jpg" class="img-responsive" alt="Hot Air Balloons">
 

Note:When making the responsive layouts consider making your images responsive too, otherwise if an image width is larger than the parent element's width in any case it will overflow and may break your layout.

You can also make the video or slideshow embedded in a web page responsive without affecting its original aspect ratio. The Bootstrap responsive embed classes can be applied directly to the , and  elements.

Example

  • 
    
  • 
     class="embed-responsive embed-responsive-16by9">
  • 
    
         class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4">
    	
    	
    • 
      
    • 
      
       
    • 
      
    • 
       class="embed-responsive embed-responsive-4by3">
    • 
           class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4">
    • 
      

    In the above example, we've created the two responsive videos with two different aspect ratios (16:9 and 4:3) by adding the classes .embed-responsive-16by9 and .embed-responsive-4by3to their containing blocks respectively and the class .embed-responsive-item to the descendant  element.

     

    Tip:The aspect ratio of an image describes the proportional relationship between its width and its height. Two common videographic aspect ratios are 16:9 and 4:3.

Bootstrap Thumbnails

The Bootstrap thumbnail component is very useful for creating grids of images or videos, lists of products, portfolios, and much more. The following example will show you how to create thumbnails to showcase linked images.

Example

  •  class="container">
  •      class="row">
  •          class="col-xs-3">
  •              href="#" class="thumbnail">
  •                  src="125x125.jpg" alt="125x125">
  • 
     
  • 
     
  •          class="col-xs-3">
  •              href="#" class="thumbnail">
  •                  src="125x125.jpg" alt="125x125">
  • 
     
  • 
     
  •          class="col-xs-3">
  •              href="#" class="thumbnail">
  •                  src="125x125.jpg" alt="125x125">
  • 
     
  • 
     
  •          class="col-xs-3">
  •              href="#" class="thumbnail">
  •                  src="125x125.jpg" alt="125x125">
  • 
     
  • 
     
  • 
     
  • 
     

— The output of the above example will look something like this:

Bootstrap Thumbnails

You can also insert HTML content like headings, paragraphs, or buttons into thumbnails.

Example

  •  class="container">
  •      class="row">
  •          class="col-xs-6">
  •              class="thumbnail">
  •                  src="avatar.jpg" alt="Sample Image">
  •                  class="caption">
  • 
     

    Thumbnail label

  • 
     

    Thumbnail description…

  • 
     

    href="#" class="btn btn-primary">Share href="#" class="btn btn-default">Download

  • 
     
  • 
     
  • 
     
  •          class="col-xs-6">
  •              class="thumbnail">
  •                  src="avatar.jpg" alt="Sample Image">
  •                  class="caption">
  • 
     

    Thumbnail label

  • 
     

    Thumbnail description…

  • 
     

    href="#" class="btn btn-primary">Share href="#" class="btn btn-default">Download

  • 
     
  • 
     
  • 
     
  • 
     
  • 
     

Tip:The thumbnails component uses existing grid classes like .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*, etc. for controlling the dimensions of thumbnails.