Bootstrap Images

In this section we will demonstrate the use of images in bootstrap. In bootstrap we have three different classes that can be used for styling the images. Consider the following table in which we have defined these classes:

Classes Description
.image- rounded This class is used to add a border to round the corner of the image.
.image- circle This class is used to make the entire image in a circle.
.image- thumbnail This class is used to add a gray color border to the image and padding to the image.

Consider the following example in which we have sued all these classes for images in bootstrap:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<imgsrc = “http://404846152.r. upxcdn. net/ br/ wpcontent/uploads/2015/10/bootstrap-logo1.png” class = “img-rounded”><br>

<imgsrc = “http://404846152.r.upxcdn.net/br/wp-content/uploads/2015/10/bootstrap-logo1. png” class = “img-circle”><br>

<imgsrc = “http://404846152.r.upxcdn.net/br/wp-content/uploads/2015/10/bootstrap-logo1.png”

class = “img-thumbnail”>

</body>

</html>

The above code will generate the following result:

OUTPUT:

OUTPUT