Bootstrap Images
Advertisements
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
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
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
Google Advertisment