How To Use Images In Bootstrap

Suraj Nohar
7y
12.6k
0
8

Article

Images are very common in a website design. So, it is very important to style the images and place them properly in webpages for a better user experience. Bootstrap provides us with four built-in classes for image styling.

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

Now, let us have a close look how these classes work in bootstrap.

.img-rounded

In bootstrap, this class is used to add rounded corners to an image. This class is used inside the container class. This type of image in Bootstrap is a more basic kind of image used in simple webpages. However, IE8 does not support rounded corners.

Example

Let us understand the use of .img-rounded class with the help of below example.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
<img src="D:\suraj\q4.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>

Src is used to give the image path, width attribute is used to set the image width, height attribute is used to set the height, and alt is used to provide an alternative text if the image cannot be displayed due to some reason.

Output

.img-circle

In bootstrap, this class is used to give circular shape to an image. All the attributes used in .img-rounded class can be used in this class also, with the exact meaning.

Example

Let us see this class with the help of same image which we used in earlier example.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .img-circle class gives circle shape to an image (not available in IE8):</p>
<img src="D:\suraj\q4.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>

Output

Img-responsive

In bootstrap, we can make an image responsive by using this class. Responsive images automatically adjust to fit in all size screens. The .img-responsive class applies max-width i.e. 100% and height automatically to image while the display will be in block view. This way of defining images is most popular and demanding now-a-days, the reason being responsive webpages are in demand.

Example

Below is the bootstrap responsive image example. We have used the same set of attributes which we used in the above classes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>Resize the browser window to see the effect:</p>
<img class="img-responsive" src="D:\suraj\q4.jpg" alt="Chania" width="460" height="345">
</div>
</body>
</html>

Output

To see the responsive image effect, resize your browser or open this in different screen sizes.

Img-thumbnail

We can use this class to create a thumbnail image in Bootstrap. Thumbnail adds a bit of padding and grey border to the image. There are two ways by which we can use thumbnail images in bootstraps i.e. Single thumbnail and multiple thumbnail (image gallery).

Single Thumbnail Image Example

First, let us have an example of single thumbnail image. In this, we can use only one image as a thumbnail image. All attributes - src, width, height, and alt are used with the same exact purpose.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="D:\suraj\q4.jpg" class="img-thumbnail" alt="Cinque Terre" width="400" height="312">
</div>
</body>
</html>

Output

Multiple Thumbnail images (Image Gallery)

We can also use .thumbnail class to create an image gallery too. For using a thumbnail image and making it as an image gallery, we have to use multiple thumbnail images. Let us see this with the help of an example.

<html lang="en">
<head>
<title>Bootstrap Image Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image Gallery</h2>
<p>The .thumbnail class can be used to create an image gallery.</p>
<p>The .caption class adds a dark grey color to text inside thumbnails and proper padding.</p>
<p>Click on the images to see the effects.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="D:\suraj\q4.jpg" target="_blank">
<img src="D:\suraj\q4.jpg" alt="Pulpit Rock" style="width:100%">
<div class="caption">
<p>Albert Einstein's words .</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="D:\suraj\q5.jpg" target="_blank">
<img src="D:\suraj\q5.jpg" alt="Moustiers Sainte Marie" style="width:100%">
<div class="caption">
<p>Dalai Lama's words.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="D:\suraj\q6.jpg" target="_blank">
<img src="D:\suraj\q6.jpg" alt="Cinque Terre" style="width:100%">
<div class="caption">
<p>Steve Jobs words.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

All attributes like src, width, height and alt are used with the same exact purpose but as you can see, we have used some more attributes like href which specifies the URL of the page the link goes to and target attribute is used to specify where to open the link. Caption class is used to add text caption to the images.

Output