Sistema de Grid

Qualquer um que já tentou desenhar um layout em colunas, sabe o quanto isso é trabalhoso. Bootstrap torna essa tarefa muito mais fácil. Por padrão, Bootstrap já vem embutido com um sistema de grid de 12 colunas, o qual se adapta automaticamente de acordo com o tamanho da tela no qual a página será renderizada.

O sistema de grid do Bootstrap funciona com base nas seguintes regras:

• O conteúdo da página deve ser inserido dentro de células, especificadas por meio de propriedades como .col-xs-*, .col-sm-*, .col-md-* ou .col-lg-*.
• As células devem ser inseridas apenas dentro de linhas, representados pela propriedade .row.
• As linhas servem para alinhas horizontalmente as células do grid.
• As linhas do grid devem ser inseridas dentro de um .container ou .container-fluid.
• É possível definir o número de colunas que cada célula irá ocupar na linha, substituindo o * pelo tamanho desejado. Por exemplo: a célula .col-sm-6 ocupa 6 colunas.
• Uma célula pode ocupar de 1 a 12 colunas.

Exemplo

O código abaixo mostra um exemplo de utilização do sistema de grid do Bootstrap.

<div class="container">            
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>
        

Exercício

Reimplemente o exemplo anterior, porém utilizando a propriedade .container-fluid e veja o que acontece.

Layout para Mobile, Tablets, e Smartphone

Bootstrap fornece uma forma muito simples de tonar sua página responsiva para dispositivos mobile.

Para isto, Bootstrap permite a combinação entre as propriedades .col-xs-*, .col-sm-*, .col-md-* ou .col-lg-* para fornecer uma melhor experiência para o usuário.

Mas qual a diferença entre essas propriedades? Basicamente, essas propriedades definem o tamanho - em pixels - de cada célula. Além disso, essas propriedades definem o comportamento das células no que diz respeito a relação de si mesmas com os demais componentes da página. Por exemplo, tais propriedades definem quando as células deverão se alinhar horizontalmente e verticalmente. A tabela abaixo detalha o aspecto de cada uma dessas propriedades:

Isto é, caso você desejar customizar o layout para PC e Tablets, você deverá utilizar as propriedades .col-sm- e .col-md-. Para adicionar suporte a telas menores basta adicionar a propriedade .col-xs- as suas células.

É importante ressaltar que você pode definir o quanto cada propriedade .col- irá ocupar, tornando assim o seu layout ainda mais rico e customizável. Por exemplo, é possível definir uma célula da seguinte forma: <div class=".col-xs-12 .col-md-6">

Exemplo: Layout Tablet & Desktop

<div class="row">
  <div class="col-sm-12 col-md-6">
    <p class="bg-success">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="col-sm-12 col-md-6">
    <p class="bg-danger">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
          

Exemplo: Layout Smartphone, Tablet & Desktop

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    <p class="bg-success">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <p class="bg-info">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4">
    <p class="bg-warning">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
          

A Propriedade .offset

Bootstrap também fornece recursos para criar espaçamento entre as células para a criação de um layout mais dinâmico.

Para este espaçamento devemos definir a propriedade .col-*-offset-N a um elemento, onde * representa para quais dimensões o espaçamento deve existir, e N representa a quantidade de colunas que se deseja criar como espaçamento.

Exemplo

<div class="row">
  <div class="col-md-4 bg-success">.col-md-4</div>
  <div class="col-md-4 col-lg-offset-4 bg-info">.col-md-4 .col-lg-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3 bg-warning">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-sm-offset-3 bg-danger">.col-md-3 .col-sm-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-offset-3 bg-primary">.col-md-6 .col-xs-offset-3</div>
</div>
          

Colunas Aninhadas

Para aninhar células, basta adicionar um novo .row dentro da célula que se deseja aninhar. Assim como as demais, a nova linha adicionada poderá receber até 12 colunas, no entanto seu container estará limitado a célula ao qual ela está inclusa.

Exemplo

<div class="row">
  <div class="col-sm-9 bg-info">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6 bg-primary">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6 bg-primary">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>
          

Tipografia

Bootstrap possui um conjunto de estilos pré-definidos voltado para os principais elementos textuais do HTML. Nesta sessão exploraremos detalhadamente cada um deles.

Headings

Todos os headings presentes no HTML foram customizados pelo Bootstrap. Além disso, se for o caso, você pode utilizar as classes .h1...h6 para customizar elementos específicos com o mesmo estilo de seus respectivos headings.

Além disso, você pode combinar qualquer título com um texto menor, por meio do elemento <small> ou da classe .small.

Exemplo

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
          

Parágrafos

