Conheça as principais peças da arquitetura do Bootstrap, incluindo nossos metodos para melhorar, agilizar e fortalecer o desenvolvimento web.

HTML5 doctype

Bootstrap faz uso de certos elementos HTML e propriedades CSS que requerem o uso do HTML5 doctype. Inclua-o no início de todos os seus projetos.

<!DOCTYPE html>
<html lang="pt-br">
  ...
</html>

Mobile primeiro

No Bootstrap 2, havia a opção separada para se trabalhar para dispositivos móveis. Com Bootstrap 3, isso deixou de ser opcional, nós reescrevemos o projeto para ser amigável com todos dispositivos móveis desde o início. De fato, isso faz com que o Bootstrap torne-se Mobile first.

Para garantir a renderização adequada e sensíbilidade ao toque, adicione a meta tag viewport dentro do <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Você pode desativar a ampliação do zoom em dispositivos móveis adicionando user-scalable=no na meta tag viewport. Isso desativa o zoom, ou seja, os usuários só são capazes de trabalhar com a barra de rolagem, e o resultado é que seu site ficará parecido com um aplicativo nativo. Entretanto, nós não recomendamos isso em todos os sites, por isso tome cuidado!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tipografia e links

Bootstrap define estilos globais básicos de exibição, tipografia, e link. Assim, nós:

Definimos background-color: #fff; no body
Usamos atributos @font-family-base, @font-size-base, e @line-height-base como nossa base de tipografia
Definimos globalmente a cor do link via @link-color e underline apenas no :hover

Esses estilos podem ser encontrados em scaffolding.less.

Normalize.css

Para melhorar a renderização em todos os navegadores, nós usamos Normalize.css, um projeto feito por Nicolas Gallagher e Jonathan Neal.

Containers

Bootstrap requer um elemento que possibilite envolver o conteúdo do site e adote nosso sistema de grid. Você pode escolher um dos tipos de "containers" para usar em seus projetos. Lembre-se que isso cria um padding a mais, então não deve-se incluir nenhum "container" dentro de outro.

Use .container para conteúdo responsivo com largura limitada.

<div class="container">
  ...
</div>

Use .container-fluid para conteúdo responsivo com largura fluída, isto é, toda a largura da janela.

<div class="container-fluid">
  ...
</div>

Bootstrap includi um sistema de grid fluido responsivo, mobile first que balança apropriadamente até 12 colunas como dispositivo ou viewport de tamanho aumentado. Ele inclui classes predefinidas para opções de layout fácil, bem como mixins poderosos para geradores de layouts mais semânticos.

Introdução

Sistema de gride é usado para creação de layout de páginas através de uma série de linhas e colunas que abrigam seu conteúdo. Aqui esta como o sistema de grid do Bootstrap trabalha:

Linhas (row) devem estar localizadas dentro de um .container (largura fixa) ou .container-fluid (largura cheia) para alinhamento e padding adequado.
Use linhas para criar grupos horizontais de colunas.
Contenteúdo deve ser localizado dentro das colunas, e apenas colunas podem ser filhas imediatas de linhas.
Classes de grid predefinidos como .row e .col-xs-4 estão disponíveis para fazer rápidamente layouts em grid. Less mixins também podem ser usados para mais layouts semânticos.
Crie colunas calhas (lacunas entre colunas com conteúdo) através de padding. Esse padding é deslocado em linhas para a primeira e última coluna por margem negativa nos .rows.
A margem negativa é porque os exemplos abaixo estão sem indentação. É assim que o conteúdo dentro de colunas de grid é alinhado com conteúdo sem grid.
Colunas de grid são criados em um número específico de 12 colunas disponíveis que você pretende o que desejar abranger. Por ecemplo, três colunas iguais faria uso de três .col-xs-4.
Se mais que 12 colunas são colocadas dentro de uma única linha, cada grupo de colunas extras serão, como uma unidade, colocadas dentro de uma nova linha.
Classes de grid aplicadas para dispositivos com largura de tela maiores ou iguais aos tamanhos de ponto de parada, e sobrescreve classes de grid direcionadas em dispositivos menores. Portanto, por exemplo, aplicando qualquer classe .col-md-* para um elementos não irá apenas afetar seu estilo em dispositivos médios mas também em dispositivos grandes se uma classe .col-lg-* não está presente.

Veja os exemplos para aplicação destes princípios para seu código.

Media queries

Nós usamos as media queries seguintes em nossos arquivos Less para criar uma chave de ponto de parada em nosso sistema de grid.

/* Dispositivos extra pequenos (extra small) (celulares, menores que 768px) */
/* No media query since this is the default in Bootstrap */

/* Dispositivos pequenos (tablets, 768px e superiores) */
@media (min-width: @screen-sm-min) { ... }

/* Dispositivos médios (desktops, 992px e superiores) */
@media (min-width: @screen-md-min) { ... }

/* Dispositivos grandes (desktops grandes, 1200px e superiores) */
@media (min-width: @screen-lg-min) { ... }

Nós ocasionalmente aumentamos nessas media queries para incluir uma max-width para limitar o CSS para uma definição restrita de dispositivos.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Opções de grid

Veja como os aspectos do sistema de grid do Bootstrap trabalha através de múltiplos dispositivos com uma tabela prática.

	Dispositivos extra pequenos Telefones (<768px)	Dispositivos pequenos Tablets (≥768px)	Dispositivos médios Desktops (≥992px)	Dispositivos grandes Desktops (≥1200px)
Comportamento do grid	Horizontal em todos os momentos	Colapsa ao princípio, horizontal acima de breakpoints
Largura do container	nenhum (auto)	750px	970px	1170px
Prefixo de classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
número de colunas	12
Largura da coluna	Auto	~62px	~81px	~97px
Largura da calha	30px (15px em cada lada da coluna)
Encaixável	Sim
Distância	Sim
Ordenação de colunas	Sim

Exemplo: Empilhamento horizontal

Usando uma única definição de classe de grid .col-md-*, você pode criar um sistema de grid bádico que inicia fora da pilha nos dispositivos móveis e tablets (o extra pequeno para alcance pequeno) antes de se tornar horizontal em dispositivos desktop (médio). Coloque colunas de grid em algum .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<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>

Exemplo: Container fluido

Torne qualquer largura fixa (fixed-width) de layout de grid dentro de um layout de largura inteira (full-width) através de mudança externa no .container para .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Exemplo: Celular e desktop

Não quer suas colunas simplesmente empilhadas em dispositivos menores? Use as classes de grid para disposivitos extra pequenos (xs) e médios (md) adicionado .col-xs-* .col-md-* em suas colunas. Veja os exemplos abaixo para uma ideia melhor de como isso tudo trabalha.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Exemplo: Celular, tablet, desktop

Configure sobre o exemplo anterior criando ainda mais dinâmicos e poderosos layouts com classes de tablets .col-sm-*.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Exemplo: Envolvendo coluna

Se mais que 12 colunas estão colocadas dentro de uma única linha, cada grupo de colunas extras irão, como uma unidade, envolver dentro de uma nova linha.

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-xs-6
Subsequent columns continue along the new line.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Umz vez que 9 + 4 = 13 &gt; 12, essa div com largura de coluna 4 será envolvida dentro de uma nova linha como uma unidade contínua.</div>
  <div class="col-xs-6">.col-xs-6<br>Colunas subsequentes continuam ao longo da nova linha.</div>
