Bootstrap Images

Google Advertisements

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

Google Advertisements

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: [email protected] or 8076671483

Pure VPN Privide Lowest Price VPN Just @ $1.65. Per Month with Non Detected IP Lowest Price Non Detected IP VPN

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet


Download Projects

Media.net Advertisements


Buy Websites 9999595223

Buy Fresh and Payment Receive Media.net Account with Website. Contact on: [email protected] or 9999595223 Try this Keyword C++ Programs