Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Helper Classes Bootstrap Buttons

Bootstrap Images

In this chapter, we will learn about Bootstrap's support for images. Bootstrap provides three classes that can be applied to images for simple styling:

.img-roundedAdd border-radius:6px to get rounded corners on the image.
.img-circleAdd border-radius:50% to make the entire image circular.
.img-thumbnailAdd some inner padding (padding) and a grey border.

Please see the following example demonstration:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Image</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/run/images/download.png" class="img-rounded">
<img src="/run/images/download.png" class="img-circle">
<img src="/run/images/download.png" class="img-thumbnail">
</body>
</html>

Test to see ‹/›

The result is as shown below:

<img> class

The following classes can be used in any image.

Class	Description	Example
.img-rounded	Add rounded corners to the image (IE8 Not supported)	Try it
.img-circle	Make the image circular (IE8 Not supported)	Try it
.img-thumbnail	Thumbnail Function	Try it
.img-responsive	Image Responsive (will extend well to the parent element)	Try it

Responsive Image

By adding .img to the <img> tag-responsive class to make the image responsive. 　The image will extend well to the parent element.

.img-responsive class will max-width: 100%; and height: auto; style is applied to the image:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Basic Tutorial Website(oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2>image</h2>
	<p>　.img-The responsive class allows images to support responsive design and will expand well into the parent element (check the effect by changing the window size):</p>　　　　　　　　　　　　　　　　　　
	<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

Test to see ‹/›

Bootstrap Helper Classes Bootstrap Buttons