Bootstrap Images


Prev Tutorial Next Tutorial

Design Images Using Bootstrap

In Bootstrap you can design your image responsive-friendly via the addition of the .img-responsive class. There are three classes in Bootstrap that can be used to apply some simple style to the images.

  • .img-rounded This class used to adds border-radius:6px to give the image rounded corners.
  • .img-circle This class used to makes the entire image round by adding border-radius:500px.
  • .img-thumbnail This class used to adds a bit of padding and a gray border.

Bootstrap Image-rounded Example

.img-rounded class is used to add rounded corners to an image ( IE8 does not support rounded corners).

Bootstrap Images Example

<!DOCTYPE html>  
<html lang="en">  
 <head>  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
</head>  
<body>  
<div class="container">  
       
  <img src="/bootstrap/files/sublogo.png" class="img-rounded" alt="logo" width="150" height="200">   

</div>  
    
</body>  
</html>  

Output

logo

Bootstrap Image-circle Example

.img-circle class is used to shape the image to a circle (IE8 does not support rounded corners).

Bootstrap Images Example

<!DOCTYPE html>  
<html lang="en">  
 <head>  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
</head>  
<body>  
<div class="container">  

  <img src="/bootstrap/files/sublogo.png" class="img-circle" alt="logo" width="150" height="200">   

</div>  
    
</body>  
</html>  

Output

logo

Bootstrap Thumbnail Image Example

.img-thumbnail class is used to shape an image to a thumbnail.

Bootstrap Images Example

<!DOCTYPE html>  
<html lang="en">  
 <head>  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
</head>  
<body>  
<div class="container">  

  <img src="/bootstrap/files/sublogo.png" class="img-thumbnail" alt="logo" width="150" height="200">   

</div>  
    
</body>  
</html>  

Output

logo

Prev Tutorial Next Tutorial

Advertisements
z

Download Projects

Advertisements

Download WhatsApp Status Video

Buy This Ad Space Only $50 per Month, Ad Size 300X250 Contact on: [email protected] WhatsApp no. 8882538826

Google Adsense Advertisements