FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
We can decorate an image very easily by little bit code of the Bootstrap Image. Here we are only use the following predefined classes of bootstrap 3. We can create very atractive view of an image using the bootstrap classes. We can also alter or override the same as rquried
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="bootstrap.min.css">
<style>
.my-image
{
margin:0px 20px 0px 20px;
}
.image-div
{
background-color:#eee;
padding:10% 25px 10% 40px;
position:relative;
left:5%;
width:90%;
}
</style>
</head>
<body>
<div class="image-div ">
<img class="img-rounded my-image " src="img.jpg" width="200px" height="200px">
<img class="img-circle my-image " src="img.jpg" width="200px" height="200px">
<img class="img-circle my-image" src="img.jpg" width="300px" height="200px">
<img class="img-thumbnail my-image " src="img.jpg" width="200px" height="200px">
</div>
</body>
</html>
We can also override the bootstrap class style. For example we can increase the border size and color of the border of the thumbnail image. By default in the .img-thumbnail class following style property is set
display:inline-block;
max-width:100%;
height:auto;
padding:4px;
line-height:1.42857143;
background-color:#fff;
border:1px solid #ddd;
border-radius:4px;
All or any of these properties can override using !important keyword, write just after every style. There are two way to override the property.
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.my-image
{
margin:0px 20px 0px 20px;
}
.image-div
{
background-color:#eee;
padding:10% 25px 10% 40px;
position:relative;
left:5%;
width:90%;
}
.custom-thumbnail
{
border-color:#f00!important;
border-width:5px!important;
padding:0px!important;
}
</style>
</head>
<body>
<div class="image-div ">
<img class="img-rounded my-image " src="img.jpg" width="200px" height="200px">
<img class="img-circle my-image " src="img.jpg" width="200px" height="200px">
<img class="img-circle my-image" src="img.jpg" width="300px" height="200px">
<img class="img-thumbnail my-image custom-thumbnail" src="img.jpg" width="200px" height="200px">
</div>
</body>
</html>
We can set a caption just below the image by using the class called .caption.
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<style>
</head>
<body>
<div class="img-thumbnail" style="width:25%;left:200px;position:relative;margin:30px;"> <img src="img.jpg" width="100%">
<div class="caption">
<p align="center">Dahlia Flower</p>
</div>
</div>
</body>
</html>