Por padrão, o Bootstrap trabalha com a fonte no tamanho de 14px, e um espaçamento de 1.428 entre as linhas. Além disso, todos os parágrafos possuem a propriedade bottom-margin equivalente a metade do espaçamento das linhas (~10px por padrão).

Além disso, você pode fazer um parágrafo se destacar dos demais por meio da propriedade lead, como pode ser observado abaixo:

Exemplo

Este é um parágrafo de destque, onde você pode escrever algo para chamar atenção de seus leitores.

Já este é um parágrafo normal, sem nenhum tipo de destaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

<p class="lead">Este é um parágrafo de destque, onde você pode escrever algo para chamar atenção de seus leitores.</p>

<p>Já este é um parágrafo normal, sem nenhum tipo de destaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
          

Marcações de Texto

Bootstrap também lhe fornece vários recursos para fazer marcações em seu texto, tais como destaque de texto, sublinhado, negrito, itálico, etc.

Exemplo

<p>Esta é uma frase que possui um texto de <mark>destaque</mark>. Para esse destaque utiliza-se o elemento <code><mark> ... </mark></code>.</p>

<p>Também podemos sublinhar um determinado trecho. Para isto, você pode utilizar o elemento <code><ins></code> ou <code><u></code>.</p>

<p>Para cortar um determinado trecho do texto, <del>basta utilizar o elemento <code><p></code></del> devemos utilizar o elemento <code><s></code> ou <code><del></code>.</p>

<p>O negrito pode ser <strong>utilizado</strong> por meio do elemento <code><strong></code></p>

<p>Por fim, o itálico pode ser aplicado por meio do elemento <code><em></code>. <em>Bacana não é??</em></p>
          

Classes de Alinhamento

Fazer alinhamento de texto é extremamente simples!!

Exemplo

Alinhado a esquerda.

Centralizado.

Alinhado a direita.

Justificado.

Texto sem quebra de linhaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa.

<p class="text-left">Alinhado a esquerda.</p>
<p class="text-center">Centralizado.</p>
<p class="text-right">Alinhado a direita.</p>
<p class="text-justify">Justificado.</p>
<p class="text-nowrap"> Texto sem quebra de linhaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa.</p>
          

Classes de Transformação

Também é possível fazer algumas transformações básicas no texto, tais como colocar o texto em caixa baixa, caixa alta, ou capitalizado.

Exemplo

TEXTO EM CAIXA BAIXA.

texto em caixa alta.

texto capitalizado.

<p class="text-lowercase">TEXTO EM CAIXA BAIXA.</p>
<p class="text-uppercase">texto em caixa alta.</p>
<p class="text-capitalize">texto capitalizado.</p>
          

Citações

É possível fazer citações por meio do elemento <blockquote>. Para referenciar a fonte, utiliza-se o elemento <footer>.

Além disso, podemos customizar o posicionamento da citação, por meio da classe .blockquote-reverse.

Exemplo

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

<blockquote>
  <p>One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.</p>
  <footer>Gandalf, The Grey</footer>
</blockquote>
          

Listas

O Bootstrap fornece várias opções para criar listas na sua página web. Por meio do Bootstrap, você pode criar listas ordenadas, desornedas, horizontais, descritivas, entre outras.

Para listas ordenadas/desordenadas, utilizamos os elementos <ul> e <ol>, respectivamente.

Para listas horizontais, basta incluir a classe .list-inline.

As listas descrivitas podem ser organizadas tanto verticalmente quanto lado-a-lado. Por padrão, as listas possuem alinhamento vertical. Porém se quiser alinhá-la horizontalmente, basta incluir a classe .dl-horizontal no elemento <dl>

Exemplo

<ul> 
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Primeiro Item</li>
  <li>Segundo Item</li>
  <li>Terceiro Item</li>
</ol>

<dl>
  <dt>Título do item 1</dt>
  <dd>Descrição do item 1</dd>
  <dt>Título do item 2</dt>
  <dd>Descrição do item 2</dd>
</dl>

<dl class="dl-horizontal">
  <dt>Título do item 1</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. </dd>
  <dt>Título do item 2</dt>
  <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dl>
          

Tabelas

Bootstrap fornece uma série de estilos para customização de tabelas. Para isso, deve-se adicionar a classe .table a tabela que você deseja customizar.

<table class="table">
  <thead>
    <tr>
      <td>Matrícula</td> <td>Nome</td> <td>Sobrenome</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>67852</td> <td>Celso</td> <td>Farias</td>
    </tr>
    <tr>
      <td>2367184</td> <td>Carlos</td> <td>Queiroz</td>
    </tr>
    <tr>
      <td>8796</td> <td>Mauro</td> <td>Cezar</td>
    </tr>
  </tbody>
</table>
        

