Bootstrap Images

Images form backbone of the visual impact and aesthetics of a website. A picture is worth a thousand words. This idiom alone is sufficient enough to emphasize the importance of images in your website. Like other element, bootstrap images come with myriad of styling options. This article explains how bootstrap images are implemented in websites and how we can achieve different image affects via bootstrap image classes. Take a look at the following example.

Rounding Image Corners

You can round the corner of your images via “img-rounded” class inside the opening tag the “img” element. This adds small round corners around the image giving it a smooth look. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <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.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
     <img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-rounded" alt="Girl Running" width="500" height="400">
    </body>

</html>

Download the code
Try the code

When you open the above page in browser you should see an image with the rounded corners.

Converting Image to circle

You can convert any image to circle using the “img-circle” class. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <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.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
     <img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-circle" alt="Girl Running" width="400" height="400">
    </body>

</html>

Download the code
Try the code

Now, when you open the above webpage in the browser, you should see image in circular form.

Responsive Image

You can create responsive images via Bootstrap using “img-responsive” class. Responsive images change their size with respect to the size of the browser in which they are viewed. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <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.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
     <img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-responsive" alt="Girl Running" width="500" height="400">
    </body>

</html>

Download the code
Try the code

Now, when you open the above webpage in browser you should see the image in its default size. However, when you resize the browser and shrink it, the image shall also shrink. Increase the browser size will again increase the image size.

Creating Image Thumbnail

You can also display in image in the form of a thumbnail. To do so, add “img-thumbnail” class to any image you want to convert to thumbnail. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <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.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
     <img src="http://www.imagesource.com/Doc/IS0/Media/TR3_WATERMARKED/1/1/4/4/IS09A6IA1.jpg" class="img-thumbnail" alt="Girl Running" width="100" height="80">
    </body>

</html>

Download the code
Try the code

<<< Bootstrap TypographyBootstrap Tables >>>