Bootstrap Images
Objective
In this tutorial, we will discuss three classes of Bootstrap 3 to style images. Additionally, we will cover what Bootstrap 3 provides for responsive images.
General Styles
Before discussing the special classes that Bootstrap 3 offers for styling images, let's look at the general styles for images provided by Bootstrap 3.
img {
border: 0;
}
This is the first CSS rule defined for images in Bootstrap 3's CSS, used to remove borders when images are rendered.
Then, within the print media query, these rules are specified.
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
page-break-inside: avoid; prevents a page break within images.
max-width: 100% !important; The style defined for images is obvious. Here, it is used to ensure that even if the image's width exceeds the container, it will be constrained within the container. It is used with !important to override any other styles that might disrupt this behavior. Sometimes, developers use these two rules specifically to better support friendly rendering of images on mobile devices.
There is another rule for images here:
img {
vertical-align: middle;
}
Due to this rule, an image will be vertically centered within a div or other elements. As shown in the example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Rendering Images Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body {
padding: 50px
}
.mdl {
background-color: silver;
padding: 7px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p class="mdl"><img decoding="async" src="icon-default-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Note that additional styles are needed if you want to vertically center the image contextually.
Special Styles
Bootstrap 3 provides three classes for rendering images with specific styles.
img-rounded
You can use this class to render images with rounded corners. To achieve this, Bootstrap provides the img-rounded class. The style for this class is defined as follows:
.img-rounded {
border-radius: 6px;
}
So, it sets the border-radius property with a value of 6 pixels to define rounded corners for the relevant image. The example below demonstrates two identical images, the first without the img-rounded class and the second with the img-rounded class. Notice that the second image has rounded corners. You can click here to view the example online.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Rounded Corners Image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body {
padding: 50px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img decoding="async" src="rounded-corner-images.png" alt="image with rounded corners">
<img decoding="async" src="rounded-corner-images.png" alt="image with rounded corners" class="img-rounded">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
img-thumbnail
This is another CSS class in Bootstrap 3 that adds a thumbnail effect to the image. The code for this class is shown below:
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Below is an example using this class. You can click here to view the online demo.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Thumbnail Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<img decoding="async" src="thumbnail-image.png" alt="thumbnail image" class="img-thumbnail">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
<style>
body {
padding: 50px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support for HTML5 elements and media queries. -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img decoding="async" src="image-with-thumbnail.png" alt="image without thumbnail corners">
<img decoding="async" src="image-with-thumbnail.png" alt="image with thumbnail corners" class="img-thumbnail">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
img-circle
Bootstrap 3 creates a circular image using the border-radius property. The CSS code for the img-circle class is as follows:
.img-circle {
border-radius: 50%;
}
Click here to view an example online. Below is a screenshot and the code.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Circular Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body {
padding: 50px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support for HTML5 elements and media queries. -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img decoding="async" src="image-with-circle.png" alt="image without circle shape">
<img decoding="async" src="image-with-circle.png" alt="image with circle shape" class="img-circle">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
Responsive Images
Bootstrap 3 does not provide ready-to-use responsive images. You must add the img-responsive class to the image to make it responsive. The CSS code for this class is as follows:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
It defines that the image must be displayed as a block-level element, the height will be the same as the image height, and the maximum width is 100%, to constrain the image to render according to the device it is on.
To make images responsive by default, you can add these CSS codes to img { }.
An example of using this class is as follows. You can click here to view the demo online.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Responsive Images</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body {
padding: 50px
}
img {
margin-bottom:30px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img decoding="async" src="image-with-circle.png" alt="without responsive image feature">
<img decoding="async" src="image-with-circle.png" alt="with responsive image feature" class="img-responsive">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
This method of adding responsive features to images has limitations.
Loading the same large, high-resolution images on both large screen devices and mobile devices (with smaller screen sizes, which may cause performance issues). Since browsers preload images before CSS and JS are loaded, this can also cause performance issues on a slow network connection. Imagine you have a large image with a specific object within it, and when you view the image on a mobile device, the image is scaled down to a smaller version, making the image appear small, a problem known as art direction.
Developers have come up with solutions to overcome these limitations. We will see an example by Marc Grabanski and Christopher Schmitt using HiSRC. This is a jQuery plugin that automatically creates low, medium, and high-resolution versions of images, and the rendered version depends on the resolution and bandwidth of the device displaying the image.
In our subsequent responsive images tutorial, we will discuss all these methods in detail. Click here to view the online demo. The code is as follows:
Example
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example with HiSRC in Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body {
padding: 50px
}
img {
margin-bottom:30px
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support for HTML5 elements and media queries. -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img decoding="async" src="5216852563_eca0af1b0d_m.jpg" data-1x="5216852563_eca0af1b0d.jpg" data-2x="5216852563_90c3f9c402_o.jpg" class="hisrc" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".hisrc").hisrc();
});
</script>
<p>Photo courtesy: /http://www.flickr.com/photos/cubagallery/</p>
</body>
</html>