</div>

Redefinições de colunas responsivas

Com a quarta camada de grids disponível você é limitado executar dentro de questões onde, em certos breakpoints, suas colunas não limpam muito bem como um é mais alto que o outro. Para corrigir isso, use uma combinação de um .clearfix e nossas classes de utilidade responsiva.

.col-xs-6 .col-sm-3
Redimensione sua janela de exibição ou confira em seu telefone para um exemplo.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Além disso, para compensar colunas em breakpoints responsive, você pode precisar redefinir offsets, pushes, ou pulls. Veja isso em ação no exemplo de grid.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Colunas Offsetting

Mova colunas para a direita usando as classes .col-md-offset-*. Essas classes acrescentam a margem esquerda de coluna por * colunas. Por exemplo, .col-md-offset-4 movimenta .col-md-4 ao londo de quatro colunas.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Aninhamento de colunas

Para aninhar seu conteúdo com o grid padrão, adicione um novo .row (linha) e defina sobre .col-sm-* colunas numa coluna existente .col-sm-*. Linhas aninhadas devem incluir uma definição de colunas que adicionam para 12 ou menos (isso não é necessário que você use todas as 12 colunas disponíveis).

Nível 1: .col-sm-9

Nível 2: .col-xs-8 .col-sm-6

Nível 2: .col-xs-4 .col-sm-6

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

Ordenação de coluna

Mude facilmente a ordem de nossas colunas de grid embutidas com as classes modificadoras .col-md-push-* e .col-md-pull-*.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Mixins less e variáveis

Além de classes de grid pré contruídas para layouts rápidos, Bootstrap inclui variáveis Less e mixins gerar rapidamente seus próprios layouts simples e dinâmicos.

Variáveis

Variáveis determinam o número de colunas, a largura da calha, e o ponto de media query no qual começam colunas flutuantes. Nós usamos isso para gerar as classes de grid predefinidos documentada acima, bem como para os mixins personalizados listados abaixo.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Mixins são usados em conjunto com as variáveis de grid para gerar CSS semânticos para colunas de grid individual.

