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.
BootstrapTwitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. The Bootstrap framework is used to develop front-facing web applications and sites. To read more see
Bootstrap.
Include with HTML
Now to include them in the project. So let's imagine we have a blank HTML file that goes something like this:
HTML file
<!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:
![Img Tag]()
To Make Images (Rounded, Circle, Polaroid) With Twitter BootstrapTo make the Image more attractive using Bootstrap, open up the bootstrap.css file and check out the following Bootstrap CSS class.
- img-rounded
- img-circle
- 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">
<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>
Simple Image:
<img src="1.jpg">
rounded Image:
<img src="1.jpg" class="img-rounded">
</div>
</body>
</html>
The HTML will be rendered with Bootstrap as in the following:
![img-rounded]()
2. Using bootstrap CSS class="img-circle"
You now need to add the img-circle class. Open the bootstrap.css file and find the img-circle class. It looks like this:
<!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>
Simple Image:
<img src="1.jpg">
Circle Image:
<img src="1.jpg" class="img-circle">
</div>
</body>
</html>
The HTML will be rendered with Bootstrap as in the following:
![img-circle]()
3. Using bootstrap CSS class="img-polaroid"
This class is used to add a border and caption to an image. To do that you can add the img-polaroid class with the <img> Tag. Now open the bootstrap.css file and find the img-polaroid class. It looks like this:
<!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>
Simple Image:
<img src="1.jpg">
polaroid Image:
<img src="1.jpg" class="img-polaroid">
</div>
</body>
</html>
The HTML will be rendered with Bootstrap as in the following: