Bootstrap Images

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 Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

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


For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements