Adding Bootstrap Image Classes

This article will explain some important classes to make images more attractive for your website, like rounded, circle or Polaroid Images. Using Twitter Bootstrap, you can add classes to an <img> element to easily style images in any project.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Now we need to add a reference to the bootstrap CSS file and JavaScrit file with the HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>

</body>

</html>

Note: Also don't forget to include jQuery if you'll be using Bootstraps JS plugins.

Using Simple <Img> Tag

Add an image in the <img> Tag. The following code defines the simple <img> tag with href. The HTML file looks as in the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="dist/js/bootstrap.js" type="text/javascript"></script>

</head>

<body>

<img src="1.jpg">

</body>

</html>

The HTML will render without Bootstrap as in the following:

To Make Images (Rounded, Circle, Polaroid) With Twitter Bootstrap

To make the Image more attractive using Bootstrap, open up the bootstrap.css file and check out the following Bootstrap CSS class.

1. img-rounded
2. img-circle
3. img-polaroid

1. Using bootstrap CSS class="img-rounded"

You now need to add the img-rounded class. Now open the bootstrap.css file and find the img-rounded class. It looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">