English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugins

Imagem Bootstrap

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

  • .img-rounded: Add border-radius:6px to get rounded corners on the image.

  • .img-circle: Add border-radius:50% to make the entire image round.

  • .img-thumbnail: Add some inner padding (padding) and a grey border.

Please see the following example demonstration:

Online 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>
Teste Veja ‹/›

The result is as shown below:

<img> class

The following classes can be used in any image.

ClassDescriptionExample
.img-roundedAdd rounded corners to the image (IE8 Not supported)Try it
.img-circleMake the image round (IE8 Not supported)Try it
.img-thumbnailThumbnail FunctionTry it
.img-responsiveImage responsive (will extend well to the parent element)Try it

Responsive Images

By adding .img to the <img> tag-responsive class to make images responsive design. 　Images will extend well to the parent element.

.img-responsive class will max-width: 100%; e height: auto; Style applied to images:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Base 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-A classe responsive permite que a imagem suporte a responsividade e se estenda bem para o elemento pai (verifique o efeito alterando o tamanho da janela):</p>　　　　　　　　　　　　　　　　　　
	<img　src="cinqueterre.jpg"　class="img-responsive"　alt="Cinque Terre"　width="304"　height="236">　
</div>
</body>
</html>
Teste Veja ‹/›
Classes Auxiliares BootstrapBotão Bootstrap