// Crie um envólucro para uma serie de colunas
.make-row(@gutter: @grid-gutter-width) {
  // Então, limpe as colunas flutuantes
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Gerae a coluna extra pequena
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcula largura baseada no número de colunas disponíveis
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Gera a coluna pequena
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcula largura baseada no número de colunas disponíveis
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Gera colunas offsets pequenas
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Gerar a coluna média
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calcule largura baseada no número de colunas disponíveis
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Exemplo de uso

Você pode modificar as variáveis para seus próprio valores personalizados, ou apenas uso os mixins com seus valores padrão. Aqui está um exemplo de uso de configuração padrão para criar um layout de duas colunas com uma lacuna entre elas.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Cabeçalhos

Todos os cabeçalhos HTML, <h1> até <h6>, estão disponíveis. Classes .h1 até .h6 também estão disponíveis, para quando você quiser combinar o estilo de fonte de um cabeçalho mas ainda querer seu texto seja exibido em linha.

h1. Cabeçalho Bootstrap	Semi-negrito 36px
h2. Cabeçalho Bootstrap	Semi-negrito 30px
h3. Cabeçalho Bootstrap	Semi-negrito 24px
h4. Cabeçalho Bootstrap	Semi-negrito 18px
h5. Cabeçalho Bootstrap	Semi-negrito 14px
h6. Cabeçalho Bootstrap	Semi-negrito 12px

<h1>h1. Cabeçalho Bootstrap</h1>
<h2>h2. Cabeçalho Bootstrap</h2>
<h3>h3. Cabeçalho Bootstrap</h3>
<h4>h4. Cabeçalho Bootstrap</h4>
<h5>h5. Cabeçalho Bootstrap</h5>
<h6>h6. Cabeçalho Bootstrap</h6>

Crie textos secundários em alguns cabeçalhos com uma tag genérica <small> ou a classe .small.

h1. Cabeçalho Bootstrap Texto secundário

h2. Cabeçalho Bootstrap Texto secundário

h3. Cabeçalho Bootstrap Texto secundário

h4. Cabeçalho Bootstrap Texto secundário

h5. Cabeçalho Bootstrap Texto secundário

h6. Cabeçalho Bootstrap Texto secundário

<h1>h1. Cabeçalho Bootstrap <small>Texto secundário</small></h1>
<h2>h2. Cabeçalho Bootstrap <small>Texto secundário</small></h2>
<h3>h3. Cabeçalho Bootstrap <small>Texto secundário</small></h3>
<h4>h4. Cabeçalho Bootstrap <small>Texto secundário</small></h4>
<h5>h5. Cabeçalho Bootstrap <small>Texto secundário</small></h5>
<h6>h6. Cabeçalho Bootstrap <small>Texto secundário</small></h6>

Exemplo de corpo (body)

O padrão global da font-size (tamanho da fonte) do Bootstrap é 14px, com uma line-height (altura de linha) de 1.428. Isso é aplicado para o corpo <body> e todos os parágrafos. Além disso, <p> (paragrafos) recebem uma margem inferior (bottom) de metade de seu line-height computado (10px por padrão).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Exemplo de corpo destacado (Lead body)

Faça um paragrafo em destaque adicionado .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Contrução com Less

A escala tipografica é baseada em duas variáveis Less em variables.less: @font-size-base e @line-height-base. A primeira é o tamanho de fonte base (font-size) usado em tudo e a segunda é a altura de linha base (line-height). Nós usamos essas variáveis e uma matemática simples para criar as margens, paddings, e line-heights de todo nossos tipos e mais. Personalize-os e ajuste ao Bootstrap.

Elementos do texto em linha

Texto marcado

Para destacar um pedaço de texto devido sua relevancia em outro contexto, use a tag <mark>.

Você pode usar a tag mark para destacar um texto.

Você pode usar a tag mark para <mark>destacar</mark> um texto.

Texto deletado

Para indicar blocos de texto que foram deletados use a tag <del>.

~~Esta linha de texto é para ser tratada como texto excluído.~~

<del>Esta linha de texto é para ser tratada como texto excluído.</del>

Texto tachado

Para indicar blocos de texto que não são mais relevantes use a tag <s>.

~~Esta linha de texto é destinada a ser tratada como não precisa.~~

<s>Esta linha de texto é destinada a ser tratada como não precisa.</s>

Texto inserido

Para indicar adições ao documento use a tag <ins>.

Essa linha de texto é destinada a ser tratada como uma adição para o documento.

<ins>Essa linha de texto é destinada a ser tratada como uma adição para o documento.</ins>

Texto sublinhado

Para sublinhar o texto use a tag <u>.

Essa linha de texto se tornará sublinhada

<u>Essa linha de texto se tornará sublinhada</u>

Faça usoe de padrões HTML destacando tags com estilos leves.

Texto pequeno

Para e enfatização em linha ou blocos de texto, use a tag <small> para definir texto perto de 85% do manho do pai. Elementos de cabeçalho recebem sua própria font-size (tamanho de fonte) para aninhar elementos <small>.

Você pode alternativamente usar um elemento em linha com .small no lugar de algum <small>.

Essa linha de texto é destinada a ser tratada como impressão fina.

<small>Essa linha de texto é destinada a ser tratada como impressão fina.</small>

Negrito

Para enfatizar um trecho de texto com uma font-weight (peso de fonte) mais pesada.

A seguir o trecho de texto é renderizado como texto em negrito.

<strong>renderiza como texto em negrito</strong>

Itálico

Para enfatizar um trecho de texto em itálico.

A seguir o trecho de texto é renderizado como texto em itálico.

<em>renderizado como texto em itálico</em>

Elementos alternativos

Sinta-se livre para usar <b> e <i> em HTML5. <b> é destinado para destacar palavras ou frases sem transmitir importância adicional enquanto <i> é principalmente para voz, termos técnicos, etc.

Classes de alinhamento

Realinhe texto facilmente para componentes com classes de alinhamento de texto.

Texto alinhado à esquerda.

Texto alinhado ao centro.

Texto alinhado à direita.

Texto justificado.

Texto sem alinhamento.

<p class="text-left">Texto alinhado à esquerda.</p>
<p class="text-center">Texto alinhado ao centro.</p>
<p class="text-right">Texto alinhado à direita.</p>
<p class="text-justify">Texto justificado.</p>
<p class="text-nowrap">Texto sem alinhamento.</p>

Classes de transformação

Transforme textos em componentes com classes capitalização de texto.

Texto em minúsculo.

Texto em maiúsculo.

Texto capitalizado.

<p class="text-lowercase">Texto em minúsculo.</p>
<p class="text-uppercase">Texto em maiúsculo.</p>
<p class="text-capitalize">Texto capitalizado.</p>

Abreviações

Implementação estilizada de HTML do elemento <abbr> para abreviações e siglas para mostrar a versão expandida em hover. Abreviação com um atributo title tem uma clara borda inferior pontilhada e um cursor de ajuda no hover, fornecendo contexto adicional no hover e para usuários de tecnologias assistivas.

Abreviação básica

Uma abreviação da palavras número é num.

<abbr title="número">num</abbr>

Iniciais

Adicione .initialism para uma abreviação com font-size ligeiramente menor.

HTML é a melhor coisa desde o pão fatiado.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Endereços

Informações de contato presentes para o ancestral mais próximo ou o corpo inteiro de trabalho. Preserve formatação ao finalizar todas as linhas com <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nome completo
first.last@example.com

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Nome completo</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes (bloco de citações)

Para blocos de citações de conteúdo de outra fonte dentro de seu documento.

Blockquote padrão

Envolva <blockquote> ao redor de qualquer HTML como uma citação. Para citações diretas, nós recomendamos um <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Opções de blockquote

Estilo e mudanças de conteúdo para variações simples em um norma <blockquote>.

Nomeando uma fonte

Adicione um <footer> (rodapé) para identificar uma fonte. Envolva o nome da fonte do trabalho em <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Alguém famoso em Título da fonte

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Alguém famoso em <cite title="Título da fonte">Título da fonte</cite></footer>
</blockquote>

Exibição alternativa

Adicione .blockquote-reverse para uma caixa de citação (blockquote) com conteúdo alinhado à direita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Alguém famoso em Título da fonte

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listas

Não-ordenada

Uma lista de itens em que a ordem não tem importância expor.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Ordenada

Uma lista de itens em que a ordem tem importância em expor.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Não estilizado

Remova o padrão da list-style (estilo da lista) e margem esquerda na lista de itens (Apenas para filhos imediatos). Isso apenas se aplica a filhos imediatos na lista de itens, isso significa que você precisará adicionar a classe para qualquer lista alinhada também.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

Em linha

Coloque todos os itens da lista em uma única linha com display: inline-block; e algum espaçamento aparente.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Descrição

Uma lista de termos como suas descrições associadas.

Lista de descrição: Uma lista de descrição é perfeita para definição de termos.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descrição horizontal

Faça termos e descrições em <dl> alinhando lado a lado. Comece empilhando como padrão <dl>s, mas quando a navbar (barra de navegação) aumentar, assim como estes.

Listas de descrição: Uma lista descrição é perfeita para definição de termos.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-truncado

Descrição listas horizontais truncarão termos que são que são muito grandes para caber na coluna esquerda com text-overflow. Em janelas de exibição mais estreitas, eles mudarão para o layout de empilhamento padrão.

Em linha

Empacote trechos de códigos em linha com <code>.

Por exemplo, <section> deve ser empacotado em linha.

Por exemplo, <code>&lt;section&gt;</code> deve ser empacotado em linha.

Entrada de usuário

Use <kbd> para indicar entradas via teclado.

Para mudar de diretório, digite cd seguido pelo nome do diretório.
Para editar configurações, pressione ctrl + ,

Para mudar de diretório, digite <kbd>cd</kbd> seguido pelo nome do diretório.<br>
Para editar configurações, pressione <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Bloco básico

Use <pre> para múltiplas linhas de código. Be sure to escape any angle brackets in the code for proper rendering.

<p>Texto simples aqui...</p>

<pre>&lt;p&gt;Texto simples aqui...&lt;/p&gt;</pre>

Você pode opcionalmente adicionar a classe .pre-scrollable, que irá definir uma altura máxima de 350px e fornecer uma barra de rolagem eixo-y.

Variáveis

Para indicar variáveis use a tag <var>.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Exemplo de saída

Para indicar blocos de saída simples a partir de um programa use a tag <samp>.

Esse texto é como uma saída simples de um programa de computador.

<samp>Esse texto é como uma saída simples de um programa de computador</samp>

Exemplo basico

Para estilo basico — padding leve e poucos divisores horizontais — adicione classe base .table para qualquer <table>. Isso pode parecer super-redundante, mas dada a utilização generalizada de tabelas para outros plugins como calendários e selecionadores de data, nós optamos por isolar nossos estilos de tabela personalizada.

Legenda de tabela opcional.
#	Primeiro Nome	Último Name	Nome de usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Striped rows (Linhas listradas)

Use .table-striped para adicionar linhas zebradas à qualquer linha da tabela dentro do <tbody>.

Compatibilidade Cross-browser

Tabelas listradas são estilizadas por meio do seletor CSS :nth-child, que não está disponível no Internet Explorer 8.

#	Primeiro Nome	Último Name	Nome de usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Tabela com bordas

Adicione .table-bordered para bordas em todoas os lados da tabela e celulas.

#	Primeiro Nome	Último Name	Nome de usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Linhas com Hover

Adicione .table-hover para habilitar um efeito hover nas linhas da tabela dentro do <tbody>.

#	Primeiro Nome	Último Name	Nome de usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Tabela condensada

Adicione .table-condensed para fazer as tabelas mais comactadas por cortar o padding das celulas na metade.

#	Primeiro Nome	Último Name	Nome de usuário
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

Classes contextuais

Use classes contextuais para colorir as linhas da tabela ou células individuais.

Classe	Descrição
`.active`	Aplique a cor de hover para uma linha ou célula em particular
`.success`	Indica uma ação bem-sucedida ou positiva
`.info`	Indica uma alteração de informação neutra ou ação
`.warning`	Indica um aviso de que pode precisar de atenção
`.danger`	Indica uma ação perigosa ou potencialmente negativa

#	Título da coluna	Título da coluna	Título da coluna
1	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
2	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
3	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
4	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
5	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
6	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
7	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
8	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
9	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Transmitir significado às tecnologias assistivas

Usar cores para adicionar significado para uma linha de tabela ou célula individual apenas fornece uma indicação visual, que não será transmitida para usuários de tecnologias assistivas – tais como leitores de telas. Assegure que informações indicadas por cores sejam óbvias em seu próprio conteúdo (o texto visível na linha/célula da tabela relevante), ou está incluído através de meios alternativos, como texto adicional oculto com a classe .sr-only.

Tabela responsiva

Criar tabelas responsivas envolvendo em qualquer .table no .table-responsive para fazê-los rolar horizontalmente em dispositivos pequenos (abaixo de 768px). Quando visualizar em algo maior do que 768px de largura, você não verá qualquer diferença nessas tabelas.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Firefox e fieldsets

Firefox tem alguns estilos estranhos de fieldsets envolvendo width que interfere na tabela responsiva. Isso não pode ser sobrescrito sem um hack específico do Firefox que nós não fornecemos no Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Para mais informações, leia essas respostas de estouro de pilha.

#	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela
1	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
2	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
3	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela

#	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela	Cabeçalho da tabela
1	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
2	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
3	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Exemplo básico

Controles de formulários individuais recebem automaticamente algum estilo global. Todos os elementos textuais <input>, <textarea>, e <select> com .form-control são ajustados para width: 100%; por padrão. Envolva labels e controles em .form-group para melhor espaçamento.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Endereço de e-mail</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Senha</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">Entrada de arquivo</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Exemplo de texto de ajuda em nível de bloco.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Me selecione
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Não misture grupos de formulário com grupos de entrada

Não misture grupos de formulário diretamente com grupos de entrada. Ao invés disso, aninhe os grupos de entradas dentro do grupo de formulário.

Formulário em linha

Adicione .form-inline ao seu formulário (que não tem que ser um <form>) para controles de left-aligned e inline-block. Isso se aplica apenas para formulário dentro de viewports que são pelo menos com 768px de largura.

Pode exigir larguras personalizadas

Inputs e selects tem width: 100%; aplicado por padrão no Bootstrap. Dentro de formulários inline, nós redefinimos isso para width: auto;assim vários controles podem residir na mesma linha. Dependendo do seu layout, adicionar larguras personalizadas pode ser necessário.

Sempre adicione labels

Os leitores de tela terão dificuldade com seus formulários, se você não incluir um label para cada entrada. Para estes formulários in-line, você pode ocultar as labels usando a classe .sr-only. Existem outros métodos alternativos de fornecer uma label para tecnologias assistivas, tais como os atributos aria-label, aria-labelledby ou title. Se nenhum desses estiver presente, leitores de tela podem usar o atributo placeholder, se presente, mas note que o uso de placeholder como um substituto para outros métodos de rotulagem não é aconselhável.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Nome</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Enviar convite</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Endereço de e-mail</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Senha</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="senha">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Me lembre
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Valor (en dolar)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Valor">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">transferir dinheiro</button>
</form>

Formulário horizontal

Use as classes de grid predefinidos do Bootstrap para alinhar os labels e grupos de controles de formulários em um layout horizontal adicione .form-horizontal ao formulário (wque não tem que ser um <form>). Fazendo essas mudanças .form-group se comportarão como linhas de grade, assim não há necessidade para .row.

<form class="form-horizontal">
  <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="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Me lembre
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Controles suportados

Exemplos de controles de formulário padrão suportados em um layout exemplo de formulário.

Inputs

A maior parte de controle do formulário comum, campos de entrada baseados em texto. Inclui suporte para todos os tipos de HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, e color.

Declaração de tipo necessária

Inputs só será plenamente denominado se seu tipo estar devidamente declarado.

<input type="text" class="form-control" placeholder="Entrada de texto">

Grupo de Inputs

Para adicionar texto ou botões integrados antes e/ou depois de alguma base de texto <input>, veja o componente de grupo de entrada.

Textarea

Controle de formulário que suporta várias linhas de texto. Mude o atributo rows se necessário.

<textarea class="form-control" rows="3"></textarea>

Checkboxes e radios

Checkboxes (ou caixas de seleção) são para selecionar uma ou várias opções numa lista, enquanto radios (seleção em rádio - redondo) são para selecionar uma opção de muitas.

Desabilitar checkboxes e radios são suportados, mas fornecer um cursor "não-autorizado" no foco do pai <label>, você precisará adicionar a classe .disabled para o pai .radio, .radio-inline, .checkbox, ou .checkbox-inline.

Padrão (empilhado)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
   Opção um é isso e aquilo &mdash; não deixe de incluir porque é ótimo.
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
     Opção dois está desabilitada.
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Opção um é isso e aquilo &mdash; não deixe de incluir porque é ótimo.
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Opção dois pode ser outra coisa e selecionando-o irá desmarcar a opção um.
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
     Opção três está desabilitada.
  </label>
</div>

checkboxes e radios em linha

Use as classes .checkbox-inline ou .radio-inline em uma série de checkboxes ou radios para controles que aparecem na mesma linha.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Checkboxes e radios sem texto na estiqueta (label)

Mesmo não tendo texto dentro da <label>, o input será posicionado como o esperado. Atualmente só funciona em checkboxes and radios non-inline . Lembre de continuar fornecendo algum tipo de rótulo para tecnologias assistivas (por exemplo, usando aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Selects

Note que muitos menus seletores nativamente - a saber, no Safari e Chrome - possuem cantos arredondados que não podem ser modificados por meio da propriedade border-radius.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Para <select> com o atributo de controle multiple, multiplas opções são exibidas por padrão.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Controle estático

Quando você precisar colocar texto simples próximo à uma etiqueta de formulário dentro de formulário, use a classe .form-control-static no <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Estado focado

Nós removemos o estilo padrão outline em alguns controles de formulários e aplicamos um box-shadow em seu lugar por :focus.

Demonstração de estado `:focus`

O exemplo de entrada acima usa estilo personalizado em nossa documentação para demonstrar o estado :focus em um .form-control.

Estado desativado

Adicione o atributo boleano disabled em uma entrada (input) para impedir interações do usuário. Entrada desativada aparecem mais leves e adicionam um cursor not-allowed.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Fieldsets desativados

Adicione o atributo disabled a um <fieldset> para desabilitar todos os controles dentro do <fieldset> de uma vez.

Aviso sobre funcionalidade de link `<a>`

Por padrão, navegadores tratarão todos os controles de formulário (elementos <input>, <select> e <button>) dentro de um <fieldset disabled> como desativado, impedindo interações de mouse e teclado neles. Porém, se seu formulário também inclui elementos <a ... class="btn btn-*">, estes só irá ser dado um estilo de pointer-events: none. Como observado na seção sobre o estado desativado para botões (e especificamente na sub-seção para elementos em âncora), essa propriedade CSS ainda não é padronizada e não é totalmente suportada no Opera 18 pra baixo, ou no Internet Explorer 11, e não irá impedir usuários de teclado de serem capazes de encontrar ou ativar esses links. Então, por segurança, use JavaScript para desativar tais links.

Compatibilidade cross-browser

Enquanto o Bootstrap aplicar esses estilos em todos os navegadores, Internet Explorer 11 pra baixo não suportam totalmente o atributo disabled em um <fieldset>. Use JavaScript para desativar os campos nesses navegadores.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Entrada desativada</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Seleção de menu desativada</label>
      <select id="disabledSelect" class="form-control">
        <option>seleção desativada</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Não pode checkar isso
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </fieldset>
</form>

Estado para leitura

Adicione o atributo boleano readonly em uma entrada para impedir modificação do valor da entrada. Entrada de apenas leitura aparecem apagadas (assim como entrada desabilitada), mas mantém o cursor padrão.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Texto de ajuda

Blocos de nível de texto de ajuda para controles de formulário.

Associando texto de ajuda com controles de formulário

Texto de ajuda deve estar explicitamente associado com o controle de formulário que se refere ao uso do atributo aria-describedby. Isso irá assegurar que as tecnologias assistivas – tais como leitores de tela – anunciará estes textos de ajuda quando o usuário focalizar ou entrar no controle.

<label class="sr-only" for="inputHelpBlock">Entrada com texto de ajuda</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">Um bloco de texto de ajuda que divide em uma nova linha e pode ir além de uma linha one line.</span>

Estado de validação

Bootstrap inclui estilos de validação para estado de erro, aviso, e successo nos controles de formulário. Para usar, adicione .has-warning, .has-error, ou .has-success para o elemento pai. Tanto .control-label, .form-control, e .help-block dentro desse elemento que receberá o estilo de validação.

Transmitir estado de validação para as tecnologias de apoio e usuários daltônicos

Usando esses estilos de validação para denotar o estado de um controle de formulário apenas apenas fornecerá um visual, indicação em base de cores, que não serão transmitidas para usuários de tecnologias assistivas - tais como leitores de tela - ou para usuários daltônicos.

Garanta que uma indicação alternativa de estado também seja fornecida. Por exemplo, você pode incluir uma dica sobre o estado nos controles de formulários <label> texto em si mesmo (como é o caso do código do exemplo a seguir), inclui um Glyphicon (com texto alternativo apropriado usando a classe .sr-only - veja os exemplos Glyphicon), ou pelo fornecimento de um bloco de texto de ajuda adicional. Especificamente para tecnologias assistivas, controles de formulários inválidos também pode ser atribuído o atributo aria-invalid="true".

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Entrada com successo</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Entrada com advertência</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Entrada com erro</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox com sucesso
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox com advertência
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox com erro
    </label>
  </div>
</div>

Com ícones opcionais

Você também pode adicionar ícone opcional de feedback com a adição de .has-feedback e o ícone direito.

Ícones de feedback apenas trabalham com elementos textuais <input class="form-control">.

Ícones, etiquetas, e grupos de entradas

Posicionamento manual de ícones de feedback é necessário para entradas sem uma etiqueta e para grupos de entradas com um add-on à direita. Você é fortemente encorajado à providenciar etiquetas para todas as entradas por causa de acessibilidade. Se você quiser evitar etiquetas de serem mostradas, esconda elas com a classe .sr-only. Se você necessitar fazer sem etiquetas, ajuste o valor de top do ícone de feedback. Para grupos de entradas, ajuste o valor do right para um valor de pixel apropriado dependendo da largura do seu add-on.

Transmitindo o significado dos ícones para tecnologia assistiva

Para garantir que tecnologias assistivas – como os leitores de tela – transmitam correctamente o significado dos ícones, texto adicional oculto deve ser incluido com a classe .sr-only e explicitamente associado com o controle de formulário está relacionado ao uso de aria-describedby. Alternativamente, garanta que o significado (por exemplo, o fato de que há um aviso para um campo de entrada de texto particular) seja transmitido de alguma outra forma, tal como mudando o texto do atual <label> associado com o controle de formulário.

Embora o exemplo seguinte já mencione o estado de validação de seus respectivos controles de formulário no <label> texto próprio, a técnica acima (usando texto com .sr-only e aria-describedby) foi incluído para fins ilustrativos.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Entrada com successo</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(successo)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Entrada com advertência</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(advertência)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Entrada com erro</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(erro)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Grupo de entrada com successo</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(successo)</span>
</div>

Ícones opcionais em horizontal e formulários em linha

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Entrada com successo</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(successo)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Grupo de entrada com successo</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(successo)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Entrada com successo</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(successo)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Grupo de entrada com successo</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(successo)</span>
  </div>
</form>

Ícones opcionais com etiquetas ocultas `.sr-only`

Se você usar a classe .sr-only para esconder um controle de formulário <label> (em vez de usar outras opções de rotulagem, tais como o atributo aria-label), Bootstrap irá automaticamente ajustar a posição do ícone uma vez que foi adicionado.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Etiqueta oculta</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(successo)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">grupo de entrada com successo</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(successo)</span>
</div>

Controle dimensionados

Defina alturas usando classes como .input-lg, e defina larguras usando classes de grade de colunas como .col-lg-*.

Dimensionados de altura

Crie controles de formulário mais altos ou mais curtos que dimensionem os tamanhos de botão.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Entrada padrão">
<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>

Tamanhos de grupo de formulário horizontal

Rápidos tamanhos de etiquetas e controles de formulário dentro de .form-horizontal adicionando .form-group-lg ou .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Etiqueta grande</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Entrada grande">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Etiqueta pequena</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Entrada pequena">
    </div>
  </div>
</form>

Dimensionando colunas

Envolva entradas de colunas de grade, ou qualquer elemento pai personalizados, para facilmente impor larguras pretendidas.

<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>

Tags de botão

Use as classes de botão nos elementos<a>, <button>, ou <input>

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Uso de contexto específico

Enquanto as classes de botão podem ser usadas em elementos <a> e <button>, apenas o elemento <button> é supportado dentro de nossos componentes nav e navbar.

Links atuando como botão

Se o elemento <a> for usado como botão – acionando funcionalidades em página, em vez de navegar para outro documento ou seção dentro da página atual – ele deverá ter a propriedade role="button".

Renderização Cross-browser

Como um a boa prática, nós altamente recomendamos usar o elemento <button> sempre que possível para assegurar a renderização correspondente no cross-browser.

Entre outras coisas, há um bug no Firefox <30 que nos impede de definir line-height do <input>- botões baseados, fazendo com que não correspondam exatamente à altura de outros botões no Firefox.

Opções

Use qualquer uma das classes disponíveis para criar rapidamente um estilo de botão.

<!-- Botão padrão -->
<button type="button" class="btn btn-default">Default</button>

<!-- Fornece peso visual extra e identifica a ação primária em um conjunto de botões -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indica uma ação bem-sucedida ou positiva -->
<button type="button" class="btn btn-success">Success</button>

<!-- Botão contextual para mensagens de alerta informativos -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indica que o cuidado deve ser tomado com esta ação -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indica uma ação perigosa ou potencialmente negativa -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Enfatiza um botão fazendo com que pareça um link enquanto mantém comportamento de botão. -->
<button type="button" class="btn btn-link">Link</button>

Transmitindo significado às tecnologias assistivas

Usando cores para adicionar significado para um botão só fornece uma indicação visual, que não será transmitida para os utilizadores de tecnologia assistiva – tais como leitores de tela. Garanta que as informações indicadas pela cor sejam óbvias a partir do conteúdo em si (o texto visível do botão), ou que esteja incluída através de meios alternativos, tais como texto adicional escondido com a classe .sr-only.

Tamanhos

Gosta de botões grandes ou pequenos? Adicione .btn-lg, .btn-sm, ou .btn-xs para tamanhos adicionais.

<p>
  <button type="button" class="btn btn-primary btn-lg">Botão grande </button>
  <button type="button" class="btn btn-default btn-lg">Botão grande</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Botão padrão</button>
  <button type="button" class="btn btn-default">Botão padrão</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Botão pequeno</button>
  <button type="button" class="btn btn-default btn-sm">Botão pequeno</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Botão extra pequeno</button>
  <button type="button" class="btn btn-default btn-xs">Botão extra pequeno</button>
</p>

Crie botões de nível de bloco — aquelas que abrangem toda a largura de um pai — adicionando .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Botão de nível de bloco</button>
<button type="button" class="btn btn-default btn-lg btn-block">Botão de nível de bloco</button>

Estado ativo

Botões aparecerão precionados (com background escuro, borda escura, e sombra inserida) quando ativos. Para o elemento <button>, isso é feito através de :active. Para o elemento <a>, isso é feito com .active. No entanto, você pode usar .active no <button>s (e incluir o atributo aria-pressed="true") você deve precisar replicar o estado ativo programaticamente.

Elemento de botão

Não precisa adicionar :activecomo sendo uma pseudo-classe, mas se você precisar forçar a mesma aparência, vá em frente e adicione .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Elemento âncora

Adicione a classe .active para botões em <a>.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Estado desativado

Faça botões parecerem inclicáveis pela opacidade de fundo com opacity.

Elemento de botão

Adicione o atributo disabled para botões <button>.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Compatibilidade Cross-browser

Se você adicionar o atributo disabled para o <button>, do Internet Explorer 9 pra baixo irá renderizar o texto cinza com uma desagradável text-shadow que não podemos corrigir.

Elemento âncora

Adicione a classe .disabled para botões em <a>.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Nóes usamos .disabled aqui como uma classe utilitária, semelhante a classe .active comum, então nenhum prefixo é requerido.

Link de funcionalidade de aviso

Essa classe usa pointer-events: none para tentar desativar a funcionalidade de link do <a>, porém essa propriedade CSS não é padronizada e não é totalmente suportada no Opera 18 pra baixo, ou no Internet Explorer 11. Além disso, mesmo em navegadores que suportam pointer-events: none, a navegação pelo teclado permanece inalterada, o que significa que usuários que enxergam por teclado e usuários de tecnologias assistivas ainda serão capazes de ativar esses links. Por segurança, use JavaScript para desabilitar esses links.

Imagens responsivas

Imagens no Bootstrap 3 podem ser feitas responsivas amigavelmente através da adição da classe .img-responsive. Isso aplica max-width: 100%;, height: auto; e display: block; na imagem para que dimensione de forma agradável ao elemento pai.

Centralize as imagens que usam a classe .img-responsive, usando .center-block em vez de .text-center. Veja a seção de classes de ajuda para mais detalhes sobre o uso do .center-block.

Imagens SVG e IE 8-10

No Internet Explorer 8-10, imagens SVG com .img-responsive são dimensionados desproporcionalmente. Para consertar isso, adicione width: 100% \9; onde necessário. Bootstrap não aplica isso automaticamente por causar complicaçõespara outros formatos de imagem.

<img src="..." class="img-responsive" alt="Imagem responsiva">

Formas

Adicione classes a um elemento <img> para estilizar imagens facilmente em qualquer projeto.

Compatibilidade cross-browser

Tenha em mente que o Internet Explorer 8 não tem suporte para cantos arredondados.

Uma imagem genérica de espaço quadrado com bordas arredondadas

Uma imagem genérica de espaço quadrado onde apenas a parte de dentro do círculo circunscrito sobre o quadrado é visivel

Uma imagem genérica de espaço quadrado com uma borda branca ao redor dela, tornando-se semelhante a uma fotografia tirada com uma câmera antiga de fotos instantâneas

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Cores contextuais

Transmita significado através de cores com um punhado de classes de utilidade de ênfase. Elas podem também ser aplicadas em links e escurecerão ao passar o mouse, tal como os nossos estilos de link padrão.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Lidando com especificidade

Algumas classes de ênfase não podem ser aplicadas evido à especificidade de um outro seletor. Na maioria dos casos, uma solução alternativa é envolver seu texto em um <span> com a classe.

Transmitir significado à tecnologias assistivas

Usando cor para adicionar significado apenas provê uma identificação visual, que não serão transmitidas para os usuários de technologia assistiva – tais como leitores de tela. Assegure que informações indicadas por cores sejam óbvias em seu conteúdo (as cores contextuais são apenas usadas para reforçar significados que estejam realmente presente em seu texto/marcação), ou estejam incluso por outros meios alternativos, tais como texto adicional escondido com a classe .sr-only.

Fundo contextual

Similar as classes de cores de texto contextual, Defini-se facilmente o fundo de um elemento a qualquer classe contextual. Componentes de âncora irão escurecer ao passar o mouse, assim como as classes de texto.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Lidando com especificidade

Às vezes classes de fundo contextual não podem ser aplicadas devido à especificidade de outro seletor. Em alguns casos, uma alternativa é envolver seus elementos de conteúdo em uma <div> com a classe.

Transmitir significado às tecnologias assistivas

Tal como acontece com cores contextuais, assegure que qualquer significado transmitido através de cor seja também transmitido em um formato que não seja puramente apresentavel.

Ícone fechado

Use o ícone fechado genérico para destruir conteúdos como modais e alertas.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets (circunflexo)

Use carets para indicar funcionalidade dropdown and direção. Note que o padrão de caret será automaticamente invertido nos menus dropup.

<span class="caret"></span>

Floats rápidos

Flutuae um elemento para a esquerda ou para a direita com uma classe. !important é incluído para evitar problemas de especificidade. Classes também podem ser usadas como mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Blocos de conteúdo centralizado

Defina um elemento para display: block e centralize através de margin. Disponível como um mixin e classe.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Facilmente limpo com floats por adicionamento de .clearfix para o elemento pai. Utilize o micro clearfix como popularizado por Nicolas Gallagher. Pode também ser usado como um mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Mostrando e escondendo conteúdo

Forçar um elemento a ser mostrado ou escondido (incluindo para leitores de tela) com o uso das classes .show e .hidden. Essas classes usam !important para evitar conflitos especfícos, assim como os floats rápidos. Eles estão apenas disponíveis para blocos de nível aleatórios. Eles podem também ser usados como mixins.

.hide está disponível, mas ele não afeta sempre os leitores de tela e está obsoleto no v3.0.1. Use .hidden ou .sr-only em vez disso.

Além disso, .invisible pode ser usado para ativar somente a visibilidade de um elemento, ou seja display e modificado e o elemento poderá afetar o fluxo do documento.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Leitores de tela e navigação por teclado

Oculte um elemento para todos os dispositivos exceto leitores de tela com .sr-only. Combine .sr-only com .sr-only-focusable para mostrar o elemento novamente quando estiver focado (ex.: por um usuário utilizador de apenas teclado). Necessário para seguir as boas práticas de acessibilidade. Pode também ser usado mixins.

<a class="sr-only sr-only-focusable" href="#content">Pular para conteúdo principal</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

substituição de imagem

Utilize a classe .text-hide ou mixin para um elemento de conteúdo em texto com uma imagem de fundo.

<h1 class="text-hide">Cabeçalho personalizado</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Para desenvolvimento rápido e amigavelmente movél, use essas classes deu tilidades para mostrar e esconder conteúdo em dispositivos por meio de media query. Também estão incluídas classes de utilidades para alternar conteúdo quando impresso.

Tente utilizá-los em uma base limitada e evite criar versões completamente diferentes do mesmo site. Em vez disso, use-os para complementar apresentação de cada dispositivos.

Classes disponíveis

Use uma única ou combinações de classes disponíveis para alternar conteúdo através de viewport breakpoints.

	Dispositivos extra pequenos Telefones (<768px)	Dispositivos pequenos Tablets (≥768px)	Dispositivos médios Desktops (≥992px)	Dispositivos grandes Desktops (≥1200px)
`.visible-xs-*`	Visível	Oculto	Oculto	Oculto
`.visible-sm-*`	Oculto	Visível	Oculto	Oculto
`.visible-md-*`	Oculto	Oculto	Visível	Oculto
`.visible-lg-*`	Oculto	Oculto	Oculto	Visível
`.hidden-xs`	Oculto	Visível	Visível	Visível
`.hidden-sm`	Visível	Oculto	Visível	Visível
`.hidden-md`	Visível	Visível	Oculto	Visível
`.hidden-lg`	Visível	Visible	Visible	Oculto

A partir da versão v3.2.0, a classe .visible-*-* para cada breakpoint vêm em três variáveis, uma para cada valor propriedade CSS display listada abaixo.

Grupo de classes	CSS `display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Então, para telas extra pequenas (xs) (extra small) por exemplo, as classes disponíveis .visible-*-* são: .visible-xs-block, .visible-xs-inline, e .visible-xs-inline-block.

As classes .visible-xs, .visible-sm, .visible-md, e .visible-lg ainda existem, mas estão obsoleto a partir de v3.2.0. Eles são aproximadamente equivalente para .visible-*-block, exceto com casos especiais adicionais para alternar <table> - elementos relacionados.

Classes de impressão

Semelhante as classes regulares responsivas, use-as para alternar conteúdo para impressão.

Classes	Navegador	Impressão
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Oculto	Visível
`.hidden-print`	Visível	Oculto

A classe .visible-print também existe mas está obsoleta a partir do v3.2.0. Ela é approximadamente equivalente a .visible-print-block, exceto em especial adicional adicional para <table>- elementos relacionados.

Casos de teste

Redimensione seus navegadores ou carregue em dispositivos diferentes para testar as classes de utilidade responsivas.

Visível em...

Marcas de verificação em verde indicam que o elemento é visível em sua janela atual.

Extra pequeno ✔ Visível em extra pequeno

Pequeno ✔ Visível em pequeno

Médio ✔ Visível em médio

Grande ✔ Visível em grande

Extra pequeno e pequeno ✔ Visível em estra pequeno e pequeno

Meédio e grande ✔ Visível em médio e grande

Extra pequeno e médio ✔ Visível em estra pequeno e médio

Pequeno e grande ✔ Visível em pequeno e grande

Extra pequeno e grande ✔ Visível em extra pequeno e grande

Pequeno e médio ✔ Visível em pequeno e médio

Oculto em...

Aqui, marcas de verificação em verde também indica que o elemento é oculto em sua tela atual.

Extra pequeno ✔ Oculto em extra pequeno

Pequeno ✔ Oculto em pequeno

Médio ✔ Oculto em médio

Grande ✔ Oculto em grande

Extra pequeno e pequeno ✔ Oculto em extra pequeno e pequeno

Médio e grande ✔ Oculto em médio e grande

Extra pequeno e médio ✔ Oculto em extra pequeno e médio

Pequeno e grande ✔ Oculto em pequeno e grande

Extra pequeno e grande ✔ Oculto em extra pequeno e grande

Pequeno e médio ✔ Oculto em pequeno e médio

O CSS do Bootstrap é construído em Less, um pré-processador com funcionalidades adicionais para trabalhar com variáveis, mixins, e funções para compilação CSS. Aqueles que procuram usar em arquivos com código-fonte Less ao invés de nossos arquivos CSS compilados podem fazer uso de dezenas de variáveis e mixins que usamos por todo o framework.

Variáveis de grid e mixins são cobertos dentro da seção de sistemas de Grid.

Compilando Bootstrap

Bootstrap pode ser utilizado de pelo menos duas maneiras: com o CSS compilado ou com os arquivos fontes Less. Para compilar os arquivos Less, consulte a seção de ponto de partida para como configurar seu ambiente de desenvolvimento para rodar os comandos necessários.

Ferramentas de compilação de terceiros podem trabalhar com Bootstrap, mas eles não são apiadas por nossa equipe principal.

Variáveis

Variáveis são usadas ao longo de todo o projeto como um caminho para centralizar e compartilhar valores comumente usados como cores, espaçamentos, ou montante de fontes. Para uma discriminação completa, por favor veja o personalizador.

Cores

Facilmente faça uso de dois esquemas de cores: escala de cinza e semântica. Cores de tons de cinza fornecem facilmente acesso para usar normalmente tons de preto enquanto inclui variáveis semanticas de cores atribuído significativamente valores contextuais.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Use qualquer uma dessas variáveis de cor como elas são ou reatribua elas para mais variáveis significativas para seu projeto.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding (andaime)

Um punhado de variáveis para custumização rápida de elementos chaves para a estrutura do seu site.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Links

Estilize facilmente seus links com a cor certa com um único valor.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Note que o @link-hover-color usa uma função, outra ferramenta incrível de Less, Para automaticamente criar a cor de hover certa. Você pode usar darken, lighten, saturate, e desaturate.

Tipografia

Defina facilmente seus tipo de fontes, tamanho da letra, leading, e muito mais com algumas variáveis rapidamente. Bootstrap faz uso destes bem para fornecer mixins tipográficos fáceis.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Ícones

Duas variáveis rápidas para personalização localização e nomes de arquivos de seus ícones.

@icon-font-path:          "/docs/3.3/fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Componentes

Em todos os componentes do Bootstrap fazem uso de algumas variáveis padrões para definição de valores comuns. Eles são os mais comumente usados.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Fornecedores de mixins

Vendor de mixins são mixins para suporte de ajuda de vários navegadores por incluirem todos os prefixos vendor relevantes em seu CSS compilado.

Dimensionamento de caixa

Redefina seus componentes de box model com um simples mixin. Para contexto, veja isso artigo útil da Mozilla.

O mixin está obsoleto desde a v3.2.0, com a introdução de of Autoprefixer. ToPara preservar a compatibilidade com versões anteriores, Bootstrap vai continuar a usar o mixin internamente até Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Cantos arredondados

Hoje todos os navegadores modernos suportam a propriedade non-prefixed border-radius. Como tal, não há mixin .border-radius(), mas o Bootstrap incluiu atalhos para arredondar rapidamente dois cantos em um determinado lado de um objeto.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) shadows

Se o seu público-alvo está usando os mais recentes e melhores navegadores e dispositivos, esteja certo de usar apenas a propriedade box-shadow por conta própria. Se você precisa de suporte para Android antigo (pre-v4) e dispositivos iOS (pre-iOS 5), use o mixinobsoleto para pegar o prefixo -webkit necessário.

O mixin está obsoleto a partir do v3.1.0, já que Bootstrap não suporta oficialmente as platafomas desatualizadas que não suportam a propriedade padrão. Para preservar a compatibilidade com versões anteriores, Bootstrap continuará a usar o mixin internamente até o Bootstrap v4.

Certifique-se de usar cores rgba() em seus box shadows assim eles combinarão suavemente o quanto possível com o fundo.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transições

Vários mixins para flexibilidade. Defina todas as informações de transição com um, ou especifique um delay separado e duração quanto necessário.

Os mixins estão obsoletos a partir de v3.2.0, com a introdução do Autoprefixer. Para preservar compatibilidade com versões anteriores, Bootstrap continuará a usar os mixins internamente até o Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Transformações

Gire, escale, converta (movimento), ou distoça algum objeto.

Os mixins estão obsoletos a partir de v3.2.0, com a introdução de Autoprefixer. Para preservar compatibilidade com versões anteriores, Bootstrap continuará a usar os mixins internamente até o Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animações

Um único mixin usado em todas as prorpiedades de animação do CSS3 em uma declaração e outros mixins para propriedades.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacidade

Defina a opacidade para todos os navegadores e forneça um filter alternativo para o IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Texto de placeholder

Forneça contexto para controles de fomulário dentro de cada campo.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Colunas

Gere colunas por meio de CSS dentro de um único elemento.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradientes

Transforme facilmente duas cores qualquer dentro de um background gradiente. Obtenha mais avançadas e defina uma direção, use três cores, ou use um gradiente radial. Com um único mixin você obtém todas as sintaxes prefixadas que precisará.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Você pode também especificar os angulos de um padrão duas cores, gradiente linear:

#gradient > .directional(#333; #000; 45deg);

Se você precisar de um estilo barber-stripe gradiente, isso é facil, também. Apenas especifique uma única cor e iremos sobrepor um a listra branca translúcida.

#gradient > .striped(#333; 45deg);

Aumente o custo e use três cores em vez disso. Defina a primeira cor, a segunda cor, a escala de cor da segunda cor (uma valor percentual como 25%), e a terceira cor com esses mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Atenção! Você deve sempre precisar remover um gradiente, certifique-se de remover algum filter IE-specific você pode ter adicionado. Você pode fazer isso usando o mixin .reset-filter() junto de background-image: none;.

Mixins utilitários

Mixins utilitários são mixins que combinam caso contrário não relacionaria propriedades CSS para alcançar um objetivo ou tarefa especifica.

Clearfix

Esqueça de adicionar class="clearfix" para qualquer elemento e em vez disso adicione o mixin .clearfix() onde apropriado. Use o micro clearfix de Nicolas Gallagher.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Centralização horizontal

Centralize rapidamente qualquer elemento dentro de seu pai. Requer width ou max-width definido.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Dimensionando helpers

Especifique as dimensões de um objeto mais facilmente.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Redimensionar áreas de texto

Configure facilmente as opções de redimensionamento para qualquer textarea, ou qualquer outro elemento. Predefina o comportamento normal do navegador (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Texto truncando

Truncar facilmente textos com uma elipse num único mixin. Requer elemento tenha nível block ou inline-block.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina images

Especifique dois caminhos de imagem e as dimensão de imagem de @1x, e Bootstrap fornecerá uma media query @2x. Se você tiver muitas imagens para atender, considere escrever sua imagem de retina CSS manualmente numa única media query.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Enquanto Bootstrap é contrído em Less, Ele também teve uma abertura oficial Sass. Nós mantemos eles em um repositório GitHub separado e fazemos atualizações updates com um script de conversão.

O que está incluído

Desde a abertura do Sass temos um repositório separado e servimos um público um pouco diferente, os conteúdos de projeto diferem grandemente do projeto principal do Bootstrap. Isso assegura a abertura do Sass ser tão compativel com tantos sistemas baseados em Sass quanto possível.

Caminho	Descrição
`lib/`	Ruby gem code (configuração Sass, Rails e integração Compass)
`tasks/`	Converter scripts (transformar Less para Sass)
`test/`	testes de compilação
`templates/`	Compass package manifest
`vendor/assets/`	Sass, JavaScript, e arquivos de fontes
`Rakefile`	tarefas internas, tais como rake e converções

Visite o repositório de entrada Sass no GitHub para ver esses arquivos em ação.

Instalação

Para informação de como instalar e usar Bootstrap em Sass, consulte o readme no repositório do GitHub. Esta é a fonte mais atualizada e inclui informação para uso com Rails, Compass, e projetos de Sass padrão.

Bootstrap em Sass

CSS

Visão geral

HTML5 doctype

Mobile primeiro

Tipografia e links

Normalize.css

Containers

Sistema de grid

Introdução

Media queries

Opções de grid

Exemplo: Empilhamento horizontal

Exemplo: Container fluido

Exemplo: Celular e desktop

Exemplo: Celular, tablet, desktop

Exemplo: Envolvendo coluna

Redefinições de colunas responsivas

Colunas Offsetting

Aninhamento de colunas

Ordenação de coluna

Mixins less e variáveis

Variáveis

Mixins

Exemplo de uso

Tipografia

Cabeçalhos

h1. Cabeçalho Bootstrap

h2. Cabeçalho Bootstrap

h3. Cabeçalho Bootstrap

h4. Cabeçalho Bootstrap

h5. Cabeçalho Bootstrap

h6. Cabeçalho Bootstrap

h1. Cabeçalho Bootstrap Texto secundário

h2. Cabeçalho Bootstrap Texto secundário

h3. Cabeçalho Bootstrap Texto secundário

h4. Cabeçalho Bootstrap Texto secundário

h5. Cabeçalho Bootstrap Texto secundário

h6. Cabeçalho Bootstrap Texto secundário

Exemplo de corpo (body)

Exemplo de corpo destacado (Lead body)

Contrução com Less

Elementos do texto em linha

Texto marcado

Texto deletado

Texto tachado

Texto inserido

Texto sublinhado

Texto pequeno

Negrito

Itálico

Elementos alternativos

Classes de alinhamento

Classes de transformação

Abreviações

Abreviação básica

Iniciais

Endereços

Blockquotes (bloco de citações)

Blockquote padrão

Opções de blockquote

Nomeando uma fonte

Exibição alternativa

Listas

Não-ordenada

Ordenada

Não estilizado

Em linha

Descrição

Descrição horizontal

Auto-truncado

Código

Em linha

Entrada de usuário

Bloco básico

Variáveis

Exemplo de saída

Tables

Exemplo basico

Striped rows (Linhas listradas)

Compatibilidade Cross-browser

Demonstração de estado `:focus`

Aviso sobre funcionalidade de link `<a>`

Ícones opcionais com etiquetas ocultas `.sr-only`