É possível aplicar outros estilos, adicionando outras classes em conjunto com .table. Segue abaixo algusn exemplos de customização

<table class="table table-bordered">
  ...
</table>
            

<table class="table table-hover">
  ...
</table>
            

Estilizando Linhas das Tabelas

O Bootstrap fornece classes para estilizar tanto linhas quanto células individuais de uma tabela:

<table class="table table-condensed">
  <thead>
    <tr><td><strong>Classe</strong></td> <td><strong>Funcionalidade</strong></td></tr>
  </thead>
  <tbody>
    <tr class="active"><td><code>.active</code></td> <td>Indica algo selecionado.</td></tr>
    <tr class="success"><td><code>.success</code></td> <td>Indica algo positivo.</td></tr>
    <tr class="info"><td><code>.info</code></td> <td>Indica algo informativo.</td></tr>
    <tr class="warning"><td><code>.warning</code></td> <td>Indica cuidado, atenção.</td></tr>
    <tr class="danger"><td><code>.danger</code></td> <td>Indica algo negativo.</td></tr>
  </tbody>
</table>          
        

Forms

Os formulários representram o principal canal de comunicação entre o usuário e sua página web. Bootstrap também fornece um leque de customizações voltadas especificamente para sua implementação.

Configuração Geral

Os elementos <input>, <textarea>, e <select> são definidos com width: 100%;.

Além disso, cada campo do formulário (<label> e <input>) devem estar dentro de uma <div class="form-group">.

<form role="form">
  <div class="form-group">
    <label for="inputEmail">Endereço de E-mail</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Entre com seu e-mail">
  </div>
  <div class="form-group">
    <label for="inputSenha">Senha</label>
    <input type="password" class="form-control" id="inputSenha" placeholder="Senha">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"/> Estou de acordo com os termos
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>         
        

Form Horizontal

O Bootstrap fornece um estilo que alinha os dois campos horizontalmente. Para isso, deve-se utilizar a classe .form-horizontal. Além disso, é necessário configurar quanto de espaço a <label> e o <input> irão ocupar. Esse espaço pode ser definido por meio das propriedades col-*-*.

Exemplo

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Senha</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Senha">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Lembrar meus dados
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Registrar</button>
    </div>
  </div>
</form>
        

Desabilitando Controles

Os controles do formulário podem ser desabilitados por meio do atributo booleano disabled. Se utilizado em um <fieldset> o atributo irá desabilitar todos os componentes dentro deste <fieldset>.

Exemplo

<form role="form">
  <fieldset>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled>
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control" disabled>
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" disabled> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary" disabled>Submit</button>
  </fieldset>
</form>
        

Estilos para Validações

Bootstrap fornece um conjunto de estilos para validação de campos por meio das propriedades .has-warning, .has-error, .has-success. Para isso, basta adicionar uma das propriedades ao .form-group de cada campo do formulário.

Exemplo

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input com sucesso</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input com warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input com erro</label>
  <input type="text" class="form-control" id="inputError1">
</div>
        

Tamanho dos Controles

Fontes

Os controles podem ter o tamanho da sua fonte configurada por meio de classes como .input-lg ou .input-sm.

Exemplo

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
            

Largura

De forma similar, a largura dos controles pode ser definida por meio das classes col-*-*.

Exemplo

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>
        

Botões

Bootstrap possui uma série de estilos predefinidos de botões, que podem ser aplicados nos elementos <a>, <button> e <input>.

Similar as tabelas, devemos atribuir a class .btn seguida do estilo do botão no qual se deseja aplicar. são eles: .btn-default, .btn-primary, .btn-sucess, .btn-info, .btn-warning, .btn-danger, .btn-link

Exemplo

<button type="button" class="btn btn-default">.btn-default</button>
<button type="button" class="btn btn-primary">.btn-primary</button>
<button type="button" class="btn btn-success">.btn-success</button>
<button type="button" class="btn btn-info">.btn-info</button>
<button type="button" class="btn btn-warning">.btn-warning</button>
<button type="button" class="btn btn-danger">.btn-danger</button>
<button type="button" class="btn btn-link">.btn-link</button>
        

Tamanho dos Botões

Assim como o formulário, Bootstrap permite definir um tamanho para os botões. Essa customização poder ser feita através das classes .btn-lg, .btn-sm, e .btn-xs.

Exemplo

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
        

Imagens

No que diz respeito a imagens, o Bootstrap fornece a classe .img-responsive para tornar uma imagem responsiva. Na prática, essa classe irá aplicar as propriedades max-width: 100%; e height: auto; a imagem.

Além disso, Bootstrap fornece estilos predefinidos para bordas de imagens através das classes .img-rounded, .img-circle e .img-thumbnail.

Exemplo