Bootstrap Image - custom style
18-05-2017    459 times
Bootstrap Image

Bootstrap Image

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

  • .img-rounded
  • .img-circle
  • .img-thumbnail
  • .img-responsive

Bootstrap Image

<!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>

Bootstrap Images
Bootstrap Images
Tutorial at home

Customize the Bootstrap code

Bootstrap Images Customize
Bootstrap Images Customize

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.

  1. Create a class named .img-thumbnailand override the properties. But this procedure will chance the actual class property for a single class.
  2. Create a class with any name and do the same. And attach that class where is needed. 

<!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>

Bootstrap Image Caption

Bootstrap Images Caption
Bootstrap Images Caption

We can set a caption just below the image by using the class called .caption.

Tutorial at home
Tutorial at home

<!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>

Video Tutorials

freenotes
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post