Lei No 4.320-1964

Introdução
Descubra o Bootstrap, o framework mais conhecido do mundo para criar sites responsivos e mobile, comece
com o BootstrapCDN e nosso template inicial.
The new generation of project management tools is here and it’s visual.ads via Carbon
Visão rápida
Tentando adicionar rapidamente o Bootstrap ao seu projeto? Use o BootstrapCDN, fornecido gratuitamente
pelo pessoal da MaxCDN. Usando um gerenciador de pacotes ou precisa do código fonte? Vá para a página
de downloads.
CSS
Copie e cole o arquivo de estilo <link> dentro da sua <head> antes de todos os outros arquivos de estilo
para carregar nosso CSS.
Copy
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
JS
Muitos dos nossos componentes precisam de JavaScript para funcionar. Mais especificamente, eles precisam
do jQuery, Popper.js e do nossos próprios plugins JavaScript. Coloque os seguintes <script>s perto do final
da sua página, logo antes do fechamento da tag </body>. jQuery tem que vir antes, depois o Popper.js e só
depois nossos plugins JavaScript.
Nós usamos a build slim do jQuery, mas a versão completa também é suportada.
Copy
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Curiosidade para saber quais componentes precisam de jQuery, nosso JS e Popper.js? Clique em “Mostrar
componentes dependentes de JavaScript” logo abaixo. Se ainda tem dúvidas sobre a estrutura da página em
geral, continue lendo para um templete de exemplo de página.
Our bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery. For more
information about what’s included in Bootstrap, please see our contents section.
Mostrar componentes dependentes de JavaScript

Template inicial
Tenha certeza de configurar suas páginas com padrões recentes de desenvolvimento e design. Ou seja,
utilizando HTML5 doctype e a meta tag viewport para proporcionar o funcionamento responsivo adequado.
Feito isto, suas páginas devem ficar assim:
Copy
<!DOCTYPE html>
<html lang="pt-br">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Olá, mundo!</title>
</head>
<body>
<h1>Olá, mundo!</h1>



<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
</body>
</html>
No geral, são esses os requisitos para o funcionamento da página. Visite a Documentação de
Layout ou nossos exemplos oficiais para começar a incluir conteúdos e componentes em seu site.
Importância geral
O Bootstrap usa um punhado de estilos globais e configurações importantes que você precisará ficar atento,
quando tiver usando, os quais são guiados a normalização de estilos cross browsers. Vamos lá!
HTML5 doctype
Bootstrap exige o uso do doctype HTML5. Sem isso, você verá alguns estilos incompletos e esquisitos.
Copy
<!DOCTYPE html>
<html lang="pt-br">
...
</html>
Meta tag responsiva
Bootstrap tem uma abordagem mobile first, uma estratégia que optimizamos o código para dispositivos
móveis primeiro e, então, é que começamos a pensar em media queries para aparelhos maiores. Por isso,
para garantir renderização adequada e touch zooming em todos eletrônicos, use a tag responsiva
viewport no <head>.
Copy
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Você pode ver um exemplo disso em ação, neste template iniciante.
Box-sizing
Para um redimensionamento mais intuitivo no CSS, nós trocamos o valor do box-sizingglobal de content-
box para border-box. Dessa maneira, garantimos que o padding não afetará a largura computada final de um
elemento, apesar de isto poder causar problemas em alguns softwares de terceiros, como Google Maps e
Google Search Engine.
Na rara ocasião de precisar sobrecrever isso, use algo como o seguinte:
Copy
.seletor-para-algum-widget {
box-sizing: content-box;
}
Com o snippet acima, elementos aninhados (incluindo conteúdo gerado via ::before e ::after) vão herdar
o box-sizing especificado no seletor-para-algum-widget.
Aprenda mais sobre o box model e dimensionamento, no CSS Tricks.
Reboot
Para uma renderização cross-browser melhorada, nós usamos o Reboot para corrigir inconsistências através
dos browsers, enquanto provemos resets um pouquinho customizados para elementos HTML comuns.
Comunidade
Fique atualizado no desenvolvimento do Bootstrap e encontre nossa comunidade através destas fontes
úteis:
• Siga @getbootstrap no Twitter;

• Leia e se inscreva no Blog Bootstrap Oficial;
• Participe da nossa sala oficial no Slack;
• Converse com os Bootstrappers via IRC, através do servidor irc.freenode.net, no canal ##bootstrap;
• Ajuda com implementação pode ser encontrada no Stack Overflow (tag bootstrap-4);
• Desenvolvedores devem usar a palavra-chave bootstrap em pacotes que modificarem ou adicionarem
funcionalidades do Bootstrap, quando distribuindo via npm ou sistemas de entrega semelhantes, para
máxima visibilidade.
Você também pode seguir o @getbootstrap no Twitter, para as melhores fofocas e vídeo clipes. =)
Download
Baixe o Bootstrap e obtenha o CSS e JavaScript compilado, além do código fonte. Também, você pode
incluir o framework no seu gerenciador de pacotes predileto como npm, RubyGems, etc.
All the tools your team needs in one place. Slack: Where work happens.ads via Carbon
CSS e JS compilado
Baixe o código compilado e pronto para uso do Bootstrap v4.1.3 para, facilmente, começar seu projeto. O
download inclui:
• Pacotes de CSS minificados e compilados (veja a comparação de arquivos CSS);

• Plugins JavaScripts compilados e minificados.
Este download não inclui documentação, códigos fontes ou qualquer dependências JavaScripts (jQuery ou
Popper.js).
Baixar
Arquivos fontes
Compile o Bootstrap com suas próprias ferramentas, baixando nosso Sass, JavaScript e arquivos da
documentação. Esta opção requer algumas ferramentas adicionais:
• Compilador Sass (Libsass ou Ruby Sass) para compilar seu CSS;

• Autoprefixer para usar prefixos CSS.
Ferramentas de build são usadas para desenvolver o Bootstrap e sua documentação, mas pode ser que
sejam desncessárias para você.
Baixar fonte
BootstrapCDN
Evite o download, usando a BootstrapCDN para ter uma versão em cache dos CSS e JS compilados, em seu
porjeto.
Copy
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-
ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Se você está usando nosso JavaScript compilado, não esqueça de incluir as versões em CDN do jQuery e
Popper.js, antes dele.
Copy
Gerenciador de pacotes
Use o código fonte Bootstrap em qualquer projeto, com ajuda dos mais populares gerenciadores de
pacotes. Não importa o gerenciador de pacotes, o Bootstrap vai precisar de um compilador Sass e
do Autoprefixer, para se ter uma configuração compatível com nossa versão compilada oficial.
npm
Instale o Bootstrap em seus apps Node.js com o pacote npm:
Copy
npm install bootstrap
require('bootstrap') vai carregar todos os plugins jQuery no objeto jQuery. O próprio
módulo bootstrap não exporta nada. Você pode, manualmente, carregar os plugins jQuery Bootstrap
individualmente, carregando os arquivos /js/*.js dentro do diretório principal dos pacotes.
O package.json possui alguns metadados, nas seguintes chaves:
• sass - caminho para o principal arquivo Sass Bootstrap;

• style - caminho para o CSS não minificado Bootstrap, o qual foi pré-compilado usando
configurações padrões (sem customização).
RubyGems
Instale o Bootstrap em seus apps Ruby, usando o Bundler (recomendado) e RubyGems, adicionando a
seguinte linha ao seu Gemfile:
Copy
gem 'bootstrap', '~> 4.1.3'
Alternativamente, se você não está usando o Bundler, pode instalar a gem executando este comando:
Copy
gem install bootstrap -v 4.1.3
Veja o README da gem, para mais detalhes.
Composer
Você também pode instalar e gerenciar o Sass e JavaScript do Bootstrap, usando o Composer:
Copy
composer require twbs/bootstrap:4.1.3
NuGet
Se você desenvolve em .NET, também pode instalar e gerenciar CSS, Sass e Javascript, usando NuGet:
Copy
Install-Package bootstrap
Copy
Install-Package bootstrap.sass
Conteúdos
Descubra oquê têm no Bootstrap, incluindo nosso código fonte e compilado. Lembrando-se, também, que
os plugins JavaScript precisam de jQuery.
Bootstrap compilado
Uma vez baixado, descompacte a pasta comprimida e verá algo como isso:
Copy
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
Basicamente, isto é o Bootstrap: arquivos compilados, para uso rápido em qualquer projeto web. Nós
provemos CSS e JS compilados (bootstrap.*), assim como CSS e JS compilados e minificados
(bootstrap.min*). Source maps CSS (bootstrap.*.map) estão disponíveis para uso em certas ferramentas de
desenvolvedores dos browsers. Arquivos JS bundle (bootstrap.bundle.js e a versão
minificada bootstrap.bundle.min.js) usam Popper, mas não jQuery.
Arquivos CSS
Bootstrap te da um punhado de opções para usar alguns ou todos os nossos CSSs compilados.
Arquivos CSS Layout Conteúdo Componentes Utilitários
bootstrap.css Incluído Incluído Incluído Incluído

bootstrap.min.css
bootstrap-grid.css Apenas o sistema de grid Não incluído Não incluído Apenas utilitários f
Arquivos CSS Layout Conteúdo Componentes Utilitários
bootstrap-grid.min.css
bootstrap-reboot.css Não incluído Apenas o Reboot Não incluído Não incluído

bootstrap-reboot.min.css
Arquivos JS
Similarmente, nós temos opções para uso de alguns ou todos os nosso scripts compilados.
Arquivos JS Popper jQuery
bootstrap.bundle.js Incluído Não incluído

bootstrap.bundle.min.js
bootstrap.js Não incluído Não incluído

bootstrap.min.js
Código fonte Bootstrap

O código fonte Bootstrap inclui assets CSS e JS pré-compilados, junto com a fonte Sass, JavaScript e
documentação. Mais especificamente, ele possui o seguinte e mais:
Copy
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── docs/
│ └── examples/
├── js/
└── scss/
Os diretórios scss/ e js/ são os códigos fontes do nosso CSS e JavaScript. A pasta dist/inclui tudo listado
no download precompilado, que vimos na seção acima. O docs/ possui o código fonte da documentação e
no examples/ temos a código para exemplos de uso do Bootstrap. Além disso, qualquer outro arquivo tem
papel de dar suporte à pacotes, informações de licenças e desenvolvimento.
Browsers e dispositivos
Aprenda sobre os browsers e dispositivos (dos modernos até os antigos) que suportam o Bootstrap,
incluindo quirks e bugs conhecidos, em cada.
Start sending beautiful transactional email in minutes with Postmark.ads via Carbon
Suporte de browsers
Bootstrap é suportado pelas versões mais recentes e estáveis dos maiores navegadores e plataformas. No
Windows, somos suportados pelo Internet Explorer 10, 11 e Microsoft Edge.
Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko (tanto diretamente,
quanto através da API web view da plataforma) não suportam explicitamente o Bootstrap. Contudo, o
framework funciona normalmente (na maioria dos casos) nesses browsers. Informações mais específicas a
respeito estão abaixo.
Você pode consultar nosso leque de browsers com suporte e suas versões no nosso
arquivo browserslistrc.json:
Copy
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Nós usamos o Autoprefixer para obter o suporte esperado (usando prefixos CSS), o qual
usa Browserslist para gerenciar as versões destes navegadores.
Dispositivos móveis
No geral, Bootstrap é suportado pelas versões mais recentes das maiores plataformas padrões dos browsers.
No entanto, lembre-se que proxy browsers (como o Opera Mini, modo turbo do Opera Mobile, UC Browser
Mini, Amazon Silk) não são suportados.
Chrome Firefox Safari Android Browser & WebView Microsoft E
Android Suportado Suportado N/A Android v5.0+ Suportado Suportado
iOS Suportado Suportado Suportado N/A Suportado
Windows 10 Móvel N/A N/A N/A N/A Suportado

Browsers desktop
De forma parecida, as versões mais recentes da maioria dos navegadores desktops são suportadas.
Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Suportado Suportado N/A N/A Suportado Suportado
Windows Suportado Suportado Suportado, IE10+ Suportado Suportado Not Suportado
No Firefox, em adição ao release mais recente e estável, nós também temos suporte da recente versão
“Extended Support Release (ESR)”.
Não oficialmente, Bootstrap vai se apresentar e comportar bem no Chromium, Chrome e Firefox para Linux,
além do Internet Explorer 9 (apesar de não termos suporte oficial).
Para consultar alguns bugs que o Bootstrap enfrenta, veja nosso Mural de bugs.
Internet Explorer
Do Internet Explorer 10 acima, nós temos suporte. No entanto, do IE9 para baixo, não temos. Portanto,
esteja atento que algumas propriedades CSS3 e elementos HTML5 não são, totalmente, suportadas no IE10
ou requerem prefixos para compatilidade. Visite o site Can I use… para detalhes sobre suporte CSS3 em
browsers e recursos HTML5.
Se você precisa de suporte no IE8 ou 9, use o Bootstrap 3. É a versão mais estável do nosso código e
nosso time ainda dá suporte para reparar bugs críticos e alterar a documentação. Contudo, nem um recurso
novo será adicionado a ela.
Modais e dropdowns em dispositivos móveis

Overflow e rolagem
Suporte para overflow: hidden; no elemento <body> é um pouco limitado, no iOS e Android. Nesse sentido,
quando você rola perto da parte superior ou inferior do modal (em algum dos browsers destes dispositivos),
o conteúdo do <body> vai começar a rolar. Veja o bug do Chrome #175502 (reparado no Chrome v40) e
o bug Webkit #153852.
Campos de texto e rolagem no iOS
A partir do iOS 9.2, enquanto o modal está aberto, se o toque inicial do gesto de rolagem está dentro dos
limites de um <input> de texto ou <textarea>, o conteúdo do <body> abaixo do modal vai ser rolado, invés
do modal. Veja o bug Webkit #153856.
Dropdowns navbar
O elemento .dropdown-backdrop não é usando no iOS, por causa da complexidade do z-index. Portanto, para
fechar dropdowns em navbars, você deve clicar diretamente no elemento dropdown ou qualquer outro
elemento que vai acionar o evento de clique no iOS).
Zoom em browsers
Dar zoom em páginas irá mostrar, inevitavelmente, artefatos de renderização em alguns componentes, tanto
no Bootstrap quando no resto da web. Dependendo do problema, poderemos consertá-lo, bastando
pesquisar antes e depois abrir um issue (se necessário). Contudo, nós tendemos a ignorar estes problemas,
já que eles não possuem soluções diretas, aléms de hacks, normalmente.
Sticky :hover/:focus no iOS

Enquanto o :hover não é possível na maioria dos dispositivos de toque, o iOS emula este comportamento,
resultando em estilos que persistem depois de soltar um elemento. Estes estilos hover só são interrompidos
quando o usuário toca outro elemento. Este comportamento é considerado, largamente, indesejável e
aparenta não ser um problema nos dispositivos Android ou Windows.
Durante nossos realeases v4 alpha e beta, nós incluímos códigos incompletos e comentados para dar a
opção de usar uma media query que desativaria estilos hover em dispositivos de toque que emulam estes
estilos. Isto nunca foi finalizado ou ativado, mas para evitar quebra total, nós optamos em defazar isto e
manter os mixins como atalhos para as pseudo-classes.
Impressão
Mesmo em alguns browsers modernos, imprimir pode ser bem chatinho.
A partir do Safari v8.0, o uso da classe .container pode levar o Safari a usar pequenos tamanhos de fontes,
quando imprimindo. Veja o issue #14868 e WebKit bug #138192, para mais detalhes. Uma possível solução
alternativa é o seguinte CSS:
Copy
@media print {
.container {
width: auto;
}
}
Browser padrão do Android

O Android 4.1 e algumas versões mais recentes são lançadas com um app Browser padrão, que não é o
Chrome. Infelizmente, o app Browser tem muitos bugs e inconsistências com CSS.
Menu Select
Em elementos <select>, o app Browser não irá mostrar os controles laterais se houver border-
radius ou border aplicadas (veja esta questão no StackOverflow, para mais detalhes). Use o snippet abaixo
para remover o CSS problemático e renderizar o <select> como um elemento não estilizado, no app
Browser do Android. O sniffer do user agent evita interferência com o Chrome, Safari e navegadores Mozilla.
Copy
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 &&
nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Quer ver um exemplo? Veja esta demo no JS Bin.
Validação
Pensando em dar a melhor experiência para os antigos e bugados browsers, Bootstrap usa hacks CSS em
diversos locais para conseguir um CSS único em algumas versões de browsers e, consequentemente,
trabalhar em cima dos próprios bugs. Estes hacks, compreensivelmente, levam os validadores CSS a falarem
que o código está inválido. Em outros locais, nós também usamos recursos CSS inovadores que ainda não
foram padronizados. No entanto, eles são usados puramente para progressive enhancement.
Estes avisos de validação não significam nada na prática, já que a parte sem hacks valida normalmente e a
parte com hacks não interfere no funcionamente da parte sem hacks. Portanto, se ignorarmos estes avisos, a
parte com hacks é usada em progressive enhancement.
Nossa documentação HTML, da mesma forma tem alguns avisos de validação triviais e inconsequentes,
devido a inclusão de uma solução para um certo bug no Firefox.
JavaScript
Traga o Bootstrap a vida com nossos plugins opcionais, construídos com jQuery. Aprenda sobre cada plugin,
nossos dados e API programática, entre outras coisas.
Individualmente ou compilado
Plugins podem ser incluídos individualmente, usando os arquivos Bootstrap js/dist/*.jsindividuais.
Também é possível incluir todos de uma vez, usando bootstrap.js ou a versão minificada bootstrap.min.js.
(não inclua ambos juntos).
Se usar algum bundler (Webpack, Rollup…), você pode então use o leitor UMD em cada arquivo
em /js/dist/*.js.
Dependências
Alguns plugins e componentes CSS dependem de outros plugins. Se você incluir plugins individualmente,
tenha certeza de ler sobre estas dependências, na documentação. Também perceba que todos plugins
dependem do jQuery, significando que esta biblioteca deve ser adicionada antes dos arquivos dos
plugins. Consulte o package.json para ver quais versões do jQuery são suportadas.
Nossos dropdowns, popovers e tooltips também dependem do Popper.js.
Atributos data
Quase todos plugins Bootstrap podem ser ativados e configurados somente através do HTML, usando
atributos data (nosso jeito preferido de usar essa funcionalidade JavaScript). Assegure-se de usar apenas
um atributo data, por elemento. Exemplo: você não pode acionar um tooltip e um modal, usando o mesmo
botão.
No entanto, em algumas situações você pode querer desativar esta funcionalidade. Para desativar a API do
atributo data, você pode desvincular todos eventos no documento nomeados com data-api, fazendo algo
como isso:
Copy
$(document).off('.data-api')
Opcionalmente, para desvincular um plugin específico, basta usar o namespace do plugin seguido
do namespace data-api, como isso:
Copy
$(document).off('.alert.data-api')
Escapando seletores
Se você usa algum tipo de seletor especial (como collapse:Example), se garanta de escapá-lo porque ele vai
ser analisado pelo jQuery.
Eventos
Bootstrap provê eventos customizados para a maioria das ações dos plugins. Geralmente, eles aparecem no
infinitivo ou passado particípio, onde o infinitivo (show, por exemplo) é acionado no começo de um evento e
sua forma no passado particípio (shown) é acionada no final de uma ação.
Todos eventos no infinitivo possuem a funcionalidade preventDefault(). Assim, tem-se a habilidade de parar
a execução de uma ação, antes que ela começe. Retornar false em um evento também vai invocar o
método preventDefault(), automaticamente.
Copy
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // Evita que o modal apareça
})
API programática
Nós também acreditamos que você será capaz de usar todos plugins Bootstrap, somente usando a API
JavaScript. Todas APIs públicas são métodos encadeáveis e peculiares, além de retornarem a coleção que
analisaram.
Copy
$('.btn.danger').button('toggle').addClass('fat')
Todos métodos devem aceitar um objeto options opcional, uma string que olha por um método específico
ou nada (oquê inicia o comportamento padrão dos plugins):
Copy
$('#myModal').modal() // inicia com padrões
$('#myModal').modal({ keyboard: false }) // inicia sem teclado
$('#myModal').modal('show') // inicia e invoca show, imediatamente.
Cada plugin também expõe seu construtor na propriedade Constructor($.fn.popover.Constructor). Se você
quer de obter uma instância específica de um plugin, recupere-a de um elemento
($('[rel="popover"]').data('popover')), diretamente.
Funções e transições assíncronas
Todos métodos de API programáticas são assíncronos e retornam o invocador, uma vez que a transição é
iniciada (mas é antes que ela finalize).
Para executar uma ação quando a transição é finalizada, você pode “ouvir” o evento correspondente.
Copy
$('#myCollapse').on('shown.bs.collapse', function (e) {
// Ação a executar, uma vez que a área colapsável é expandida
})
Além disso, a invocação de método num componente em transição vai ser ignorada.
Copy
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#myCarousel').carousel('2') // Vai deslizar para o slide 2, antes que a transição do slide 1
finalize
})
$('#myCarousel').carousel('1') // Vai começar deslizando para o slide 1 e retornará o invocador
$('#myCarousel').carousel('2') // !! Vai ser ignorado, já que a transição para o slide 1 ainda não
finalizou !!
Configurações padrões
Você pode alterar as configurações padrões de um plugin, modificado o objeto Constructor.Default do

plugin:
Copy
$.fn.modal.Constructor.Default.keyboard = false // altera o default da opção `keyboard` do plugin modal
para `false`
Sem conflitos
Algumas vezes, pode ser necessário usar plugins Bootstrap com outros frameworks UI. nestas circunstâncias,
colisões de namespace podem ocorrer, ocasionalmente. Se isso acontecer, você pode invocar .noconflict no
plugin que você quiser reverter o valor.
Copy
var bootstrapButton = $.fn.button.noConflict() // retorna $.fn.button para o valor declarado
anteriormente
$.fn.bootstrapBtn = bootstrapButton // dá a funcionalidade Bootstrap ao $().bootstrapBtn
Número de versões
A versão de cada plugin Bootstrap feito com jQuery pode ser acessada usando a propriedade VERSION do
construtor do plugin. Por exemplo, usando o plugin tooltip:
Copy
$.fn.tooltip.Constructor.VERSION // => "4.1.3"
JavaScript desativado
Os plugins Bootstrap não possuem um fallback muito bom, quando o JavaScript está desativado. Se você se
importa com a experiência do usuário, neste caso, use <noscript> para explicar a situação, como reativar o
JavaScript e/ou adicionar seus próprios fallbacks.
Bibliotecas de terceiros
Bootstrap não suporta biblioteca de terceiros, oficialmente, como Prototype ou jQuery UI. Tirando
o .noConflict e eventos com namespace, pode acontecer problemas de compatibilidade que você precisará
consertar sozinho.
Util
Todos arquivos JavaScript Bootstrap dependem do util.js, fazendo com que seja necessário incluí-lo junto
aos outros arquivos JavaScript. Se você está usando o bootstrap.js minificado, não há necessidade de
incluir o util.js porque ele já está incluído no bootstrap.min.js.
O util.js possui funções utilitárias e ajuda básica para eventos transitionEnd, assim como um emulador de
transição CSS. Isso é usado pelos outros plugins para conferir suporte de transições CSS e capturar
transições suspensas.
Customização de temas Bootstrap
Utilize variáveis Sass do Bootstrap 4 para construir, fácilmente, temas e componentes customizados.
It's teamwork, but simpler, more pleasant and more productive.ads via Carbon
Introdução
No Bootstrap 3, tematizações foram amplamente feitas com sobrescrição de variáveis LESS, CSS
customizado e uma folha de estilos separada que nós incluíamos nos nossos arquivos dist. Com algum
esforço, qualquer um podia redesenhar o visual do Bootstrap 3, sem tocar em seus principais arquivos. Já o
Bootstrap 4 tem uma abordagem familiar, mas um pouco diferente.
Agora, tematizações são feitas com variáveis e mapas Sass, além de CSS customizado. Não existe mais, uma
folha de estilos tema dedicada.
Sass
Utilize nossos arquivos fonte Sass para aproveitar as variáveis, mapas, mixins e muito mais.
Estrutura de arquivos
Sempre que possível, evite modificar os arquivos principais do Bootstrap. No Sass, isso significa que
precisará criar sua própria folha de estilos e importar o Bootstrap, para que você possa modificar e extendê-
lo. Assumindo que você usa um gerenciador de pacotes como o npm, terá uma estrutura de arquivos
parecida com essa:
Copy
seu-projeto/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Se você baixou nossos arquivos fonte e não está usando um gerenciador de pacotes, vai querer fazer algo
semelhante a essa estrutura, manualmente, mantendo os arquivos fontes separados dos seus.
Copy
seu-projeto/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importando
No seu custom.scss, você vai importar os arquivos Sass Bootstrap. Nesse sentido, você terá duas opções:
incluir todo o Bootstrap ou apenas as partes que você precisa. Nós encorajamos que pegue somente aquilo
que necessite, mas fique atento que há alguns requisitos e dependências, nos componentes. Você também
vai precisar adicionar alguns JavaScripts para nossos plugins.
Copy
// Custom.scss
// Opção A: Importa todo o Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Copy
// Custom.scss
// Opção B: Importa partes do Bootstrap
Partes obrigatórias
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Partes opcionais
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
Com essa configuração, você pode começar a modificar quaisquer variáveis e mapas Sass, no
seu custom.scss. Você também pode começar a adicionar partes do Bootstrap, abaixo do comentário “//
Partes adicionais”, sempre que necessário. Nós sugerimos usar toda a pilha de importação do nosso
arquivo bootstrap.scss, como seu ponto inicial.
Variáveis padrão
Toda variável Sass no Bootstrap 4 possui uma flag !default, permitindo que você sobrescreva o valor da
variável padrão, no seu próprio Sass, sem modificar o código fonte Bootstrap. Copie, cole e modifique os
valores das variáveis, sempre que precisar. Sem falar que você também pode remover a flag !default de
variáveis. Se uma variável já recebeu um valor, então, ela não vai ter uma nova atribuição de valores padrões
Bootstrap.
Você vai achar uma lista completa das variáveis Bootstrap, no diretório scss/_variables.scss.
Sobrescrição de variáveis dentro do mesmo arquivo Sass pode acontecer antes ou depois das variáveis
padrões. Contudo, quando for fazer sobrescrições em arquivos Sass, suas sobrescrições devem vir antes de
você importar arquivos Sass do Bootstrap.
Aqui vai um exemplo que muda as propriedades background-color e color do <body>, quando for importar e
compilar Bootstrap via npm:
Copy
// Suas sobrescrições de variáveis
$body-bg: #000;
$body-color: #111;
//Bootstrap e suas variáveis padrões

@import "../node_modules/bootstrap/scss/bootstrap";
Faça isso o quanto quiser, para qualquer variável Bootstrap, incluindo a opção global abaixo.
Mapas e loops
Bootstrap 4 possui um punhado de mapas Sass, os quais são pares de chave-valor que facilitam gerar
famílias de CSS relacionados. Nós usamos mapas Sass para nossas cores, breakpoints grid e etc. Assim como
as variáveis Sass, todos os mapas Sass possuem a flag!default e podem ser sobrescritos e extendidos.
Alguns de nossos mapas Sass são fundidos em outros vazios, por padrão. Isto é feito para permitir uma fácil
expansão de um dado mapa Sass, apesar de, consequentemente, ser um pouco mais difícil remover ítens de
um mapa.
Alterando o mapa
Para modificar uma cor existente no nosso mapa $theme-colors, você pode adicionar o seguinte ao seu
arquivo Sass customizado:
Copy
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Adicionando ao mapa
para adicionar uma nova cor ao $theme-colors, adicione a nova chave e valor:
Copy
$theme-colors: (
"custom-color": #900
);
Removendo do mapa
Para remover cores do $theme-colors ou qualquer outro mapa, use map-remove. No entanto, certifique-se de
inserir isso entre as partes obrigatórias e opcionais:
Copy
// Partes obrigatórias
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Partes adicionais
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
Chaves obrigatórias
Bootstrap espera que existam algumas chaves específicas, já que usamos e extendemos elas para
construírmos o framework, nós mesmos. Por isso, assim que você for customizando os mapas, pode
encontrar erros em que uma chave específica está sendo usada.
Por exemplo, nós usamos as chaves primary, success e danger do mapa $theme-colors, para links, botões e
estados de formulários. Substituir os valores dessas chaves não deve apresentar problemas, mas removê-las
pode causar problemas na compilação Sass. Nesses casos, você precisará modificar o código Sass que faz
uso destes valores.
Funções
Bootstrap usa diversas funções Sass, mas só algumas delas são aplicáveis em tematização. Nós usamos três
funções para obter valores dos mapas de cores:
Copy
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {

@return map-get($theme-colors, $key);
}
@function gray($key: "100") {

@return map-get($grays, $key);
}
Isso permite que obtenha uma cor de um mapa Sass, da mesma maneira que você usava uma variável de
cor, na versão 3.
Copy
.elemento-personalizado {
color: gray("100");
background-color: theme-color("dark");
}
Nós também temos outra função para recuperar um nível de cor específico do mapa $theme-colors. Níveis
com valores negativos vão esclarecer a cor, enquanto níveis maiores vão escurecer.
Copy
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);

}
Na prática, você chamaria a função e passaria dois argumentos: o nome da cor do $theme-colors (ex:
primary e danger) e um valor numérico.
Copy
color: theme-color-level(primary, -10);
}
Outras funções podem ser adicionadas, futuramente, ou use seu próprio Sass para criar funções de nível
para outros mapas Sass.
Contraste de cor
Uma outra função que temos no Bootstrap é aquela para contraste de cores: color-yiq. Ela usa o YIQ color
space para, automaticamente, retornar um contraste de cores claras (#fff) ou escuras (#111), baseado na cor
especificada. Esta função é, especialmente, útil para mixins ou loops quando for gerar múltiplas classes.
Por exemplo, para gerar amostras de cores a partir do nosso mapa $theme-colors, use isso:
Copy
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Ela também pode ser usada para retornar o contraste de uma única cor:
Copy
color: color-yiq(#000); // retorna `color: #fff`
}
Você também pode especificar uma cor base, com nossas funções de mapa de cores:
Copy
color: color-yiq(theme-color("dark")); // retorna `color: #fff`
}
Opções do Sass
Personalize o Bootstrap 4 com nosso arquivo customizado de variáveis e, facilmente, alterne configurações
CSS globais com as novas variáveis Sass $enable-*. Sobrescreva o valor da variável e recompile com npm run
test, sempre que precisar.
Você pode achar e personalizar estas variáveis para opções globais, no arquivo
Bootstrap scss/_variables.scss.
Variável Valores Descrição
$spacer 1rem é o padrão, mas também pode-se Especifíca o valor padrão para gerar os utilitário de
utilizar valores maior que 0. espaçamento, programaticamente.
$enable-rounded true (padrão) ou false Ativa estilos border-radius pré-definidos, em vários

componentes.
$enable-shadows true ou false (padrão) Ativa estilos box-shadow pré-definidos, em vários

componentes.
$enable-gradients true ou false (padrão) Ativa gradientes pré-definidos via estilos background-i
em vários componentes.
$enable- true (padrão) ou false Ativa transições pré-definidas, em vários componente

transitions
$enable-hover- true ou false (padrão) Defasado

media-query
$enable-grid- true (padrão) ou false Ativa a geração de classes CSS para o grid
classes (ex: .container, .row, .col-md-1, etc).
$enable-caret true (padrão) ou false Ativa a setinha do .dropdown-toggle usando pseudo-

elementos.
$enable-print- true (padrão) ou false Ativa estilos para otimizar impressões.

styles
$enable- true (default) or false Enables background-image icons within textual inputs a
validation-icons some custom forms for validation states.
Cor
Muitos dos componentes e utilitários Bootstrap são construídos com uma série de cores definidas em mapas
Sass. Estes mapas podem ser iterados para, rapidamente, gerar vários blocos de regras.
Todas as cores
Todas as cores disponíveis no Bootstrap 4 também estão disponíveis nas variáveis e no mapa Sass, dentro
do arquivo scss/_variables.scss. Isso será expandido, nos próximos pequenos releases com tons adicionais,
como a escala de cores cinzas que já incluímos.
Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan
É assim que você pode usar isso, no seu Sass:
Copy
// Com variáveis
.alpha { color: $purple; }
// Usando o mapa Sass, com nossa função `color()`

.beta { color: color("purple"); }
Classes utilitárias de cores também estão disponíveis para definir o valor de color e background-color.
No futuro, vamos se concentrar em prover mapas e variáveis Sass para os tons de cada cor, assim como
fizemos com a escala de cinza abaixo.
Cores do tema
Usamos um subconjunto de todas as cores para criar uma paleta de cores menor e gerar um esquemas de
cores, também disponíveis em variáveis e mapas Sass, no arquivo Bootstrap scss/_variables.scss.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Tons de cinza
Um grande conjunto de variáveis e mapas Sass, no arquivo scss/_variables.scss, para tons de cinzas
consistentes nos seus projetos.
100
200
300
400
500
600
700
800
900
Dentro do arquivo scss/_variables.scss, você vai achar as variáveis e mapas de cores Bootstrap. Aqui está
um exemplo do mapa $colors:
Copy
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
Adicione, remova ou modifique valores dentro do mapa, para atualizar o uso deles em outros componentes.
Infelizmente, atualmente, nem todos componentes utiliza este mapa Sass. Futuras atualizações vão tentar
melhorar essa situação. No entanto, até lá, planeje o uso deste mapa e de variáveis de cores.
Componentes
Muitos componentes e utilitários Bootstrap são construídos com loops @each, os quais iteram sobre um
mapa Sass. Isso é, especialmente, útil para gerar variantes de um componente com nosso $theme-colors e
criando variantes responsivos para cada breakpoint. Assim que você personalizar estes mapas Sass e
recompilar, verá suas mudanças refletidas nestes loops, automaticamente.
Modificadores
Muitos dos componentes Bootstrap são construídos com uma abordagem de classe-modificadora. Isso
significa que o grosso da estilização está em uma classe base (ex: .btn), enquanto variações de estilos estão
em classes modificadoras, como .btn-danger. Estas classes modificadoras são feitas a partir do mapa $theme-
colors, para personalizar a quantidade e nomes delas.
Aqui está dois exemplos de como nós iteramos o mapa $theme-colors para gerar modificadores do
componente .alert e todos nossos utilitários de background .bg-*.
Copy
// Gera classes modificadoras de alertas
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-
level($color, 6));
}
}
// Gera utilitários de cores para `.bg-*`

@include bg-variant('.bg-#{$color}', $value);
}
Responsivo
Estes loops Sass não são limitados a mapas de cores. Você também pode gerar variações responsivas de
seus componentes e utilitários. Por exemplo, pegue nossos utilitários para alinhamento de texto, onde nós
misturamos um loop @each para o mapa Sass $grid-breakpoins, o qual possui integrações de media queries.
Copy
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }

.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
Se precisar alterar seu $grid-breakpoints, suas modificações serão aplicadas a todos os loops iterando neste
mapa.
Variáveis CSS
Bootstrap 4 inclui cerca de duas dúzias de propriedades CSS personalizadas (variáveis), em seu CSS
compilado. Elas provêm fácil acsso a valores comumente usados, como nossas cores de tema, breakpoints e
pilhas de fontes primárias (para quando estiver trabalhando no inspetor do browser, sandbox de código ou
uma prototipagem qualquer).
Variáveis disponíveis
Aqui estão as variáveis que incluímos (perceba que o :root é obrigatório). Elas estão localizadas no nosso
arquivo _root.scss.
Copy
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
}
Exemplos
Variáveis CSS oferecem uma flexibilidade similar as do Sass, mas sem precisar compilar antes de usar no
navegador. Por exemplo, com isso estamos resetando os estilos de fonte e links de nossa página, com
variáveis CSS:
Copy
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Variáveis de breakpoint
Apesar de, originalmente, termos incluídos breakpoints em nossas variáveis CSS (ex: --breakpoint-md), elas
não são suportadas dentro de media queries, mas ainda podem ser usadas dentro de bloco de regras, nas
media queries. Estas variáveis de breakpoint permanecem no CSS compilado, para retro-compatibilidade
(dado que podem ser utilizadas pelo JavaScript). Leia mais na especificação!
Aqui está um exemplo de oquê não é suportado:
Copy
@media (min-width: var(--breakpoint-sm)) {
...
}
E aqui está um exemplo de oquê é suportado:
Copy
@media (min-width: 768px) {
color: var(--primary);
}
}
Ferramentas de build
Aprenda a usar os scripts npm incluídos no Bootstrap para construir nossa documentação, compilar o
código fonte, realizar testes, entre outras coisas.
Setup de ferramentas
Bootstrap usa scripts NPM no seu sistema de build. Nosso package.json possui métodos convenientes ao
nosso framework, incluindo compilação de código, realização de testes e outras coisas.
Para usar nossa build e executar a documentação localmente, você vai precisar de uma cópia dos arquivos
fontes Bootstrap e do Node.js.
1. Baixe e instale o Node.js, o qual usamos para gerenciar nossas dependências;

2. Vá até o diretório raiz /bootstrap e execute o comando npm install, para instalar nossas
dependências locais listadas no package.json;
3. Primeiro, instale o Ruby. Depois, instale o Bundler com o comando gem install bundlere
execute bundle install. Assim, você vai instalar todas as dependências Ruby, como Jekyll e plugins.
o Usuários de Windows: leiam este guia para conseguir rodar o jekyll, tranquilamente.
Quando fizer isso, você será capaz de executar diversos comandos disponíveis em cli.
Usando scripts NPM

Nosso package.json possui os seguintes comandos e tarefas:
Comando Tarefa
npm run cria o diretório /dist, o qual tem arquivos compilados (usa Sass, Autoprefixer e UglifyJS.).
dist
npm test é a mesma coisa que npm run dist, com a diferença que ele excuta os testes localmente.
npm run Constrói e formata o CSS e JavaScript para documentos. Assim, depois você pode rodar a
docs
documentação localmente, usando npm run docs-serve
Execute npm run para ver todos os scripts npm.
Autoprefixer
Boostrap usa o Autoprefixer (incluído na build) para, automaticamente, adicionar prefixos de fabricantes em
algumas propriedades CSS. Deste modo, poupamos código e tempo porque nos ocupamos só em escrever
as partes chaves do nosso CSS uma vez, sem precisar de mixins para adicionar prefixos (como aqueles da
v3).
Nós mantemos uma lista de browsers suportados no Autoprefixer em um arquivo separado, em um

repositório do GitHub. Veja /package.json, para mais detalhes.
Documentação local
Rodar nossa documentação, localmente, requer o uso do Jekyll. Ele é um gerador flexível de sites estáticos, o
qual provê: includes básicos, arquivos em Markdown, templates, entre outras coisas. Para se familiarizar, faça
o seguinte:
1. Leia sobre o setup de ferramentas, acima, para instalar o Jekyll e outras dependências Ruby
com bundle-install;
2. Dentro do diretório raiz /bootstrap, execute npm run docs-serve na linha de comando;
3. Abra http://localhost:9001 no seu browser e voilà.
Aprenda mais sobre o uso do Jekyll, lendo sua documentação.
Solução de problemas
Se você encontrar problemas para instalar dependências, desinstale todas as versões anteriores das
dependências (global e localmente), então, re-execute npm install.
Webpack
Aprenda como integrar o Bootstrap ao seu projeto, usando Webpack 3.
Build the future of communications with Voice, Video, SMS, and WhatsApp APIs.ads via Carbon
Instalação do Bootstrap
Instale o Bootstrap como um módulo do Node.js, usando npm.
Inportação do JavaScript
Importe o JavaScript Bootstrap, adicionando esta linha ao entry point do seu app (index.jsou app.js,
normalmente):
Copy
import 'bootstrap';
Opcionalmente, você também pode importar plugins individualmente, sempre que necessário:
Copy
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap depende do jQuery e Popper, os quais são definidos como peerDependencies, significando que
você terá que se certificar de adicionar os dois ao seu package.json, usando npm install --save jquery
popper.js.
Importar estilos
Importação do Sass pré-compilado
Para aproveitar todo potencial e personalizar o Bootstrap do jeito que quiser, use os arquivos fontes como
parte do seu bundling process.
Primeiro, crie seu próprio _custom.scss e use-o para sobrescrever as variáveis integradas de customização.
Assim, use o arquivo Sass principal para importar suas variáveis personalizadas e depois o Bootstrap, em si:
Copy
@import "custom";
@import "~bootstrap/scss/bootstrap";
Para o Bootstrap compilar, certifique-se de instalar e usar os loaders necessários, que são: sass-
loader e postcss-loader com Autoprefixer. Nas mínimas configurações, seu Webpack deve ter esta regra ou
algo parecido:
Copy
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // injeta CSS na página
}, {
loader: 'css-loader', // traduz CSS em módulos commonJS
}, {
loader: 'postcss-loader', // Executa tarefas do postcss
options: {
plugins: function () { // plugins postcss, podem ser exportados para o postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compila Sass em CSS
}]
},
...
Importação do CSS compilado
Opcionalmente, você pode usar o CSS Bootstrap pronto para uso, simplesmente, adicionando esta linha
ao entry point do seu projeto:
Copy
import 'bootstrap/dist/css/bootstrap.min.css';
Neste caso, você pode usar suas regras CSS sem nenhuma modificação especial nas configurações webpack.
Assim, você não precisa do sass-loader, apenas do style-loader e css-loader.
Copy
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...
Acessibilidade
Uma breve visão geral dos recursos e limitações do Bootstrap para a criação de conteúdo acessível.
Reliable transactional email for developers that fits seamlessly into any stack.ads via Carbon
O Bootstrap fornece um framework fácil de usar, com estilos prontos, ferramentas de layout e componentes
interativos, permitindo que os desenvolvedores criem sites e aplicações que sejam visualmente atraentes,
ricas em funcionalidades e de rápido acesso.
Visão geral e limitações

A acessibilidade no geral de qualquer projeto criado com o Bootstrap depende, em grande parte, da
marcação do autor, do estilo adicional e do script que eles incluíram. No entanto, desde que estes tenham
sido implementados corretamente, deve ser perfeitamente possível criar sites e aplicativos com Bootstrap
que preencham as normas e requisitos de acessibilidade da WCAG 2.0 (A/AA/AAA), Seção 508 e
semelhantes.
Marcação estrutural
O estilo e o layout do Bootstrap podem ser aplicados a uma ampla variedade de estruturas de marcações.
Esta documentação tem como objetivo fornecer aos desenvolvedores os melhores exemplos e práticas para
demonstrar o uso do próprio Bootstrap e ilustrar a marcação semântica apropriada, incluindo maneiras pelas
quais possíveis preocupações de acessibilidade podem ser evitadas.
Componentes interativos
Os componentes interativos do Bootstrap, como modais, menus suspensos e dicas de ferramentas

personalizadas, são projetados para funcionar com touch-pad, mouse e teclado. Por meio do uso de funções
e atributos relevantes do WAI-ARIA, esses componentes também devem ser compreensíveis e operáveis
usando tecnologias assistivas (como leitores de tela).
Como os componentes do Bootstrap são propositadamente projetados para serem bastante genéricos, os
autores podem precisar incluir mais regras e atributos do ARIA, bem como o comportamento do JavaScript,
para transmitir com mais precisão a natureza e funcionalidade precisas de seus componentes. Isso
geralmente é observado na documentação.
Contraste de cor
A maioria das cores que atualmente compõem a paleta padrão do Bootstrap - usada em toda a estrutura
para variações de botões, variações de alerta, indicadores de validação de formulário - leva a um contraste
de cores insuficiente (abaixo da relação de contraste de cores recomendada WCAG 2.0 color contrast ratio of
4.5:1) quando usado contra um fundo claro. Os autores precisarão modificar / estender manualmente essas
cores padrão para garantir taxas de contraste de cores adequadas.
Conteúdo visualmente oculto

O conteúdo que deve estar visualmente oculto, mas permanecer acessível a tecnologias assistivas, como
leitores de tela, pode ser estilizado usando a classe .sr-only. Isso pode ser útil em situações em que
informações ou dicas visuais adicionais (como o significado denotado pelo uso da cor) também precisam ser
transmitidas a usuários não visuais.
Copy
<p class="text-danger">
<span class="sr-only">Perigo: </span>
Esta ação não é reversível.
</p>
Para controles interativos visualmente ocultos, como os links “skip” tradicionais, o .sr-onlypode ser
combinado com a classe .sr-only-focusable. Isso garantirá que o controle se torne visível uma vez em foco
(para usuários de teclado com visão).
Copy
<a class="sr-only sr-only-focusable" href="#content">Voltar ao conteúdo principal.</a>
Recursos Adicionais
• Web Content Accessibility Guidelines (WCAG) 2.0
• The A11Y Project
• MDN accessibility documentation
• Tenon.io Accessibility Checker
• Colour Contrast Analyser (CCA)
• “HTML Codesniffer” bookmarklet for identifying accessibility issues
Visão Geral
Componentes e opções para o layout do seu projeto Bootstrap, incluindo wrapping containers, um
poderoso sistema de grid, um objeto de mídia flexível e classes responsivas.
Containers
Containers são os elementos de layout mais básico do Bootstrap e são necessários quando usamos o
sistema de grid padrão. Escolha entre um container responsivo de largura fixa (ou seja, com alterações
de max-width em cada ponto de interrupção) ou por um responsivo de largura fluida (ou seja, 100% de
largura o tempo todo).
Embora os containers possam ser aninhados, a maioria dos layouts não exige um container aninhado.
Copy
<div class="container">

</div>
Use .container-fluid para um container com de largura total, abrangindo toda a largura da sua área de
visualização.
Copy
<div class="container-fluid">
...
</div>
Breakpoints reponsivos
Como o bootstrap é desenvolvido para ser “mobile first” usamos varias media queries para criar sensíveis
breakpoints para nossos layouts e interfaces. Esses pontos são baseadas em larguras de área de visualização
miníma e nos permitem dimensionar conforme muda o tamanho da área de visualização.
Bootstrap usa principalmente os seguintes intervalos de media queries, ou breakpoints, em nossos arquivos
de origem do SASS para os layouts, sistemas de grid e componentes.
Copy
// Dispositivos extra small (telefones em modo retrato, com menos de 576px)
// Sem media query para `xs`, já que este é o padrão, no Bootstrap.
// Dispositivos small (telefones em modo paisagem, com 576px ou mais)

@media (min-width: 576px) { ... }
// Dispositivos médios (tablets com 768px ou mais)

// Dispositivos large (desktops com 992px ou mais)

// Dispositivos extra large (desktops grandes com 1200px ou mais)
Como escrevemos nosso CSS fonte no Sass, todas as nossas consultas de mídia estão disponíveis via mixins
do Sass:
Copy
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Exemplo: Começe ocultando em `min-width: 0`, e então mostre em no breakpoint `sm`

.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Ocasionalmente, usamos media queries que seguem na outra direção (no tamanho da tela fornecida ou
menor):
Copy
@media (max-width: 575.98px) { ... }
// Dispositivos small (telefones em modo paisagem, com menos de 768px)

// Dispositivos médios (tablets com menos de 992px)

// Dispositivos large (desktops com menos de 1200px)

// Dispositivos extra large (desktops grandes)

// Nenhuma media query, já que o breakpoint extra large não possui nenhum limite acima.
Perceba: já que browsers não suportam, atualmente, range context queries, nós contornamos as limitações
dos prefixos min- e max- e viewports com larguras fracionais (pode ocorrer em algumas circunstâncias, em
dispositivos de alta dpi), usando valores com precisão maior para estas comparações.
Mais uma vez, essas media queries também estão disponíveis via mixins Sass:
Copy
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down

@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Há também media queries e mixins para selecionar um único segmento com o tamanho da tela separado
pelo tamanho minímo e tamanho máximo.
Copy
// Dispositivos small (telefones em modo paisagem, com 576px ou mais)

@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Dispositivos médios (tablets com 768px ou mais)

// Dispositivos large (desktops com 992px ou mais)

// Dispositivos extra large (desktops grandes com 1200px ou mais)

Essas media queries também estão disponíveis via mixins Sass:
Copy
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
Da mesma forma, as media querias podem abranger várias larguras de breakpoints.
Copy
// Exemplo
// Aplica estilos, começando de dispositivos médios até os extra larges
O mixin Sass para selecionar o mesmo tamanho de tela seria:
Copy
@include media-breakpoint-between(md, xl) { ... }
Z-index
Vários componentes Bootstrap usam z-index, a propriedade CSS que ajuda controlar layout, provendo um
terceiro eixo para mover o conteúdo. Nós usamos uma escala z-index padrão, no Bootstrap. Ela foi
desenhada para dispor nvegações, tooltips, popovers, modals e etc, adequadamente.
Estes valores maiores começam em um número arbitrário, grande e específico o suficiente para, com sorte,
evitar conflitos. Nós precisamos de um conjunto de valores padrões desse para que nossos componentes
dispostos em camadas (tooltips, popovers, navbars, dropdowns e modals) sejam, razoavelmente,
consistentes em seus comportamentos. Não há motivos para não termos usado valores maiores
que 100 ou 500, ou não.
Nós não encorajamos a personalização desses valores, individualmente. Se precisar alterar um deles,
provavelmente, vai precisar mudar todos eles.
Copy
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
Para lidar com sobreposição de bordas dentro de componentes (ex: botões em grupos de inputs), nós
usamos os baixos valores z-index de 1, 2 e 3 para estados padrões, hover e active. Em hover, focus e active,
nós trazemos um elemento específico à frente, usando um valor z-index maior para mostrar suas bordas,
invés de seus elementos.
Sistema grid
Use nosso poderoso, mobile-first, grid flexbox para fazer layouts de todas as formas e tamanhos, graças ao
sistema de doze colunas, cinco breakpoints responsivos, variáveis e mixins Sass, além de várias classes pré-
definidas.
See how your visitors are really using your website.ads via Carbon
Como funciona
O sistema grid Bootstrap usa vários containers, linhas e colunas para arranjar e alinhar conteúdo. Ele é feito
com flexbox e é, totalmente, responsivo. Abaixo, temos um exemplo e aprofundamento sobre como o grid
funciona.
Novo ou não sabe muito sobre flexbox? Leia este guia flexbox, do CSS Tricks, para background,
terminologia, diretrizes e snippets.
Uma de três colunas

Copy
<div class="row">
<div class="col-sm">
</div>
</div>
</div>
</div>
</div>
O exemplo acima cria três colunas de larguras idênticas em dispositivos pequenos, médios, grandes e extra
grandes, usando nossas classes grid pré-definidas. Estas colunas são centralizadas na página, usando o
elemento pai .container.
Resumindo, assim é como funciona:
• Containers criam meios para centralizar e, horizontalmente, preencher os conteúdos de seu site;
o Use .container para ter uma largura responsiva em pixel ou .container-fluidpara ter width:
100%, em todas viewports e tamanhos de disposivos.
• Rows são elemntos para envolver colunas;
o Cada coluna tem padding horizontal (gutter) para controlar o espaço, entre elas.
▪ Este padding, depois, é cancelado com rows usando margens negativas. Assim, todo
conteúdo em suas colunas é, visualmente, alinhado a esquerda.
• Em um layout grid, o conteúdo deve ser posicionado dentro de colunas e só elas podem ser filhos
imediatos de .rows;
• Graças ao flexbox, colunas grid sem width declarado vão, automaticamente, se dimensionar com
larguras iguais;
o Por exemplo, quatro exemplos de .col-sm vão, automaticamente, ter 25% de largura, no
breakpoint sm ou maior;
o Veja a seção colunas com layout automático, para mais exemplos.
• Classes de colunas indicam o número de colunas que você quer usar, dentro de uma possibilidade de
12, por row;
o Se você quiser três colunas de larguras idênticas, pode usar .col-4, por exemplo.
• Largura de colunas são definidas em porcentagem para que, então, elas sejam sempre fluidas e
dimensionadas com relação a seus elementos pais;
• Colunas possuem padding horizontal para criar gutters, entre cada coluna.
o No entanto, você pode remover a margin das rows e padding das colunas, usando .no-
gutters na .row.
• Para fazer o grid responsivo, existem cinco breakpoints, um para cada breakpoint responsivo: extra
small (implícito), small, medium, large e extra large;
• Breakpoints grid são baseados em media queries min-width, significando que elas aplicam estilos
para o dado breakpoint e outros maiores;
o Exemplo: .col-sm-4 aplica ao small, medium, large e extra large, mas não ao primeiro
breakpoint xs.
• Você pode usar classes grid pré-definidas (como .col-4) ou mixins Sass com uma marcação mais
semântica.
Se atente as limitações e bugs flexbox, tipo a impossibilidade de usar alguns elementos HTML como
container flex.
Parâmetros grid
Enquanto Bootstrap usa em ou rem para definir a maioria das dimensões, px é usado para breakpoints grid e
largura de containers. Isto se deve a largura da viewport ser em pixels e não se alterar com mudança
no tamanho de fonte.
Veja como aspectos do sistema grid Bootstrap funciona, através de diferentes dispositivos, numa bela tabela.
Extra small Small Medium Large Extra la

<576px ≥576px ≥768px ≥992px ≥1200p
Largura máxima do container Não tem (auto) 540px 720px 960px 1140px
Prefixo em classe .col- .col-sm- .col-md- .col-lg- .col-xl-
Número de colunas 12
Largura da gutter 30px (15px em cada lado da coluna)
Aninhável Sim
Ordenamento de coluna Sim
Layout automático de colunas

Use classes de breakpoints específicos para dimensionamento de colunas fácil, sem uma classe numerada
explícita, como .col-sm-6.
Largura idêntica
Por exemplo, aqui estão dois layouts grid que aparecem em todo dispositivo e viewport, desde xs até xl.
Use qualquer quantidade de classes sem números, para cada breakpoint necessário e, então, todas colunas
terão a mesma largura.
1 de 2
2 de 2
1 de 3
2 de 3
3 de 3
Copy
<div class="row">
<div class="col">
1 de 2
</div>
<div class="col">
2 de 2
</div>
</div>
<div class="row">
<div class="col">
1 de 3
</div>
<div class="col">
2 de 3
</div>
<div class="col">
3 de 3
</div>
</div>
</div>
Colunas com larguras idênticas podem ser quebradas em diversas linhas, mas tem um bug flexbox do
Safari que evita isso de funcionar, sem flex-basis ou border declarado. Há soluções para versões antigas de
browsers, mas não são necessárias, se você estiver atualizado.
Coluna
Coluna
Coluna
Coluna
Copy
<div class="row">
<div class="col">Coluna</div>
<div class="w-100"></div>
</div>
</div>
Definindo largura de uma coluna
Layout automático em colunas flexbox do grid também significa que você pode definir a largura de uma
coluna e ter suas colunas irmãs redimensionadas, automaticamente. Você também pode usar classes grid
pré-definidas (como mostrado abaixo), mixins grid ou larguras inline. Perceba que as outras colunas vão se
redimensionar, não importa a largura da coluna do meio.
1 de 3
2 de 3 (maior)
3 de 3
1 de 3
2 de 3 (maior)
3 de 3
Copy
<div class="row">
<div class="col">
1 de 3
</div>
<div class="col-6">
2 de 3 (maior)
</div>
<div class="col">
3 de 3
</div>
</div>
<div class="row">
<div class="col">
1 de 3
</div>
<div class="col-5">
2 de 3 (maior)
</div>
<div class="col">
3 de 3
</div>
</div>
</div>
Conteúdo com largura variável
Use classes col-{breakpoint}-auto para dimensionar colunas, baseando-se na largura natural de seus
conteúdos.
1 de 3
3 de 3
1 de 3
3 de 3
Copy
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 de 3
</div>
<div class="col-md-auto">
</div>
3 de 3
</div>
</div>
<div class="row">
<div class="col">
1 de 3
</div>
<div class="col-md-auto">
</div>
3 de 3
</div>
</div>
</div>
Larguras idênticas em várias linhas
Crie colunas de larguras idênticas que se extendem por várias linhas, colocando .w-100 onde você quer que
as colunas quebrem, em uma nova linha. Faça com que as quebras sejam responsivas, misturando .w-
100 com algum utilitário de display responsivo.
col
col
col
col
Copy
<div class="row">
<div class="col">col</div>
</div>
Classes responsivas
O grid Bootstrap possui cinco graus de classes pré-definidas, para construir layouts responsivos complexos.
Customize o tamanho de suas colunas em dispositivos extra small, small, medium, large ou extra large.
Todos breakpoints
Para grids que são iguais, independente do tamanho dox dispositivos, use as classes .col e .col-*.
Especifique uma classe numerada quando você precisar que uma coluna específica seja dimensionada. Caso
contrário, sinta-se a vontade de usar só .col.
col
col
col
col
col-8
col-4
Copy
<div class="row">
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
De vertical para horizontal

Usando só um conjunto de classes .col-sm-*, você pode criar um sistema de grid básico que inicia
empilhado e termina na horizontal, a partir do breakpoint small (sm).
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Copy
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
</div>
Misture e combine
Não quer que suas colunas, simplesmente, empilhem-se em alguns breakpoints? Use uma combinação de
diferentes classes, para cada breakpoint necessário. Veja o exemplo abaixo, para ter uma melhor ideia de
como isso tudo funciona.
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Copy

<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
</div>

<div class="row">
</div>

<div class="row">
<div class="col-6">.col-6</div>
</div>
Gutters
Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To
change the gutters in a given row, pair a negative margin utility on the .rowand matching padding utilities
on the .cols.
Here’s an example of customizing the Bootstrap grid at the large (lg) breakpoint and above. We’ve increased
the .col padding with .px-lg-5 and then counteracted that with .mx-lg-n5on the parent .row.
Custom column padding

Custom column padding
Copy
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
Alinhamento
Use utilitários flexbox de alinhamento para, verticalmente e horizontalmente, alinhar colunas.
Alinhamento vertical

Copy
<div class="row align-items-start">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="row align-items-center">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="row align-items-end">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
Copy
<div class="row">
<div class="col align-self-start">
</div>
<div class="col align-self-center">
</div>
<div class="col align-self-end">
</div>
</div>
</div>
Alinhamento horizontal
Uma de duas colunas

Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Uma de duas colunas
Copy
<div class="row justify-content-start">
<div class="col-4">
Uma de duas colunas
</div>
<div class="col-4">
Uma de duas colunas
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
Uma de duas colunas
</div>
<div class="col-4">
Uma de duas colunas
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
Uma de duas colunas
</div>
<div class="col-4">
Uma de duas colunas
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
Uma de duas colunas
</div>
<div class="col-4">
Uma de duas colunas
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
Uma de duas colunas
</div>
<div class="col-4">
Uma de duas colunas
</div>
</div>
</div>
Sem gutters
As gutters, entre colunas, podem ser removidas com uma de nossas classes pré-definidas: .no-gutters. Isto
remove a margem negativa do .row e padding horizontal de todas colunas filhas imediatas.
Aqui está o código fonte para criar estes estilos. Perceba que sobrescrição de colunas só são cabíveis na
primeira coluna e são selecionadas pelo seletor de atributo. Apesar de gerar um seletor mais
específico, padding de coluna ainda pode ser estilizado com utilitários de espaçamento.
Precisa de um design de ponta-a-ponta? Deixe as classes .container ou .container-fluid, de lado.
Copy
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Na prática, é assim que fica. Perceba que você pode continuar a fazer isso com todas as classes grid pré-
definidas, incluindo as de largura, breakpoint responsivo, reordenamento e muito mais.
.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4
Copy
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
</div>
Limite de colunas
Se mais de 12 colunas são colocadas dentro de só uma .row, cada grupo de colunas extras vai pular para a
próxima linha.
.col-9
.col-4
Já que 9 + 4 é maior que 12, esta div de quatro colunas pula para essa nova linha.
.col-6
Colunas subsequentes pulam junto para a nova linha.
Copy
<div class="row">
<div class="col-4">.col-4<br>Já que 9 + 4 é maior que 12, esta div de quatro colunas pula para essa
nova linha.</div>
<div class="col-6">.col-6<br>Colunas subsequentes pulam junto para a nova linha.</div>

</div>
Quebra de colunas
Quebrar colunas, em uma nova linha, exige um pequeno hack: adicionar um elemento com width: 100%,
aonde quer que você queira que suas colunas pulem para uma nova linha. Normalmente, isso é conseguido
com múltiplos .row, mas isso não se encaixa em toda situação.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Copy
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>



</div>
Você também pode aplicar esta quebra em breakpoints específicos, usando nossos utilitários de display
responsivos.
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Copy
<div class="row">

<div class="w-100 d-none d-md-block"></div>

</div>
Reordenamento
Classes de ordem
Use classes .order- para controlar a ordem visual de seu conteúdo. Estas classes são responsivas, então,
você pode definir a ordem por breakpoint (ex: .order-1.order-md-2). Inclui suporte para ordenamento
de 1 até 12, em todos breakpoints do grid.
Primeiro, mas não está ordenado.

Era o segundo, mas é o último ordenado.
Era terceiro, mas é o primeiro ordenado.
Copy
<div class="row">
<div class="col">
Primeiro, mas não está ordenado.
</div>
<div class="col order-12">
Era o segundo, mas é o último ordenado.
</div>
<div class="col order-1">
Era terceiro, mas é o primeiro ordenado.
</div>
</div>
</div>
Também tem as classes responsivas .order-first e .order-last, as quais alteram a order do elemento,
aplicando order: -1 e order: 13 (order: $columns + 1), respectivamente. Estas classes também podem ser
misturadas com as classes numeradas .order-*, se necessário.
Era primeiro, mas ordenado como último.

Segundo, mas sem ordenamento.
Era terceiro, mas ordenado como primeiro.
Copy
<div class="row">
<div class="col order-last">
Era primeiro, mas ordenado como último.
</div>
<div class="col">
Segundo, mas sem ordenamento.
</div>
<div class="col order-first">
Era terceiro, mas ordenado como primeiro.
</div>
</div>
</div>
Deslocando colunas
Você pode deslocar colunas, de duas maneiras: com nossas classes responsivas .offset- e nossos utilitários
de margem. Classes do grid podem ser combinadas para dimensionar colunas, enquato classes de margem
são mais úteis para rápidos layouts, onde a largura do deslocamento é variável.
Classes offset
Mova colunas para a direita, usando classes .offset-md-*. Estas classes crescem a margem esquerda da
coluna, em * colunas. Por exemplo , .offset-md-4 desloca o elemento .col-md-4, por quatro colunas.
.col-md-4
.col-md-4 .offset-md-4
Copy
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 defset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 defset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Além da limpeza de coluna, em breakpoints responsivos, você pode precisar resetar deslocamentos. Veja
isso, em ação, no grid exemplo.
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Copy
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-
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 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-
lg-6 .offset-lg-0</div>
</div>
Utilitários de margem
Graças a migração para o flexbox, na v4, você você usar utilitários de margem (como .mr-auto) para forçar
colunas irmãs se distanciarem, uma das outras.
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
Copy
<div class="row">
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Aninhamento
Para aninhar seu conteúdo no grid padrão, coloque um .row com um conjunto de colunas .col-sm-*, dentro
de uma coluna .col-sm-* existente. Rows aninhados devem ter um conjunto de 12 colunas ou menos (não é
obrigatório usar todo o espaço disponível para 12 colunas).
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Copy
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
</div>
</div>
</div>
</div>
</div>
Mixins Sass
Quando usando os arquivos fonte Sass do Bootstrap, você tem a opção de usar variáveis e mixins Sass para
criar layouts personalizados, semânticos e responsivos. Nossas classes grid pré-definidas usam as mesmas
variáveis e mixins para gerarem todo um conjunto de classes prontas para usar, em layouts responsivos
rápidos.
Variáveis
Variáveis e mapas determinam o número de colunas, largura da gutter e o ponto media query de começar a
flutuar colunas. Nós usamos elas para gerar as classes pré-definidas mostradas acima, assim como os mixins
listados abaixo.
Copy
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Tela extra small (muito pequena, no português)
xs: 0,
// Tela small (pequena, no português)
sm: 576px,
// Tela média
md: 768px,
// Tela large (grande, no português)
lg: 992px,
// Tela extra large (muito grande, no português)
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mixins
Mixins são usados em conjunto com as variáveis grid para gerar CSS semântico, em colunas individuais.
Copy
// Criar um elemento pai para conjuntos de colunas.
@include make-row();
// Apronta o elemnto grid (aplica tudo, menos largura).

@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Seja chique, usando deslocamento ou ordenamento Bootstrap.

@include make-col-offset($size, $columns: $grid-columns);
Exemplo de uso
Você pode modificar as variáveis para seus próprios valores ou, apenas, usar os mixins com seus valores
padrões. Aqui está um exemplo, usando configurações padrões para criar um layout de duas colunas e um
espaço, entre elas.
Copy
.container-exemplo {
width: 800px;
@include make-container();
}
.row-exemplo {
@include make-row();
}
.exemplo-conteudo-principal {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
}
}
.exemplo-conteudo-secundario {
}
}
}
Conteúdo principal
Conteúdo secundário
Copy
<div class="container-exemplo">
<div class="example-row">
<div class="example-content-main">Conteúdo principal</div>
<div class="example-content-secondary">Conteúdo secundário</div>
</div>
</div>
Personalizando o grid
Usando nossas variáveis e mapas Sass integrados, é possível customizar as classes grid pré-definidas,
completamente. Altere a quantia de breakpoints, dimensões de media queries, largura de containers e
recompile.
Colunas e gutters
O número de colunas pode ser modificado com variáveis Sass. $grid-columns é usada para gerar as larguras
(em porcentagem) de cada coluna individual, enquanto $grid-gutter-widthgera larguras para a coluna
gutters.
Copy
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Breakpoints
Além das colunas, você pode querer customizar o número de breakpoints. Se quiser só quatro deles, você
atualizar $grid-breakpoints e $container-max-widths para algo assim:
Copy
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Quando fazendo mudanças nos mapas ou variáveis Sass, você vai precisar salvar as mudanças e recompilar.
Fazendo isso, um novo conjunto de classes pré-definidas para larguras, deslocamento e ordenamento, será
gerado. Utilitários de visibilidade responsivos também serão atualizados para usarem os breakpoints
customizados. Se assegure de colocar os valores grid em px (não em rem, em ou %).
Objeto de mídia
Documentação e exemplos para o objeto de mídia Bootstrap, construído para componentes repetitivos
como comentários de blog, tweets, etc.
Exemplo
O objeto de mídia ajuda construir componentes complexos e repetitivos, onde alguma mídia é posicionada
ao lado do conteúdo. Além do mais, isso é possível só com duas classes, graças ao flexbox.
Abaixo, temos um exemplo de um objeto de mídia. Apenas duas classes são necessárias (o elemento
pai .media e o corpo .media-body), em volta de seus conteúdos. Margem e padding adicionais podem ser
usados com utilitários de espaçamento.
Cabeçalho da mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.
Copy
<div class="media">
<img class="mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
<div class="media-body">
<h5 class="mt-0">Cabeçalho da mídia</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
Flexbug #12: Elementos inline não são tratados como flex items
Internet Explorer 10-11 não renderiza elementos inline, como links ou imagens (ou pseudo-
elementos ::before e ::after), como flex items. A única solução é definir um valor não-
inline display (block, inline-block ou flex). Nós sugerimos usar .d-flex, um de nossos utilitários display,
como uma solução fácil.
Fonte: Flexbugs no GitHub
Aninhamento
Objetos de mídia podem ser aninhados infinitamente, apesar de sugerirmos que você pare, em algum
ponto. Coloque .media aninhado dentro do .media-body de um objeto mídia pai aninhado.
faucibus.
faucibus.
Copy
<div class="media">
<div class="media mt-3">

<a class="pr-3" href="#">
<img src=".../64x64" alt="Imagem de exemplo genérica">
</a>
</div>
</div>
</div>
</div>
Alinhamento
A mídia, em um objeto de mídia, pode ser alinhada com utilitários flexbox na parte superior, meio ou fim do
conteúdo do .media-body.
Mídia alinhada ao topo

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
Copy
<div class="media">
<img class="align-self-start mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
<h5 class="mt-0">Mídia alinhada ao topo</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
Mídia centralizada
Copy
<div class="media">
<img class="align-self-center mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
<h5 class="mt-0">Mídia centralizada</h5>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
Mídia alinhada na parte inferior

Copy
<div class="media">
<img class="align-self-end mr-3" src=".../64x64" alt="Imagem de exemplo genérica">
<h5 class="mt-0">Mídia alinhada na parte inferior</h5>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
Ordem
Altere a ordem do conteúdo, em objetos de mídia, modificando o próprio HTML ou usando algum CSS
flexbox customizado para definir o valor da propriedade order em um número inteiro de sua escolha.
Objeto mídia
faucibus.
Copy
<div class="media">
<h5 class="mt-0 mb-1">Objeto mídia</h5>
</div>
<img class="ml-3" src=".../64x64" alt="Imagem de exemplo genérica">
</div>
Lista de mídia
Devido as poucas exigências do objeto de mídia, você também pode usar estas classes em elementos HTML
de lista. Em seu <ul> ou <ol>, use a classe .list-unstyled para remover qualquer estilo de lista padrão e,
então, aplique .media no seu <li>. Como sempre: use utilitários de espaçamento, onde quer que precise.
Objeto de mídia baseado em lista
•
Copy
<ul class="list-unstyled">
<li class="media">
<h5 class="mt-0 mb-1">Objeto de mídia baseado em lista</h5>
</div>
</li>
<li class="media my-4">
</div>
</li>
<li class="media">
</div>
</li>
</ul>
Utilitários para layout

Para um desenvolvimento responsivo, mobile-friendly, mais rápido, Bootstrap possui uma dúzia de classes
utilitárias para exibir, esconder, alinha e espaçar conteúdo.
Own your code from end to end. Resolve errors way faster right in your workflow.ads via Carbon
Alterando display
Use nossos utilitários de display para, responsivamente, alternar valores comuns da propriedade display.
Misture-os com nosso sistema grid, conteúdo e componentes a serem exibidos ou ocultos, em viewports
específicos.
Opções flexbox
Bootstrap 4 é feito com flexbox, mas nem todo display de elementos foram altreados para display: flex, já
que isso faria muitas sobrescrições desnecessárias e mudanças inesperadas em comportamentos chaves de
browsers. A maior parte de nossos componentes são feitos com flexbox ativado.
Se precisar ativar display: flex em um elemento, faça colocando .d-flex ou uma das variações responsivas
(ex: .-sm-flex). Você precisará desta classe ou valor display para conseguir usar o resto de nossos utilitários
flexbox para dimensionamento, alinhamento, espaçamento, etc.
Margem e padding
Use os utilitários de espaçamento de margin e padding para controlar como elementos e componentes são
espaçados e dimensionados. Bootstrap 4 possui uma escala de cinco níveis para utilitários de espaçamento,
baseado no valor padrão 1rem da variável $spacer. Escolha valores para todas viewports (.mr-3, no
caso margin-right: 1rem) ou variações responsivas para mirar em viewports específicas (.mr-md-
3 para margin-right: 1rem em viewports do breakpoint md).
Alternar visibility
Quando alternar o valor da display não é necessário, você pode alternar o valor da visibility de algum
elemento, usando nossos utilitários de visibilidade. Elementos invisíveis vão continuar a afetar o layout da
página, mas são ocultos dos usuários, visualmente.
Reboot
Reboot, uma série de customizações para elementos em único arquivo CSS, ajuda o Bootstrap prover uma
base elegante, consistente e simples de se construir em cima.
Abordagem
O Reboot é construído baseado no Normalize, possibilitando muitos elementos HTML sem estilos baseados
em opiniões e usando apenas seletores de elementos. Por exemplo, nós customizamos alguns estilos
do <table> para uma base mais simples e, então, te damos a oportunidade de usar .table, .table-
bordered e outras classes.
Aqui estão nossas diretrizes e razões para termos escolhidos oquê sobrescrever, no Reboot:
• Atualizar alguns valores padrões de navegadores para usar rems, invés de ems para espaçamento de
componentes escaláveis;
• Evitar margin-top. Margens verticais podem colapsar, resultando em resultados inesperados. Mais importante
ainda: uma única direção de margem é mentalmente mais simples;
• Para escalar facilmente através de diferentes tamanhos de dispositivos, elementos blockdevem usar rems em
suas margens;
• Manter o mínimo de declarações relacionadas a propriedade font, usando o valor inherit sempre que
possível.
Padrões de páginas
Os elementos <html> e <body> são atualizados para possibilitarem melhores padrões, em toda a página. Mais
especificamente:
• box-sizing é configurado globalmente em todos elementos, incluindo *::before e *::after. Isso assegura
que a largura declarada do elemento nunca exceda, devido a padding ou borda;
o Nenhum tamanho de fonte base é declarado no <html>, mas assumimos o padrão do navegador
(16px). É declarado font-size: 1rem no <body> para escalar o texto fácil e responsivamente usando
media queries, enquanto é respeitado as preferências do usuário e garantindo uma abordagem mais
acessível.
• O <body> também configura font-family, line-height e text-align, globalmente. Isso é herdado mais
tarde por alguns elementos de formulário, para previnir inconsistência em fontes.
• Por segurança, o <body> tem background-color padrão de #fff declarado.
Pilha de fontes nativas

As fontes web padrões (Helvetica Neue, Helvetica e Arial) foram descartadas no Bootstrap 4 e substituídas
com uma “pilha de fontes nativas” para otimizar rederização de texto em todo dispositivo e SO. Leia mais
sobre pilhas de fontes nativas, nesse artigo da Smashing Magazine.
Copy
$font-family-sans-serif:
// Safari para OS X e iOS (San Francisco)
-apple-system,
// Chrome < 56 para OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Fallback de fonts web básicas
"Helvetica Neue", Arial, sans-serif,
// Fonts de Emoji
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
Esta font-family é aplicada ao <body> e herdada Bootstrap adentro, global e automaticamente. Para trocar
a font-family global, basta atualizar a variável $font-family-base e recompilar o Bootstrap.
Cabeçalhos e parágrafos
Todos elementos de cabeçalho e parágrafo são resetados para terem margin-top removido. Cabeçalhos
possuem margin-bottom: .5rem e parágrafos margin-bottom: 1rem para espaçamento mais fácil.
Cabeçalho Exemplo
<h1></h1> h1. Cabeçalho Bootstrap
Listas
Todas listas (<ul>, <ol> e <dl>) possuem seus valores para margin-top removidos e uma margin-bottom:
1rem. Listas aninhadas não possuem nenhuma margin-bottom.
• Lorem ipsum dolor sit amet

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

2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
Para estilização mais simples, hierarquia mais limpa e melhor espaçamento, listas de descrição possuem
margens customizadas. <dd>s possuem margin-left com valor 0 e adicionam margin-bottom: .5rem. <dt>s
estão formatadas em negrito.
Lista de descrições
Uma lista de descrições é perfeita para definir termos.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Textos pré-formatados
O elemento <pre> é configurado para remover sua margin-top e usar rem em sua margin-bottom.
.example-element {
margin-bottom: 1rem;
}
Tabelas
Tabelas são ajustadas sutilmente para estilizar elementos <caption>, colapsar bordas e garantir que o text-
align seja consistente. Mudanças adicionais para bordas, paddings e outras propriedades são adicionadas
com a classe .table.
Este é um exemplo de tabela e isso é um exemplo de legenda para descrever conteúdos.
Cabeçalho da tabela Cabeçalho da tabela Cabeçalho da tabela Cabeçalho da tabela
Célula da tabela Célula da tabela Célula da tabela Célula da tabela
Formulários
Vários elementos de formulário são resetados para estilos mais básicos. Aqui vai algumas das mudanças
mais notáveis:
• Os <fieldset>s não possuem bordas, padding ou margem, então, eles podem ser usados facilmente
como wrappers para grupos ou inputs individuais;
• A tag <legend>, como os fieldsets, também foram re-estilizados para serem mostrados como um tipo de
cabeçalho;
• As <label>s são configuradas para terem display: inline-block e permitir que margens sejam aplicadas;
• Os <input>s, <select>s, <textarea>s e <button>s são mais estilizados pelo Normalize, mas o Reboot remove
suas margens e configura line-height: inherit, também;
• Tags <textarea> são modificadas para apenas serem redimensionáveis verticalmente, já que horizontalmente
costuma quebrar o layout da página.
Essas mudanças e outras, são mostradas abaixo.
Exemplo de legendas
Exemplo de input
Exemplo de select
Confira esta checkbox
Essa é a opção um. A opção dois é algo diferente e é super longa para demonstrar o _wrapping_
desses controles de formulários chiques. Opção três está desativada.
Exemplo de input textarea
Exemplo de input date
Exemplo de input time
Example de output 100
Botão submit
Botão submit
Elementos variados
Address
O elemento <address> é atualizado para resetar os padrões da font-style de itálico para normal. A line-
height é herdada e a margin-bottom: 1rem foi acrescentada. As tags <address>são para apresentar
informações de contato para o ancestral mais próximo ou um determinado trabalho. Preserve sua
formatação, colocando <br> no final de suas linhas.
Twitter, Inc.
Rua Market, 1355, Suíte 900
São Francisco, CA 94103
Tel: (123) 456-7890
Nome completo
fulano.ciclano@exemplo.com
Blockquote
O valor padrão das margens no <blockquote> é 1em 40px, então, nós resetamos para 0 0 1reme conseguimos
algo mais consistente em outros elementos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso em Título da fonte
Elementos inline
O elemento <abbr> recebe estilos básicos para se destacar dentro do texto do parágrafo.
Nulla attr vitae elit libero, a pharetra augue.
Summary
O valor padrão da propriedade cursor é text, então, nós resetamos para pointer para dar a impressão que é
possível interagir com elemento, clicando nele.
Alguns detalhesMais detalhes
Mais informações ainda sobre os detalhes.
Atributo HTML5 [hidden]

HTML5 acrescentou um novo atributo global denominado [hidden], o qual é estilizado como display: none,
por padrão. Pegando uma ideia emprestada do PureCSS, nós aprimoramos esse valor padrão fazendo com
que tenha a flag !important, previnindo que sua propriedade display seja sobrescrita, acidentalmente. Além
do mais, o atributo [hidden] não é suportado nativamente no IE10 e esta declaração no nosso CSS contorna
esse problema.
Copy
<input type="text" hidden>
Incompatibilidade jQuery
O atributo [hidden] não é compatível com os métodos JQuery $(...).hide() e $(...).show(). Portanto,
atualmente, nós não usamos [hidden] no lugar de outras técnicas para gerenciar o display de elementos.
Para a simples troca de visibilidade de um elemento, sem modificar o valor do display e continuar
permitindo que o elemento tenha efeito no fluxo do documento, use a class .invisible.
Tipografia
Documentação e exemplos para a tipografia Bootstrap, incluindo configurações globais, cabeçalhos, listas,
texto do `<body>` e outros.
Configurações globais
O Bootstrap configura estilos básicos para display, tipografia e links, globalmente. Quando precisar de mais
controle, confira as classes utilitárias de texto.
• Usa-se uma pilha de fontes nativas que seleciona a melhor font-family para cada SO e dispositivo;
• Para tipografia mais inclusiva e acessível em escala, nós usamos as font-sizes padrões dos
navegadores (tipicamente 16px), então, visitantes podem customizar os padrões de seus browser,
sempre que necessário;
• Usamos as variáveis $font-family-base, $font-size-base e $line-height-base como nossa base
tipografica aplicada ao <body>;
• Configuramos as cores de links globalmente, através da $link-color e aplicamos underlines só em
estado :hover;
• Utilizamos a variável $body-bg para colocar background-color no <body> (#fff é o valor padrão).
Estes estilos podem ser encontrados dentro do arquivo _reboot.scss e a variáveis globais são declaradas
em _variables.scss. Tenha certeza de configurar $font-size-base usando rem.
Cabeçalhos
Todos cabeçalhos HTML (<h1> até <h6>) estão disponíveis.
Cabeçalho Exemplo
Copy
<h1>h1. Cabeçalho Bootstrap</h1>
As classes de .h1 até .h6 também estão disponíveis, para quando você quiser usar os estilos de um
cabeçalho mas não pode usar os elementos em si.
h1. Cabeçalho Bootstrap
Copy
<p class="h1">h1. Cabeçalho Bootstrap</p>
Customizando cabeçalhos
Use as classes utilitárias para recriar aquele cabeçalho secundário do Bootstrap 3.
Exemplo de cabeçalho chique Com texto secundário e mais apagado

Copy
<h3>
Exemplo de cabeçalho chique
<small class="text-muted">Com texto secundário e mais apagado</small>
</h3>
Classes display para cabeçalhos

Elementos de cabeçalhos tradicionais são desenvolvidos para funcionar melhor no miolo do conteúdo da
página. Quando você precisa que um cabeçalho se destaque, considere usar uma classe display (provê
cabeçalhos maiores e levemente mais estilizados).
Display 1
Display 2
Display 3
Display 4
Copy
<h1 class="display-1">Display 1</h1>
Parágrafo destaque
Faça um parágrafo se destacar, adicionando a classe .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Copy
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo
luctus.
</p>
Elementos de texto inline

Estilos para elementos inline HTML5, mais comuns.
Você pode usar a tag _mark_ para destacar textos.
Esta linha de texto deve ser tratada com um texto deletado.
Esta linha de texto deve ser tratada como algo impreciso.
Esta linha de texto deve ser tratada como uma adição ao documento.
Esta linha de texto vai ser renderizada com underline.

Esta linha deve ser usada para letras com tamanhos menores.
Esta linha renderiza em negrito.
Esta linha renderiza em itálico.
Copy
<p>Você pode usar a tag _mark_ para <mark>destacar</mark> textos.</p>
<p><del>Esta linha de texto deve ser tratada com um texto deletado.</del></p>
<p><s>Esta linha de texto deve ser tratada como algo impreciso.</s></p>
<p><ins>Esta linha de texto deve ser tratada como uma adição ao documento.</ins></p>
<p><u>Esta linha de texto vai ser renderizada com underline.</u></p>
<p><small>Esta linha deve ser usada para letras com tamanhos menores.</small></p>
<p><strong>Esta linha renderiza em negrito.</strong></p>
<p><em>Esta linha renderiza em itálico.</em></p>
As classes .mark e .small também são úteis para aplicar os mesmos estilos que os
elementos <mark> e <small>, sem precisar usar implicações semânticas que viriam com as tags.
Apesar de não ter sido demonstrado, sinta-se livre para usar as tags <b> e <i>, no HTML. O <b> é suposto a
destacar palavras ou frases sem importância adicional, enquanto o <i> é mais para vozes, termos técnicos e
etc.
Utilitários de texto
Altere alinhamento de texto, transform, estilos, espessura e cor com nossos utilitários de texto e utilitários de
cores.
Abreviações
Implementação customizada do elemento HTML <abbr> (para abreviações e acrônimos), o qual mostra
versões expandidas no estado hover. Abreviações tem uma underline padrão e cursor de ajuda, para criar um
contexto mais rico em estado hover e para usuários de tecnologias assistivas.
Use .initialism em uma abreviação, para uma font-size um pouquinho menor.
attr
HTML
Copy
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Bloco de citação
Para citar blocos de conteúdos de outras fontes, dentro do seu documento, use <blockquote
class="blockquote"> em volta de qualquer conteúdo HTML.
Copy
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.</p>
</blockquote>
Declarando a fonte
Use <footer class="blockquote-footer"> para identificar uma fonte. Envolva o nome da fonte do trabalho
usando <cite>.
Alguém famoso na Título da fonte

Copy
<blockquote class="blockquote">
ante.</p>
<footer class="blockquote-footer">Alguém famoso na <cite title="Título da fonte">Título da
fonte</cite></footer>
</blockquote>
Alinhamento
Use utilitários de texto o quanto seja necessário, para alterar o alinhamento de seu bloco de citação.

Copy
<blockquote class="blockquote text-center">
ante.</p>
</blockquote>

Copy
<blockquote class="blockquote text-right">
ante.</p>
</blockquote>
Listas
Sem estilos
Remova o list-style padrão e margem à esquerda, nos itens da lista (apenas funciona em filhos
imediatos). Isso só se aplica a itens que são filhos imediatos, significando que você irá precisar usar a
classe em outras listas aninhadas.
• Lorem ipsum dolor sit amet

• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
o Phasellus iaculis neque
o Purus sodales ultricies
o Vestibulum laoreet porttitor sem
o Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem
Copy
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
Inline
Remova as marcações de uma lista e adicione uma leve margem com uma combinação de duas
classes: .list-inline e .list-inline-item.
• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat
Copy
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
Alinhamento de listas de descrições
Alinhe termos e descrições, horizontalmente, usando nossas classes do nosso sistema de grid(ou mixins
semânticos). Para termos mais longos, você pode usar a classe .text-truncatepara truncar o texto em elipse,
opcionalmente.
Listas de descrições
Uma lista de descrições é perfeita para definir 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.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
justo sit amet risus.
Aninhamento
Lista de defiinições aninhada
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Copy
<dl class="row">
<dt class="col-sm-3">Listas de descrições</dt>
<dd class="col-sm-9">Uma lista de descrições é perfeita para definir termos.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>

<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>

<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Aninhamento</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Lista de defiinições aninhada</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
Tipografia responsiva
Tipografia responsiva se refere a escala de textos e componentes, simplesmente ajustando a font-size dos
elementos raizes, usando várias media queries. Bootstrap não faz isso por você, mas é muito fácil se você
quiser.
Abaixo vai um exemplo disso, na prática. Escolha qualquer font-size e media querie que quiser.
Copy
html {
font-size: 1rem;
}
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
html {
font-size: 1.6rem;
}
}
Código
Documentação e exemplos para mostrar blocos de código em linha ou multi-linhas, usando o Bootstrap.
Código em linha
Envolte pedaços de códigos (aqueles com única linha), usando o elemento <code>. Se assegure de usar
escape, nos colchetes do HTML.
Por exemplo, isso deve ser envolto em uma linha: <section>.
Copy
Por exemplo, isso deve ser envolto em uma linha: <code><section></code>.
Bloco de códigos
Use tags <pre> para diversas linhas de código. Mais uma vez: tenha certeza de usar escape em qualquer
colchete HTML, para que tudo seja renderizado adequadamente. Opcionalmente, você pode adicionar a
classe .pre-scrollable, a qual vai usar max-heightcom valor de 340px e criar uma barra de rolagem vertical.
<p>Exemplo de texto aqui...</p>

<p>Outro exemplo de texto aqui...</p>
Copy
<pre><code><p>Exemplo de texto aqui...</p>
<p>Outro exemplo de texto aqui...</p>
</code></pre>
Variáveis
Para indicar variáveis, use a tag <var>.
y = mx + b
Copy
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Input do usuário
Use o <kbd> para indicar um input típico de entrada via teclado.
Para trocar diretórios, digite cd seguido pelo nome do diretório.
Para editar configurações, pressione ctrl + ,
Copy
Para trocar diretórios, digite <kbd>cd</kbd> seguido pelo nome do diretório.<br>
Para editar configurações, pressione <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Amostra de output
Para indicar uma amostra output de um programa, use a tag <samp>.
Este texto deve ser tratado como uma amostra output de um programa de computadores.
Copy
<samp>Este texto deve ser tratado como uma amostra output de um programa de computadores.</samp>
Imagens
Documentação e exemplos para tornar imagens responsivas (nunca crescem mais que os elementos pais) e
adicionar estilos leves a elas, através de classes.
Imagens responsivas
Imagens no Bootstrap são feitas responsivas com a classe .img-fluid. As declarações max-width:
100%; e height: auto; são aplicadas a imagem, de modo que ela escale junto ao elemento pai.
Copy
<img src="..." class="img-fluid" alt="Imagem responsiva">
Imagens SVG e o IE10
No Internet Explorer 10, imagens SVG com .img-fluid são dimensionadas desproporcionalmente. Para
consertar isso, adicione width: 100% \9; quando necessário. Isso conserta dimensões impróprias para outros
formatos de imagens, então, o Bootstrap não aplica isso automaticamente.
Thumbnails
Além de nossos utilitários border-radius, você pode usar .img-thumbnail para dar uma borda arredondada
de 1px a uma imagem.
Copy
<img src="..." alt="..." class="img-thumbnail">
Alinhando imagens
Alinhe imagens com as classes utilitárias de float ou classes para alinhamento de texto. Imagens de block-
level podem ser centralizadas usando a classe utilitária de margem .mx-auto.
Copy
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Copy
<img src="..." class="rounded mx-auto d-block" alt="...">
Copy
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Elemento <picture>
Se você está usando o elemento <picture> para especificar várias fontes (<source>) para uma imagem
específica, se assegure de adicionar as classes .img- para as <img> e não para as tags <picture>.
Copy
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Tabelas
Documentação e exemplos para inclusão de diferentes tipos de tabelas (de acordo com sua necessidade de
plugins JavaScript), no Bootstrap.
Exemplos
Devido ao abrangente uso de tabelas em widgets de terceiros, como calendários e selecionadores da datas,
nós desenvolvemos nossas tabelas de forma que sejam alternativas. Basta adicionar a classe .table em
qualquer <table>, então, customize-a mais usando nossos estilos de costumização ou as diversas classes
modificadoras.
Usando a marcação mais básica para tabelas, assim é como tabelas usando .table irão parecer, no
Bootstrap. Todos os estilos de tabelas são herdados no Bootstrap 4, significando que qualquer tabela
aninhada vai se comportar do mesmo modo que seus pais.
# Primeiro Último Nickname
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Copy
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Primeiro</th>
<th scope="col">Último</th>
<th scope="col">Nickname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Você também pode inverter as cores (texto claro em background escuro), usando a class .table-dark.
1 Mark Otto @mdo
Copy
<table class="table table-dark">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Opções de cabeçalhos para tabelas

Similar as tabelas comuns e tabelas escuras, use as classes modificadoras .thead-light ou thead-dark para
fazer o <thead> ser mais claro ou escuro.
1 Mark Otto @mdo
1 Mark Otto @mdo
Copy
<thead class="thead-dark">
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<thead class="thead-light">
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Linhas zebradas
Use .table-striped para adicionar listras zebradas para qualquer <tbody>.
1 Mark Otto @mdo
Copy
<table class="table table-striped">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
1 Mark Otto @mdo
Copy
<table class="table table-striped table-dark">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tabela com bordas

Use .table-bordered para colocar bordas em todos os lados da tabela e suas células.
1 Mark Otto @mdo

Copy
<table class="table table-bordered">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
1 Mark Otto @mdo
Copy
<table class="table table-bordered table-dark">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tabela sem bordas

Use .table-borderless para ter uma tabela sem bordas.
1 Mark Otto @mdo
Copy
<table class="table table-borderless">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless também pode ser usada em tabelas mais escuras.
1 Mark Otto @mdo
Copy
<table class="table table-borderless table-dark">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
Linhas com efeito hover

Utilize .table-hover para ativar um efeito hover, nas linhas dentro do <tbody>.
1 Mark Otto @mdo
Copy
<table class="table table-hover">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
1 Mark Otto @mdo
Copy
<table class="table table-hover table-dark">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tabela pequena
Use .table-sm para fazer com que as tabelas fiquem mais compactas, já que o padding das células serão
cortados ao meio.
1 Mark Otto @mdo
Copy
<table class="table table-sm">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
1 Mark Otto @mdo
Copy
<table class="table table-sm table-dark">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>@twitter</td>
</tr>
</tbody>
</table>
Classes contextuais
Use classes contextuais para colorir linhas ou células da tabela.
Classe Cabeçalho Cabeçalho
Ativo Célula Célula
Padrão Célula Célula
Primary Célula Célula
Secondary Célula Célula
Success Célula Célula
Danger Célula Célula
Warning Célula Célula
Info Célula Célula
Light Célula Célula
Dark Célula Célula
Copy

<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>


<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Variantes de background não estão disponíveis em tabelas escuras, mas você pode usar utilitários de texto
ou background para atingir estilos similares.
# Cabeçalho Cabeçalho
1 Célula Célula
2 Célula Célula
3 Célula Célula
4 Célula Célula
5 Célula Célula
6 Célula Célula
# Cabeçalho Cabeçalho
7 Célula Célula
8 Célula Célula
9 Célula Célula
Copy

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


<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Transmitindo significado a tecnologias assistivas
Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para
usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor
é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos
extras escondidos com a classe .sr-class.
Crie tabelas responsivas envolvendo qualquer .table com .table-responsive{-sm|-md|-lg|-xl}, fazendo a
tabela ter rolagem horizontal em cada breakpoint de max-width, por volta de (não extamente) 576px, 768px,
992px e 1120px, respectivamente.
Perceba: já que browsers não suportam, atualmente, range context queries, nós contornamos as limitações
dos prefixos min- e max- e viewports com larguras fracionais (pode ocorrer em algumas circunstâncias, em
dispositivos de alta dpi), usando valores com precisão maior para estas comparações.
Legendas
Um <caption> funciona como um cabeçalho para a tabela. Isso ajuda usários de screen readers achar uma
tabela e descobrir sobre oquê é e decidir se eles querem lê-la.
Lista de usuários
1 Mark Otto @mdo
Copy
<caption>Lista de usuários</caption>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Tabelas responsivas
Tabelas responsivas permitem tabelas serem roladas horizontalmente, com facilidade. Faça com que
qualquer tabela seja responsiva em todas viewports, simplesmente, envolvendo um .table com .table-
responsive. Além disso, você pode escolher um breakpoint máximo para a tabela ser responsiva, usando a
classe .table-responsive{-sm|-md|-lg|-xl}.
Corte vertical
Tabelas responsivas usam overflow-y: hidden, declaração a qual corta qualquer conteúdo que vai além da
borda de cima ou de baixo, numa tabela. Em particular, isso pode acabar cortando menus dropdowns e
outros widgets de terceiros.
Sempre responsiva
Use .table-responsive para fazer que tabelas rolem horizontalmente, através de todos dispositivos.
# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cab
1 Célula Célula Célula Célula Célula Célula Célula Célula
Copy
<div class="table-responsive">
...
</table>
</div>
Breakpoint específico
Use .table-responsive{-sm|-md|-lg|-xl} sempre que necessário, para criar tabelas responsivas em um
breakpoint específico. Desse breakpoint pra cima, a tabela vai se comportar normalmente e não vai rolar
horizontalmente.
These tables may appear broken until their responsive styles apply at specific viewport widths.
# Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Ca
Copy
<div class="table-responsive-sm">
...
</table>
</div>
Copy
<div class="table-responsive-md">
...
</table>
</div>
Copy
<div class="table-responsive-lg">
...
</table>
</div>
Copy
<div class="table-responsive-xl">
...
</table>
</div>
Figuras
Documentação e exemplos para mostrar imagens e textos relacionados usando o componente figure, no
Bootstrap.
Start sending beautiful transactional email in minutes with Postmark.ads via Carbon
Sempre que você precisar mostrar algum tipo de conteúdo como uma imagem com legenda, considere usar
o <figure>.
Use as classes .figure, .figure-img e .figure-caption para conseguir alguns estilos bases para os elementos
HTML5 <figure> e <figcaption>. Imagens na tag <figure> não possuem tamanhos explícitos, por isso, tenha
certeza de colocar a classe .img-fluid no elemento <img>, para fazer com que ela seja responsiva.
Uma legenda para a imagem acima.
Copy
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="Imagem de um quadrado genérico com
bordas arredondadas, em uma figure.">
<figcaption class="figure-caption">Uma legenda para a imagem acima.</figcaption>
</figure>
Alinhar a legenda de uma figura é fácil com nossos utilitários de textos.
Uma legenda para a imagem acima.
Copy
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="Imagem de um quadrado genérico com
bordas arredondadas, em uma figure.">
<figcaption class="figure-caption text-right">Uma legenda para a imagem acima.</figcaption>
</figure>
Alertas
Apresente mensagens contextuais para ações típicas dos usuários, usando este punhado flexível de
mensagens de alerta.
Exemplos
Alertas estão disponíveis para qualquer tamanho de texto, assim como um botão de dispersão opcional.
Para uma estilização adequada, use uma das oito requeridas classes contextuais (ex: .alert-success). Para
dispersão inline, use o plugin jQuery alerts.
Um simples alerta primary. Olha só!
Um simples alerta secondary. Olha só!
Um simples alerta success. Olha só!
Um simples alerta danger. Olha só!
Um simples alerta warning. Olha só!
Um simples alerta info. Olha só!
Um simples alerta light. Olha só!
Um simples alerta dark. Olha só!
Copy
<div class="alert alert-primary" role="alert">
Um simples alerta primary. Olha só!
</div>
<div class="alert alert-secondary" role="alert">
Um simples alerta secondary. Olha só!
</div>
<div class="alert alert-success" role="alert">
Um simples alerta success. Olha só!
</div>
<div class="alert alert-danger" role="alert">
Um simples alerta danger. Olha só!
</div>
<div class="alert alert-warning" role="alert">
Um simples alerta warning. Olha só!
</div>
<div class="alert alert-info" role="alert">
Um simples alerta info. Olha só!
</div>
<div class="alert alert-light" role="alert">
Um simples alerta light. Olha só!
</div>
<div class="alert alert-dark" role="alert">
Um simples alerta dark. Olha só!
</div>
Cores de links
Use a classe utilitária .alert-link para, rapidamente, conseguir cores de links que combinam com o alerta.
Um simples alerta primary com um link de exemplo. Clique nele, se quiser.
Um simples alerta secondary com um link de exemplo. Clique nele, se quiser.
Um simples alerta success com um link de exemplo. Clique nele, se quiser.
Um simples alerta danger com um link de exemplo. Clique nele, se quiser.
Um simples alerta warning com um link de exemplo. Clique nele, se quiser.
Um simples alerta info com um link de exemplo. Clique nele, se quiser.
Um simples alerta light com um link de exemplo. Clique nele, se quiser.
Um simples alerta dark com um link de exemplo. Clique nele, se quiser.
Copy
<div class="alert alert-primary" role="alert">
Um simples alerta primary com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
<div class="alert alert-secondary" role="alert">
Um simples alerta secondary com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
Um simples alerta success com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
<div class="alert alert-danger" role="alert">
Um simples alerta danger com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
<div class="alert alert-warning" role="alert">
Um simples alerta warning com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
<div class="alert alert-info" role="alert">
Um simples alerta info com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
<div class="alert alert-light" role="alert">
Um simples alerta light com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
<div class="alert alert-dark" role="alert">
Um simples alerta dark com <a href="#" class="alert-link">um link de exemplo</a>. Clique nele, se
quiser.
</div>
Conteúdo adicional
Alertas também podem conter elementos HTML adicionais como cabeçalhos, parágrafos e divisores.
Muito bem!
Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho pra
você conseguir ver como o espaçamento dentro de um alerta funciona.
Sempre que precisar, use utilitários de margem para manter as coisas perfeitas.
Copy
<h4 class="alert-heading">Muito bem!</h4>
<p>Aêêê! Você conseguiu ler essa mensagem de alerta. Esse texto vai ter quer se extender um pouquinho
pra você conseguir ver como o espaçamento dentro de um alerta funciona.</p>
<hr>
<p class="mb-0">Sempre que precisar, use utilitários de margem para manter as coisas perfeitas.</p>
</div>
Dispersão
Usando o plugin JavaScript de alerta, é possível dispersar qualquer alerta inline, dessa forma:
• Se assegure de carregar o plugin de alerta ou o JavaScript Bootstrap compilado;

• Se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js;
o A versão compilada já inclui ele.
• Adicione um botão de dispersão e a classe .alert-dismissible, a qual adiciona padding extra a direita do
alerta e posiciona o botão .close;
• No botão de dispersão, use o atributo data-dismiss="alert", o qual aciona a funcionalidade JavaScript;
o Tenha certeza de usar o elemento <button> com isso, para que ele se comporte em todos os
dispositivos, adequadamente.
• Para animar alertas quando dispersá-los, se assegure de usar as classes .fade e .show.
Você pode ver isso, em ação, com essa demonstração em tempo real:
Oloco, meu! Olha esse alerta animado, como é chique!×
Copy
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Oloco, meu!</strong> Olha esse alerta animado, como é chique!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Comportamento JavaScript
Acionadores
Ative a dispersão de um alerta, usando JavaScript:
Copy
$('.alert').alert()
Também é possível, usando atributos data em um botão dentro do alerta, como vemos abaixo:
Copy
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
</button>
Perceba que dispersar um alerta irá removê-lo do DOM.
Métodos
Método Descrição
$().alert() Faz um alerta esperar por eventos de cliques em elementos descendentes, os quais possuem o
atributo data-dismiss="alert" (não é necessário, quando usando a auto-inicialização do data-a
$().alert('close') Fecha um alerta, removendo-o do DOM. Se as classes .fade e .show estão presentes no element
alerta vai esmaecer antes de ser removido.
$().alert('dispose') Destroi o alerta de um elemento.
Copy
$(".alert").alert('close')
Eventos
O plugin de alerta do Bootstrap usa alguns eventos para se ligar com a funcionalidade de alerta.
Evento Descrição
close.bs.alert Este evento é acionado, imediadatamente, quando a instância do método close é invocada.
closed.bs.alert Este evento é acionado quando o alerta é fechado (vai esperar a transição CSS se finalizada).
Copy
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})
Badges
Documentação e exemplos sobre os badges, nosso pequeno componente para contagem e rótulos.
Exemplo
Os badges escalam para combinar com o tamanho do elemento pai imediato, usando font-size relativa e
unidade em.
Cabeçalho exemplo Novo

Copy
<h1>Cabeçalho exemplo <span class="badge badge-secondary">Novo</span></h1>
Badges podem ser usados como parte de links ou botões para realizar contagem.
Notificações 4
Copy
<button type="button" class="btn btn-primary">
Notificações <span class="badge badge-light">4</span>
</button>
Perceba que dependendo do uso, badges podem ser confusos para usuários de leitores de telas e
tecnologias assistivas similares. Apesar do estilo dos badges serem intuitivos, esses usuários vão ser
apresentados só ao conteúdo contido neles. Por isso, dependendo da situação, esses badges podem parecer
palavras ou números quaisquer ao final da frase, link ou botão.
A não ser que o contexto esteja claro (como no exemplo “Notificações”, onde é entendido que o 4 é o
número de notificações), considere criar contexto com um texto adicional escondido visualmente.
Perfil 9Mensagens não lidas
Copy
<button type="button" class="btn btn-primary">
Perfil <span class="badge badge-light">9</span>
<span class="sr-only">Mensagens não lidas</span>
</button>
Variações contextuais
Adicione qualquer uma das classes modificadoras mencionadas abaixo para mudar a aparência de um
badge.
Primary Secondary Success Danger Warning Info Light Dark
Copy
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Badges em pílulas
Use a classe modificadora .badge-pill para fazer com que os badges fiquem mais arredondados (border-
radius maior e padding horizontal adicional). É útil se você precisa dos badges da v3.
Copy
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Links
Usando as classes contextuais .badge-*, em um elemento <a>, rapidamente, consiga badges acionáveis com
estados hover e focus.
Copy
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
Breadcrumb
Indica a localização da página atual, dentro de uma hierarquia de navegação e, automaticamente, coloca
separadores usando CSS.
Do more with Droplets, the scalable compute platform.ads via Carbon
Exemplo
1. Home
1. Home
2. Biblioteca
1. Home
2. Biblioteca
3. Dados
Copy
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Biblioteca</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
<li class="breadcrumb-item active" aria-current="page">Dados</li>
</ol>
</nav>
Como escolher o separador

Separadores são, automaticamente, adicionados com CSS usando ::before e content. Você pode escolhê-
los, alterando a variável $breadcrumb-divider. A função quote é necessária para gerar as aspas ao redor de
uma string, então, se você quer > como um separador, pode usar isso:
Copy
$breadcrumb-divider: quote(">");
Também é possível usar um ícone SVG base64 embutido:
Copy
$breadcrumb-divider:
url(Dados:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlna
HQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+P
C9zdmc+);
O separador pode ser removido definindo o valor de $breadcrumb-divider como none:
Copy
$breadcrumb-divider: none;
Acessibilidade
Já que breadcrumbs provém uma navegação, é uma boa ideia adicionar um atributo significativo
como aria-label="breadcrumb" para descrever o tipo de navegação provida no elemento <nav>, assim como
aplicar um aria-current="page" ao último item para indicar que ele representa a atual página.
Para mais informações, veja: WAI-ARIA Authoring Practices for the breadcrumb pattern.
Botões
Use os botões Bootstrap personalizados para ações em formulários, diálogos e outras coisas. Lembrando
que esse componente tem suporte a escolha de tamanhos, estados e muito mais.
Exemplos
Bootstrap possui vários estilos de botões pré-definidos, cada um com seu próprosito semântico e outros
recursos extras para mais controle.
Primary Secondary Success Danger Warning Info Light Dark Link
Copy
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button tags
A classe .btn foi desenhada para ser usada com o elemento <button>. No entanto, você também pode usar
esta classe nos elementos <a> ou <input>, apesar de alguns browser aplicarem um visual um pouco
diferente.
Quando usando classes de botão em elementos <a> que funcionam como gatilhos in-page (igual aos
conteúdos colapsáveis), invés de link para novas páginas ou seções dentro da página atual, estas âncoras
devem receber role="button" para expliciar seu propósito a tecnologias assistivas, como leitores de telas.
Link Botão
Copy
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Botão</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Botões outline
Precisa de um botão, mas sem cor de backround? Substitua as classes modificadoras padrões pelas .btn-
outline-* que removem todas as imagens de background e cores, em qualquer botão.
Copy
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Tamanhos
Botões grandes ou pequenos? Use .btn-lg ou .btn-sm para tamanhos alternativos ao padrão.
Botão grande Botão grande
Copy
<button type="button" class="btn btn-primary btn-lg">Botão grande</button>
<button type="button" class="btn btn-secondary btn-lg">Botão grande</button>
Botão pequeno Botão pequeno
Copy
<button type="button" class="btn btn-primary btn-sm">Botão pequeno</button>
<button type="button" class="btn btn-secondary btn-sm">Botão pequeno</button>
Crie botões block-level (ocupam toda a largura do elemento pai), usando a classe .btn-block.
Botão block-levelBotão block-level
Copy
<button type="button" class="btn btn-primary btn-lg btn-block">Botão block-level</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Botão block-level</button>
Estado ativo
Os botões parecem pressionados (background, borda e sombra internas mais escuras), quando estão em
estado ativo. Não há necessidade de usar a classe no <button>, porque eles usam uma pseudo-
classe. No entanto, você ainda pode forçar a aparência de estado ativo com a classe .active e incuir o
atributo aria-pressed="true", se precisar.
Link primário Link
Copy
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link primário</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
Estado desativado
Faça botões parecerem inativos, usando o atributo booleano disabled em qualquer elemento <button>.
Botão primário Botão
Copy
<button type="button" class="btn btn-lg btn-primary" disabled>Botão primário</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Botão</button>
Botões desativados usando o elemento <a> se comportam um pouco diferente:
• O elemento <a> não suport o atributo disabled, então, você deve usar a classe .disabled para fazê-lo parecer
desativado, visualmente;
• Alguns estilos (que ainda não são bem suportados) são usados para desativarem todos os pointer-events,
em botões âncora;
o Em browsers que suportam essa propriedade, você não verá o cursor desativado.
• Botões desativados devem ter o atributo aria-disabled="true" para indicar o estado do elemento para
tecnologias assistivas.
Link primário Link

Copy
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-
disabled="true">Link primário</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-
disabled="true">Link</a>
Problemas com a funcionalidade de link
A class .disabled usa pointer-events: none para tentar desativar a funcionalidade de link do <a>, mas esta
propriedade CSS ainda não foi padronizada. Além disso, até em navegadores que suportam pointer-events:
none, a navegação por teclado continua inatingida, significando que tanto usuários com ou sem tecnologias
assistivas ainda conseguirão ativar estes links. Portanto, para evitar isso, use o atributo tabindex="-1" (evita
que tenham foco) nestes links e use seu próprio JavaScript para desativar as funcionalidades.
Plugin de botão
Faça mais com botões. Controle estados ou crie grupos de botões, para mais componentes como toolbars.
Alternar estados
Use data-toggle="button" para alternar o estado ativo do botão. Se você pré-ativar o botão, deve usar a
classe .active e o atributo aria-pressed="true", no <button>.
Única alternância
Copy
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false"
autocomplete="off">
Única alternância
</button>
Botões checkbox e radio
Os estilos do .button Bootstrap podem seren usado em outros elementos, como <label>para se ter um
botão no estilo checkbox ou radio com alternância. Use data-toggle="buttons" em um .btn-group para
estilizar o os inputs dentro de seus botões. Perceba que você pode criar botões com apenas um input ou
grupos deles.
O estado checado destes botões só é atualizado através do evento de clique, no botão. Se você usar
outro método para atualizar o input (ex: <input type="reset"> ou aplicando a propriedade checked,
manualmente), vai precisar anternar a classe .active da <label>, manualmente.
Note que botões pré-checados requerem que você coloque a classe .active, manualmente, no input
do <label>.
Checado
Copy
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checado
</label>
</div>
Ativo Radio Radio
Copy
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Ativo
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Métodos
Método Descrição
$().button('toggle') Alterna o estado. Dá ao botão uma aparência como se estivesse ativado.
$().button('dispose') Destroi o botão de um elemento.
Grupos de botões
Agrupe vários botões em uma única linha e tune eles com JavaScript, usando este componente.
Exemplo básico
Envolva vários botões (que possuem .btn) em um elemento com .btn-group. Adicione um comportamento
JavaScript opcional de radio ou checkbox com nosso plugin buttons.
EsquerdaMeioDireita
Copy
<div class="btn-group" role="group" aria-label="Exemplo básico">
<button type="button" class="btn btn-secondary">Esquerda</button>
<button type="button" class="btn btn-secondary">Meio</button>
<button type="button" class="btn btn-secondary">Direita</button>
</div>
Certifique-se de usar o role correto e prover uma label
Para que uma tecnologia assistiva (como leitores de telas) consiga entender que está lidando com uma série
de botões agrupados, um atributo role, apropriado, deve ser usado. Para grupos de botões, o atributo
poder ser role="group". Enquanto que toolbars devem usar role="toolbar".
Além disso, grupos de botões e toolbars devem receber uma label, já que a maioria das tecnologias
assistivas não vão fazer isso, independente da presença do atributo role. Nos exemplos mostrados aqui,
usamos aria-label, mas alternativas como aria-labelledby também podem serem usadas.
Toolbars
Combine grupos de botões para criar uma toolbar e ter um componente mais complexo. Use classes
utilitárias, sempre que precisar, para espaçar grupos, botões e outras coisas.
1234
567
Copy
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar com grupos de botões">
<div class="btn-group mr-2" role="group" aria-label="Primeiro grupo">
<button type="button" class="btn btn-secondary">1</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Segundo grupo">
</div>
<div class="btn-group" role="group" aria-label="Terceiro grupo">
</div>
</div>
Sinta-se livre para usar uma mistura de grupos de inputs e botões, em suas toolbars. Similar ao exemplo
acima, você vai precisar de alguns utilitários para espaçar as coisas, provavelmente.
1234
1234
@
Copy
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar com grupos de botões">
<div class="btn-group mr-2" role="group" aria-label="Primeiro grupo">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Exemplo de grupo de input" aria-label="Exemplo
de grupo de input" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar com grupos de

botões">
<div class="btn-group" role="group" aria-label="Primeiro grupo">
</div>
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Exemplo de grupo de input" aria-label="Exemplo
de grupo de input" aria-describedby="btnGroupAddon2">
</div>
</div>
Dimensionamento
Invés de aplicar classes para dimensionamento em cada botão de um grupo, basta adicionar .btn-group-
* para cada .btn-group, incluindo cada um quando aninhar vários grupos.
EsquerdaMeioDireita
EsquerdaMeioDireita
EsquerdaMeioDireita
Copy
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
Aninhamento
Coloque um .btn-group dentro de outro .btn-group quando quiser menus dropdowns misturados com
vários botões.
12
Dropdown
Copy
<div class="btn-group" role="group" aria-label="Grupo de botões com dropdown aninhado">
<div class="btn-group" role="group">

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Link dropdown</a>
<a class="dropdown-item" href="#">Link dropdown</a>
</div>
</div>
</div>
Variação vertical
Faça com que uma série de botões apareça verticalmente, invés de horizontalmente. Botões dropdowns
divididos não são suportados, nesse caso.
BotãoBotãoBotãoBotãoBotãoBotão
BotãoBotão
Dropdown
BotãoBotão
Dropdown
Dropdown
Dropdown
Copy
<div class="btn-group-vertical">
...
</div>
Cards
Os cards Bootstrap proporcionam um container de conteúdo flexível e extensível com múltiplos variantes e
opções.
Sobre
Um card é um container de conteúdo flexível e extensível. Ele tem opções para cabeçalhos e rodapés, uma
larga variedade de conteúdo, cores de background contextuais e opções de display poderosas. Se você é
familiarizado com Bootstrap 3, saiba que os cards substituem nossos antigos panels, wells e thumbnails.
Uma funcionalidade similar a destes componentes está disponível, usando classes modificadoras para cards.
Exemplo
Cards são feitos com menos marcação HTML e estilos possível, mas ainda assim conseguem entregar
bastante controle e personalização. Feitos com flexbox, oferecem fácil alinhamento e combinação com
outros componentes. Por padrão, não possuem margin, então, use utilitários de espaçamento, se necessário.
Abaixo, tem um exemplo de um card básico com conteúdo misto e largura fixa. Cards não possuem largura
fixa, inicialmente, então, eles vão preencher toda a largura de seu elemento pai, naturalmente. Isso é
fácilmente personalizado com nossas várias opções de tamanhos.
Título do card
Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.
Visitar
Copy
<div class="card" style="width: 18rem;">
<img class="card-img-top" src=".../100px180/" alt="Imagem de capa do card">
<div class="card-body">
<h5 class="card-title">Título do card</h5>
<p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o
conteúdo do card.</p>
<a href="#" class="btn btn-primary">Visitar</a>
</div>
</div>
Tipos de conteúdo
Cards suportam uma larga variedade de conteúdos, incluindo imagens, texto, grupo de listas, links e muito
mais. Abaixo, temos oquê é suportado.
Body
A base de um card é o .card-body. Use ele, sempre que precisar de um espaço dentro do card.
Isto é um texto dentro de um card.
Copy
<div class="card">
Isto é um texto dentro de um card.
</div>
</div>
Títulos, textos e cards.
Os títulos dos card são usados adicionando a classe .card-title em uma tag <h*>. Da mesma maneira, links
são adicionados e posicionados próximos um dos outros, colocando .card-link em um elemento <a>.
Subtitulos são criadas usando uma .card-subtitle em uma tag <h*>. Se os itens .card-titlee .card-
subtitle são colocados em um .card-body, os títulos e subtitulos serão alinhados, adequadamente.
Título do card
Subtitulo do card
Link do card Outro link
Copy
<h6 class="card-subtitle mb-2 text-muted">Subtitulo do card</h6>
<a href="#" class="card-link">Link do card</a>
<a href="#" class="card-link">Outro link</a>
</div>
</div>
Imagens
A .card-img-top posiciona uma imagem no topo do card. Com .card-text, textos podem ser adicionados ao
card. O texto dentro do .card-text também pode ser estilizado com as tags HTML padrões.
Copy
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Imagem de capa do card">
</div>
</div>
Grupo e listas
Crie listas de conteúdo em um card, usando um grupo de listas.
• Cras justo odio

• Dapibus ac facilisis in
• Vestibulum at eros
Copy
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Destaque
• Cras justo odio

Copy
<div class="card-header">
Destaque
</div>
</ul>
</div>
Baguncinha
Misture e combine vários tipos de conteúdos para ter o card que precisa. Mostrando abaixo, estão estilos de
imagens, blocos, estilos de textos e grupo de listas, todos dentro de um card com largura fixa.
Título do card
• Cras justo odio

Link do card Outro link
Copy
<img class="card-img-top" src=".../100px180/?text=Image cap" alt="Imagem de capa do card">
</div>
</ul>
<a href="#" class="card-link">Link do card</a>
<a href="#" class="card-link">Outro link</a>
</div>
</div>
Cabeçalho e rodapé
Coloque um cabeçalho e/ou rodapé opcional, dentro de um card.
Destaque
Título especial
Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
Visitar
Copy
<div class="card">
Destaque
</div>
<h5 class="card-title">Título especial</h5>
<p class="card-text">Com suporte a texto embaixo, que funciona como uma introdução a um conteúdo
adicional.</p>
</div>
</div>
Cabeçalhos de cards podem ser estilizados usando .card-header em elementos <h*>.
Destaque
Título especial
Visitar
Copy
<div class="card">
<h5 class="card-header">Destaque</h5>
adicional.</p>
</div>
</div>
Citação
Copy
<div class="card">
Citação
</div>
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
<footer class="blockquote-footer">Alguém famoso em <cite title="Título da fonte">Título da
</blockquote>
</div>
</div>
Destaque
Título especial
Visitar
2 dias atrás
Copy
<div class="card text-center">
Destaque
</div>
adicional.</p>
</div>
<div class="card-footer text-muted">
2 dias atrás
</div>
</div>
Tamanhos
Os cards não recebem nenhuma largura inicial específica, então, eles vão ter 100% da largura do pai, se não
for declarado. Você pode mudar isso, se necessário, usando CSS personalizado, classes grid, mixins grid Sass
ou utilitários.
Usando a marcação do grid
Usando o grid, envolva cards em colunas e rows, o quanto quiser.
Título especial
Visitar
Título especial
Visitar
Copy
<div class="row">
<div class="card">
adicional.</p>
</div>
</div>
</div>
<div class="card">
adicional.</p>
</div>
</div>
</div>
</div>
Usando utilitários
Use nosso punhado de utilitários para dimensionamento e defina a largura de um card, rapidamente.
Título do card
Botão
Título do card
Botão
Copy
<div class="card w-75">
adicional.</p>
<a href="#" class="btn btn-primary">Botão</a>
</div>
</div>
<div class="card w-50">

adicional.</p>
<a href="#" class="btn btn-primary">Botão</a>
</div>
</div>
Usando CSS personalizado
Use CSS personalizado em suas folhas de estilos ou estilos inline para definir a largura.
Título especial
Visitar
Copy
adicional.</p>
</div>
</div>
Alinhamento de texto
Você pode alterar o alinhamento de texto de qualquer card, rapidamente, em seu todo ou partes específicas,
com nossas classes de alinhamento.
Título especial
Visitar
Título especial
Visitar
Título especial
Visitar
Copy
adicional.</p>
</div>
</div>
<div class="card text-center" style="width: 18rem;">

adicional.</p>
</div>
</div>
<div class="card text-right" style="width: 18rem;">

adicional.</p>
</div>
</div>
Navegação
Adicione alguma navegação no cabeçalho do card com os componentes nav do Bootstrap.
• Ativo
• Link
• Desativado
Título especial
Visitar
Copy
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Ativo</a>
</li>
<a class="nav-link" href="#">Link</a>
</li>
<a class="nav-link disabled" href="#">Desativado</a>
</li>
</ul>
</div>
adicional.</p>
</div>
</div>
• Ativo
• Link
• Desativado
Título especial
Visitar
Copy
<ul class="nav nav-pills card-header-pills">
</li>
</li>
</li>
</ul>
</div>
adicional.</p>
</div>
</div>
Imagens
Cards possuem algumas opções para trabalharmos com imagens. Escolha entre anexar “capas com imagens”
no final do card, sobrepor ela com o conteúdo ou, simplesmente, embutir a imagem no card.
Capas com imagens
Semelhante aos cabeçalhos e rodapés, cards podem ter capas com imagens na parte inferior ou superior.
Título do card
Este é um card maior com suporte a texto embaixo, que funciona como uma introdução a um conteúdo
adicional. Este conteúdo é um pouco maior, para demonstração.
Atualizados 3 minutos atrás

Título do card

Copy
<div class="card mb-3">
<p class="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma
introdução a um conteúdo adicional. Este conteúdo é um pouco maior, para demonstração.</p>
<p class="card-text"><small class="text-muted">Atualizados 3 minutos atrás</small></p>
</div>
</div>
<div class="card">
</div>
<img class="card-img-bottom" src=".../100px180/" alt="Imagem de capa do card">
</div>
Sobreposição de imagens
Transforme uma imagem em background de card, sobrepondo o texto do seu card. Dependendo da
imagem, você pode precisar de estilos ou utilitários adicionais.
Título do card

Copy
<div class="card bg-dark text-white">
<img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Imagem do card">
<div class="card-img-overlay">
<p class="card-text">Atualizados 3 minutos atrás</p>
</div>
</div>
Estilos de card
Cards possuem várias opções para customizar seus backgrounds, bordas e cores.
Background e cor
Use utilitários de texto e background para mudar a aparência do card.
Cabeçalho
Título de Card Primary

Cabeçalho
Título de Card Secondary

Cabeçalho
Título de Card Success

Cabeçalho
Título de Card Danger

Cabeçalho
Título de Card Warning

Cabeçalho
Título de Card Info

Cabeçalho
Título de Card Light

Cabeçalho
Título de Card Dark

Copy
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Cabeçalho</div>
<h5 class="card-title">Título de Card Primary</h5>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Secondary</h5>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Success</h5>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Danger</h5>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Warning</h5>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Info</h5>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Light</h5>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Dark</h5>
</div>
</div>
Bordas
Use utilitários de bordas para mudar só a cor das bordas de um card. Perceba que você pode usar as
classes .text-{color} no .card pai ou um subconjunto de cards, como mostrado abaixo.
Cabeçalho
Título de Card Primary

Cabeçalho
Título de Card Secondary

Cabeçalho

Cabeçalho
Título de Card Danger

Cabeçalho
Título de Card Warning

Cabeçalho
Título de Card Info

Cabeçalho
Título de Card Light
Cabeçalho
Título de Card Dark

Copy
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-body text-primary">
<h5 class="card-title">Título de Card Primary</h5>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-body text-secondary">
<h5 class="card-title">Título de Card Secondary</h5>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-body text-success">
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-body text-danger">
<h5 class="card-title">Título de Card Danger</h5>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-body text-warning">
<h5 class="card-title">Título de Card Warning</h5>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-body text-info">
<h5 class="card-title">Título de Card Info</h5>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<h5 class="card-title">Título de Card Light</h5>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-body text-dark">
<h5 class="card-title">Título de Card Dark</h5>
</div>
</div>
Utilitários mixins
Você também pode mudar as bordas no cabeçalho e rodapé do card, como quiser. Ainda pior: pode
remover suas background-color com .bg-transparent.
Cabeçalho

Rodapé
Copy
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Cabeçalho</div>
<div class="card-body text-success">
</div>
<div class="card-footer bg-transparent border-success">Rodapé</div>
</div>
Layout do card
Além da estilização do conteúdo dentro dos cards, Bootstrap possui algumas opções para a criação de
vários cards. No momento, estas opções de layout ainda não são responsivas.
Grupo de cards
Use grupo de cards para renderizá-los como um único elemento anexado com largura e altura igual. Grupo
de cards usam display: flex; para conseguir seus tamanhos adequados.
Título do card
Título do card
Este é um card com suporte a texto embaixo, que funciona como uma introdução a um conteúdo adicional.
Título do card
adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a altura igual, em ação.

Copy
<div class="card-group">
<div class="card">
</div>
</div>
<div class="card">
<p class="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução
a um conteúdo adicional.</p>
</div>
</div>
<div class="card">
introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para mostrar a
altura igual, em ação.</p>
</div>
</div>
</div>
Quando usar grupo de cards com rodapé, seus conteúdos vão se alinhar automaticamente.
Título do card
Título do card
Título do card
Copy
<div class="card-group">
<div class="card">
</div>
<div class="card-footer">
<small class="text-muted">Atualizados 3 minutos atrás</small>
</div>
</div>
<div class="card">
</div>
</div>
</div>
<div class="card">
</div>
</div>
</div>
</div>
Card decks
Precisa de um conjunto de cards com larguras e alturas iguais, mas sem que estejam interligados? Use os
card decks.
Título do card
Este é um card mais longo com suporte a texto embaixo, que funciona como uma introdução a um
conteúdo adicional. Este conteúdo é um pouco maior.
Título do card
Título do card

Copy
<div class="card-deck">
<div class="card">
<p class="card-text">Este é um card mais longo com suporte a texto embaixo, que funciona como uma
introdução a um conteúdo adicional. Este conteúdo é um pouco maior.</p>
</div>
</div>
<div class="card">
</div>
</div>
<div class="card">
</div>
</div>
</div>
Assim como os grupos de cards, rodapés de cards nos decks vão se alinhar, automaticamente.
Título do card
Título do card
Título do card
Copy
<div class="card-deck">
<div class="card">
</div>
</div>
</div>
<div class="card">
</div>
</div>
</div>
<div class="card">
</div>
</div>
</div>
</div>
Colunas de cards
Cards podem ser organizados de uma maneira parecida com as colunas Masonry, apenas com CSS e
envoltos em uma .card-column. Eles são feitos com propriedades CSS column, invés de flexbox, para fácil
alinhamento. Além do mais, são orientados de cima para baixo, da esquerda para direita.
Atenção! Sua experiência com colunas de cards pode variar. Para evitar cards bugando nas colunas,
devemos defini-los como display: inline-block, já que column-break-inside: avoid ainda não é uma
solução infalível.
Título do card que quebra em uma nova linha

Este é um card mais longo com suporte a texto embaixo, que funciona como uma introdução a um
conteúdo adicional. Este conteúdo é um pouco maior.
Alguém famoso emTítulo da fonte
Título do card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Título do card
Título do card

Copy
<div class="card-columns">
<div class="card">
<h5 class="card-title">Título do card que quebra em uma nova linha</h5>
<p class="card-text">Este é um card mais longo com suporte a texto embaixo, que funciona como uma
introdução a um conteúdo adicional. Este conteúdo é um pouco maior.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
<footer class="blockquote-footer">
<small class="text-muted">
Alguém famoso em <cite title="Título da fonte">Título da fonte</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<small>
</small>
</footer>
</blockquote>
</div>
</div>
</div>
<div class="card">
<img class="card-img" src=".../100px260/" alt="Imagem do card">
</div>
<div class="card p-3 text-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small class="text-muted">
</small>
</footer>
</blockquote>
</div>
<div class="card">
</div>
</div>
</div>
Colunas de cards também podem ser extendidas e customizadas com algum código personalizado. Abaixo,
vemos uma extensão da classe .card-columns usando o mesmo CSS que usamos para gerar uma graduação
responsiva de alteração do número de colunas.
Copy
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}
Carousel
Um componente de slideshow para fazer um giro através de elementos (imagens ou slides de texto), como
se fosse um carrosel.
Como funciona
O carousel é um slideshow para fazer um giro em vários coteúdos, construído com CSS 3D transforms e um
pouco de JavaScript. Ele funciona com o uso de imagens, texto ou marcação personalizada. Também possui
suporte para controles anterior, próximo e indicadores.
Nos navegadores onde a API Page Visibility é suportada, o carousel vai evitar deslizar quando a página não
está visível para o usuário (como quando o browser está inativo, janela minimizada, etc).
Por favor, esteja atento que carousels aninhados não são suportados e não são, geralmente, amigáveis aos
padrões de acessibilidades.
Por último, se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js.
Exemplo
Carousels não normalizam dimensões, automaticamente. Assim, você pode precisar usar utilitários adicionais
ou estilos personalizados para dimensionar conteúdos, apropriadamente. Apesar de carousels suportarem
controles anterior, próximo e indicadores, eles não são obrigatórios, necessariamente. Use e abuse, como
quiser.
A classe .active precisa ser usada em um dos slides, caso contrário, o carousel não ficará visível. Também,
se assegure de definir um único ID no .carousel para os controles opcionais, especialmente, se você está
usando múltiplos carousels em uma página. Elementos de controle e indicador devem ter um atributo data-
target (ou links href) que combinam com o ID do elemento .carousel.
Só slides
Aqui está um carousel só com slides. Perceba a presença do .d-block e .w-100 nas imagens do carousel para
evitar alinhamento padrão de imagens do navegador.
Copy
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=Primeiro Slide"
alt="Primeiro Slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Segundo Slide"
alt="Segundo Slide">
</div>
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Terceiro Slide"
alt="Terceiro Slide">
</div>
</div>
</div>
Com controles
Adicionando os controles anterior e próximo, temos isso:
AnteriorPróximo
Copy
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
Com indicadores
Você também pode adicionar indicadores ao carousel, além dos controles.
AnteriorPróximo
Copy
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
</a>
</div>
Com legenda
Adicione legendas nos seus slides, facilmente, usando o elemento .carousel-caption dentro de
qualquer .carousel-item. Eles podem ser escondidos, facilmente, em qualquer viewport menor, como
mostrado é mostrado abaixo, usando utilitários display. Escondemos eles, inicialmente, com .d-none e
trazemos de volta em dispositivos de tamanho mediano, usando .d-md-block.
Título do primeiro slide

Nulla vitae elit libero, a pharetra augue mollis interdum.
Título do segundo slide
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
AnteriorPróximo
Copy
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
Crossfade
Use .carousel-fade no seu carousel para animar os slides com uma transição esmaecida, invés de um
simples slide.
AnteriorPróximo
Copy
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
</a>
</div>
Modo de uso
Via atributos data
Use atributos data para, facilmente, controlar a posição do carousel. O data-slide aceita as palavras-
chaves prev ou next, as quais alteram a posição do slide, de acordo com sua atual posição. Opcionalmente,
use data-slide-to para passar um index ao carousel, o qual muda a posição do slide para o index específico,
com valores começando em 0 (ex: data-slide-to="2").
O atributo data-ride="carousel" é usado para declarar que o carousel vai começar a animação assim que a
página carregar. Este atributo não pode ser usado em combinação com uma (redundante e
desnecessária) inicialização JavaScript explícita, do mesmo carousel.
Via JavaScript
Invoque o carousel, manualmente, usando:
Copy
$('.carousel').carousel()
Opções
Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, anexe o nome da opção no
prefixo data-, como acontece em data-interval="".
Nome Tipo Padrão Descrição
interval number 5000 A quantidade de tempo de espera entre a troca de slides. Se o valor é false, o ca
não vai girar, automaticamente.
keyboard booleano true Diz se o carousel deve reagir aos eventos de teclado.
pause string | booleano "hover" Se tiver definido como "hover", pausa o ciclo do carousel no
evento mouseenter e volta o ciclo no mouseleave. Se definido para false, p
o mouse sobre o carousel não irá pausá-lo.
Em dispositivos com touch, quando tiver definido o valor "hover", o ciclo

pausar no evento touchend (uma vez que o usuário parar de interagir com
carousel) por dois intervalos, antes de voltar sozinho, novamente. Perceba
isso acontece devido ao comportamento de mouse, mencionado acima.
ride string false Auto inicia o carousel, depois do usuário clicar no primeiro item, manualmente. S
definido com o valor "carousel", o carousel começa assim que carrega.
wrap boolean true Diz se o carousel deve girar continuamente ou ter paradas bruscas.
Métodos
Métodos é transições assíncronas

Todos métodos API são assíncronos e iniciam a transição. Eles retornam ao invocador, assim que a
transição é iniciada, mas que ela finalize. Além do mais, uma chamada de método em um componente
transicionando é ignorada.
Veja nossa documentação JavaScript, para mais informação.

.carousel(options)
Inicializa o carousel com um object de opções opcional e inicia o ciclo dos itens.
Copy
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Gira pelos itens do carousel, da esquerda para direita.
.carousel('pause')
Impede o carousel de girar pelos itens.
.carousel(Número)
Gira o carousel para um frame particular (começa em 0, como uma array). Retorna ao invocador, antes do
item alvo ser mostrado (antes do evento slid.bs.carousel ocorrer).
.carousel('prev')
Gira para o item anterior. Retorna ao invocador, antes do item anterior ser mostrado(antes do
evento slid.bs.carousel ocorrer).
.carousel('next')
Gira para o próximo item. Retorna ao invocador, antes do próximo item ser mostrado(antes do
evento slid.bs.carousel ocorrer).
.carousel('dispose')
Destroi um elemento do carousel.
Eventos
A classe carousel do Bootstrap tem dois evento para serem ligados a funcionalidade do carousel. Ambos
eventos possuem as seguintes propriedades adicionais:
• direction: a direção na qual o carousel está deslizando (tanto "left" quanto "right");
• relatedTarget: o elemento DOM que está sendo deslizado para o lugar do item ativo;
• from: o index do atual item;
• to: o index do próximo item.
Todos eventos carousel são acionados no próprio carousel (acionados no elemento <div
class="carousel">).
Tipo de evento Descrição
slide.bs.carousel Este evento aciona, imediatamente, quando o método slide é invocado.
slid.bs.carousel Este evento é acionado quando o carousel acabou de finalizar sua transição.
Copy
$('#myCarousel').on('slide.bs.carousel', function () {
// Faça algo...
})
Mude a duração da transição
A duração da transição do .carousel-item pode ser alterada na variável Sass $carousel-transition, antes de
compilar ou em estilos personalizados (se você está usando CSS compilado). Se várias transições são
aplicadas, se assegure da transição transform ser declarada primeiro (ex: transition: transform 2s ease,
opacity .5s ease-out).
Collapse
Alterne a visibilidade do conteúdo de seu projeto com algumas classes e nossos plugins JavaScript.
40+ SDKs. 190+ tutorials. 250,000 developers trust us. Generous free plan.ads via Carbon
Como funciona
O plugin JavaScript collapse é usado para mostrar e esconder conteúdo. Botões ou âncoras são usados
como gatilhos que são mapeados para elementos específicos que você alterna visibilidade. Mostrar um
elemento (de tal maneira) vai animar a height, de seu valor atual, para 0. Dado como CSS lida com
animações, você não pode usar padding em um elemento .collapse. Pelo contrário, use esta classe como um
elemento pai independente.
Exemplo
Clique nos botões abaixo para mostrar e esconder outro elemento, através de mudanças de classes:
• .collapse esconde o conteúdo;

• .collapsing é aplicado durante a transição;
• .collapse.show mostra o conteúdo.
Você pode usar um link com o atributo href ou um botão com data-target. Em ambos casos, data-
toggle="collapse" é exigido.
Link com href Botão com data-target
Copy
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-
expanded="false" aria-controls="collapseExample">
Link com href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Botão com data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
Vários alvos
Um <button> ou uma <a> pode mostrar e esconder vários elementos, referenciando-os com um seletor
jQuery em seu href ou data-target. Vários <button> ou <a> podem mostrar e esconder um elemento, se
cada um deles referenciá-lo com seus href ou data-target.
Alterna primeiro elemento Alterna segundo elemento Alterna terceiro elemento
Copy
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-
expanded="false" aria-controls="multiCollapseExample1">Alterna primeiro elemento</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Alterna
segundo elemento</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse"
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Alterna terceiro
elemento</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
Anim pariatur cliche reprehenderit, enim alemanha 7x1 brasil life accusamus terry richardson ad
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
Exemplo de acordeão
Usando o componente card, você pode extender o comportamento padrão do collapse, para criar um
acordeão.
Grupo de itens colapsável #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
aute, non alemanha 0 x 2 coreia do sul cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad
vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.

Copy
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-

parent="#accordionExample">
3 wolf moon officia aute, non alemanha 0 x 2 coreia do sul cupidatat skateboard dolor brunch. Food truck
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-
origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-
target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-
target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-
parent="#accordionExample">
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Acessibilidade
• Se assegure de usar aria-expanded no elemento controle. Este atributo transmite o atual estado do elemento
colapsável, ligado ao contole, para leitores de telas e tecnologias assistivas;
• Se o elemento colapsável é fechado por padrão, o atributo no elemento controle deve ter o valor de aria-
expanded="false";
o Já, se você configurou para que o elemento estivesse aberto, por padrão, usando a classe .show,
defina aria-expanded="true" no controle;
o O plugin vai, automaticamente, alternar este atributo no controle, verificando se o elemento colapsável
foi aberto ou não, via JavaScript ou porque o usuário acionou um outro elemento controle, também
vinculado ao mesmo elemento colapsável.
• Se a tag do elemento controle não é um botão (ex: <a> ou <div>), o atributo role="button" deve ser usado
no elemento;
• Se seu elemento controle está atingindo só um elemento colapsável (data-targetreferenciando um seletor de
id), você deve adicionar o atributo aria-controls no elemento controle.
o Leitores de telas modernos e tecnologias assistivas similares fazem uso desse atributo para dar atalhos
adicionais aos usuários, para navegar diretamente para o próprio elemento colapsável.
Perceba que a atual implementação do Bootstrap não cobre as diversas interações de teclado descritas
no WAI-ARIA Authoring Practices 1.1 accordion pattern. Você vai precisar incluir elas, com seu próprio
JavaScript. d
Modo de uso
O plugin collapse usa algumas classes para cumprir seu dever:
• .collapse esconde o conteúdo;

• .collapse.show mostra o conteúdo;
• .collapsing é adicionado quando a transição inicia e removido quando finaliza.
Essas classes podem ser encontradas em _transitions.scss.
Via atributos data
• Basta adicionar data-toggle="collapse" e um data-target no elemento para, automaticamente, atribuir

controle em um ou mais elementos colapsáveis;
o O atributo data-target aceita um seletor CSS para aplicar o colapso.
• Se assegure de adicionar a classe .collapse no elemento colapsável.
o Se quer que ele esteja aberto por padrão, use a classe adicional show.
Para criar um acordeão em uma área colapsável, use o atributo data-parent="#seletor". Veja a
demonstração, para ver isso em ação.
Via JavaScript
Ative, manualmente, usando:
Copy
$('.collapse').collapse()
Opções
Opções podem ser passadas via atributos data ou JavaScript. Para atributos data, anexe o nome da opção no
prefixo data-, como em data-parent="".
parent seletor | objeto jQuery | elemento DOM false Se o pai é provido, então, todos elementos colapsáveis de
dele vão ser fechados quando este item colapsável é mos
(semelhante ao comportamento do acordeão, dependend
classe do card). O atributo deve ser definido na área colap

do alvo.
toggle booleano true Alterna o elemento colapsável, na invocação.
Métodos


.collapse(options)
Ativa seu conteúdo como sendo um elemento colapsável. Aceita um objeto de opções, opcionalmente.
Copy
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Alterna um elemento colapsável para mostrar ou escondê-lo. Retorna ao invocador antes do elemento
colapsável ter sido mostrado ou escondido, de fato (antes do
evento shown.bs.collapse ou hidden.bs.collapse ocorrer).
.collapse('show')
Mostra um elemento colapsável. Retorna ao invocador antes do elemento colapsável ter sido mostrado,
de fato (antes do evento shown.bs.collapse ocorrer).
.collapse('hide')
Esconde um elemento colapsável. Retorna ao invocar antes do elemento colapsável ter sido escondido,
de fato (antes do evento hidden.bs.collapse ocorrer).
.collapse('dispose')
Destroi o colapso de um elemento.
Eventos
A classe Bootstrap do collapse tem alguns eventos para ativar a funcionalidade de colapso.
show.bs.collapse Este evento é acionado, imediatamente, quando o método show é chamado.
shown.bs.collapse Este evento é acionado quando um elemento colapsável fica visível para o usuário (espera as trans
CSS finalizarem).
hide.bs.collapse Este evento é acionado, imediatamente, quando o método hide é chamado.

hidden.bs.collapse Este evento é acionado quando um elemento colapsável foi escondido do usuário (espera as trans
CSS finalizarem).
Copy
$('#myCollapsible').on('hidden.bs.collapse', function () {
//faça algo, aqui...
})
Dropdowns
Clique em botões para ver um lista de links e outras coisas, usando o plugin Bootstrap dropdown.
Visão Geral
Dropdowns são botões com alternância de visibilidade de listas de links e outras coisas. Conseguem ser
interativos graças a sua construção que foi feita com o plugin JavaScript dropdown. A visibilidade do
conteúdo é alternada com cliques e nunca só ao passar o mouse em cima do botão (uma decisão de design
intencional).
Dropdowns são feitos em cima de uma biblioteca de terceiros, Popper.js, a qual permite posicionamento
dinâmico e detecção de viewport. Se assegure de invocar popper.min.js, antes do JavaScript Bootstrap ou
use bootstrap.bundle.min.js / bootstrap.bundle.js, os quais já possuem o Popper.js. No entanto, Popper.js
não é usada para posicionar dropdowns em navbars, já que posicionamento dinâmico não é necessário.
Se você está construindo nosso JavaScript a partir da fonte, vai precisar do util.js.
Acessibilidade
O padrões WAI ARIA pedem o uso do atributo role="menu", mas ele é específico para menus de aplicações
que ativam ações ou funções. Menus ARIA só podem conter itens de menu, checkbox, grupos e botões
radio, além de sub-menus.
Os dropdowns Bootstrap, por outro lado, são desenhados para serem genéricos e aplicáveis em várias
situações e estruturas de marcação. Por exemplo, é possível criar dropdowns que possuem inputs e form
controls adicionais, como campos de pesquisa ou formulários de login. Por essa razão, Bootstrap não espera
(nem adiciona automaticamente) a presença dos atributos role e aria, exigidos nos reais menus ARIA. Os
autores terão que incluí-los, por si só.
No entanto, Bootstrap tem suporte para a maioria das interações padrões de teclado, como a habilidade de
mover-se através de elementos individuais dropdown-item (usando o as setinhas do teclado) ou fechar o
menu com a tecla ESC.
Exemplos
Envolte os itens ou menu dropdown dentro da classe .dropdown ou qualquer outro elemento que
tenha position: relative; declarado. Dropdowns podem ser acionados de um elemento <a> ou <button>,
te dando mais flexibilidade.
Único botão
Qualquer .btn pode se transformar em um dropdown, com algumas adições na marcação HTML.
Aqui está como você pode fazê-los funcionar, usando <button>:
Botão dropdown
Copy
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-
Botão dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Alguma ação</a>
<a class="dropdown-item" href="#">Outra ação</a>
<a class="dropdown-item" href="#">Alguma coisa aqui</a>
</div>
</div>
Já aqui, temos um exemplo de uso com o elemento <a>:
Link dropdown
Copy
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-
Link dropdown
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

</div>
</div>
O melhor é que você pode fazer isso com qualquer variante de botão, também:
Primary
Secondary
Success
Info
Warning
Danger
Copy

<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Ação
</button>
<div class="dropdown-menu">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link separado</a>
</div>
</div>
Botão dividido
Similarmente, crie botões divididos com a mesma marcação HTML de botões dropdowns, mas com a adição
da classe .dropdown-toggle-split para espaçamento apropriado, ao redor da setinha.
Nós usamos esta classe extra para reduzir o padding horizontal, em 25% dos lados da setinha e remover
a margin-left que é adicionada em botões dropdowns comuns. Estas mudanças extras mantém a setinha
centralizada e dá uma área de clique maior, no botão principal.
PrimaryDropdown
SecondaryDropdown
SuccessDropdown
InfoDropdown
WarningDropdown
DangerDropdown
Copy

<button type="button" class="btn btn-danger">Ação</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-
<span class="sr-only">Dropdown</span>
</button>
</div>
</div>
Tamanhos
Tanto os dropdowns padrões, quanto os divididos, funcionam em todos os tamanhos.
Botão grande
Botão dividido grandeDropdown
Botão pequeno
Botão dividido pequenoDropdown
Copy

<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-
Botão grande
</button>
...
</div>
</div>
<button class="btn btn-secondary btn-lg" type="button">
Botão grande dividido
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-
</button>
...
</div>
</div>


<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-
Botão pequeno
</button>
...
</div>
</div>
<button class="btn btn-secondary btn-sm" type="button">
Botão pequeno dividido
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-
</button>
...
</div>
</div>
Direções
Dropup
Acione menus para cima, usando a classe .dropup no elemento pai.
Dropup
Dropup divididoDropdown
Copy

<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-
Dropup
</button>

</div>
</div>


<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Dropup dividido
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-
</button>

</div>
</div>
Dropright
Acione menus para a direita, usando .dropright no elemento pai.
Dropright
Dropright divididoToggle Dropright
Copy

<div class="btn-group dropright">
Dropright
</button>

</div>
</div>


<div class="btn-group dropright">
Dropright dividido
</button>
<span class="sr-only">Dropright</span>
</button>

</div>
</div>
Dropleft
Acione menus a esquerda, usando a classe .dropleft no elemento pai.
Dropleft
Dropleft
Dropleft dividido
Copy

<div class="btn-group dropleft">
Dropleft
</button>

</div>
</div>


<div class="btn-group dropleft" role="group">
<span class="sr-only">Dropleft</span>
</button>

</div>
</div>
Dropleft dividido
</button>
</div>
Itens do menu
Historicamente, o conteúdo dos dropdowns tinham que ser links, mas isso não é mais o caso, na v4. Agora,
você pode usar elementos <button> em seus dropdowns, invés de <a>.
Dropdown
Copy
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Ação</button>
<button class="dropdown-item" type="button">Another Ação</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Você também pode criar dropdowns com itens não interativos, usando .dropdown-item-text. Sinta-se livre
para fazer mais estilizações com CSS ou utilitários de texto.
Texto do item dropdownAlguma açãoOutra açãoAlguma coisa aqui
Copy
<span class="dropdown-item-text">Texto do item dropdown</span>
</div>
Ativo
Use .active nos itens do dropdown para estilizar eles como ativos.
Link comumLink ativoOutro link
Copy
<a class="dropdown-item" href="#">Link comum</a>
<a class="dropdown-item active" href="#">Link ativo</a>
<a class="dropdown-item" href="#">Outro link</a>
</div>
Desativado
Coloque .disabled nos itens do dropdown para estilizar eles como desativados.
Link comumLink desativadoOutro link
Copy
<a class="dropdown-item" href="#">Link comum</a>
<a class="dropdown-item disabled" href="#">Link desativado</a>
<a class="dropdown-item" href="#">Outro link</a>
</div>
Alinhamento de menu
Por padrão, o menu dropdown é, automaticamente, posicionado 100% a partir do topo e esquerda do
elemento pai. Use .dropdown-menu-right em um .dropdown-menu para alinhar o menu dropdown a direita.
Atenção! Dropdowns são posicionados com ajuda do Popper.js (exceto quando estão dentro de uma
navbar).
Menu alinhado a direita
Copy
Menu alinhado a direita
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Ação</button>
<button class="dropdown-item" type="button">Another Ação</button>
<button class="dropdown-item" type="button">Algo mais aqui</button>
</div>
</div>
Conteúdo do menu
Cabeçalho
Coloque um cabeçalho para rotular seções, no menu dropdown.
Cabeçalho dropdown
Alguma açãoOutra ação
Copy
<h6 class="dropdown-header">Cabeçalho dropdown</h6>
</div>
Divisórias
Separe grupos de itens, usando uma divisória.
Alguma açãoOutra açãoAlguma coisa aqui
Link separado
Copy
</div>
Texto
Coloque qualquer texto dentro do menu dropdown e use utilitários de espaçamentos. Perceba que você
pode precisar estilizar o tamanho da fonte para se adequar a largura do menu.
Algum exemplo de texto, aqui dentro do menu.
Mais um exemplo de texto.
Copy
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Algum exemplo de texto, aqui dentro do menu.
</p>
<p class="mb-0">
Mais um exemplo de texto.
</p>
</div>
Formulários
Coloque um formulário dentro do menu dropdown ou transforme-o em um menu dropdown. Use utilitários
de margem ou padding para conseguir o espaço negativo necessário.
Endereço de email
Senha
Remember me
Entrar
Novo, por aqui? Regitre-se.Esqueceu a senha?
Copy
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Endereço de email</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1"
placeholder="email@exemplo.com">
</div>
<label for="exampleDropdownFormPassword1">Senha</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Senha">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Entrar</button>
</form>
<a class="dropdown-item" href="#">Novo, por aqui? Regitre-se.</a>
<a class="dropdown-item" href="#">Esqueceu a senha?</a>
</div>
Endereço de email
Senha
Lembrar de mim
Entrar
Copy
<form class="dropdown-menu p-4">
<label for="exampleDropdownFormEmail2">Endereço de email</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2"
placeholder="email@exemplo.com">
</div>
<label for="exampleDropdownFormPassword2">Senha</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Senha">
</div>
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Lembrar de mim
</label>
</div>
</form>
Prâmetros do dropdown
Use data-offset ou data-reference para mudar a localização do dropdown.
Offset
ReferênciaDropdown
Copy
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
</div>
</div>
<button type="button" class="btn btn-secondary">Referência</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-
reference="parent">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
</div>
</div>
</div>
Modo de uso
Usando JavaScript ou atributos data, o plugin dropdown alterna a visibilidade de conteúdo invisível (menus
dropdown) trocando a classe .show, no elemento pai da lista. O atributo data-toggle="dropdown" é
acreditado para fechar os menus dropdown em level de aplicação, então, é uma boa ideia sempre usá-lo.
Em dispositivos touch, abrir um menu adiciona manipuladores ($.noop) mouseover vazios em filhos imediatos
do elemento <body>. Essa gambiarra feia é necessária para contornar um problema na delegação de eventos
do iOS, o qual poderia evitar que toques fora do dropdown acionassem o código que fecha o próprio
dropdown. Uma vez que o dropdown é fechado, esses manipuladores mouseover adicionais vazios são
removidos.
Via atributos data

Use data-toggle="dropdown" em um link ou botão para alternar a visibilidade do menu dropdown.
Copy
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Gatilho dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
...
</div>
</div>
Via JavaScript
Invoque os dropdowns, usando JavaScript:
Copy
$('.dropdown-toggle').dropdown()
data-toggle="dropdown" é obrigatório
Independente se você invoca seu dropdown com JavaScript ou com a data-api, o uso de data-
toggle="dropdown" sempre é obrigatório no gatilho dropdown.
Parâmetros
Parâmetros sempre podem ser passados usando atributos ou JavaScript. Para atributos, anexe o parâmetro
no prefixo data-, como em data-offset="".
offset number | string | função 0 Deslocamento do dropdown, em relação ao seu alvo. Para mais
informações, veja a documentação do offset Popper.js.
flip boolean true Permite o dropdown virar, em caso de sobreposição no elemento de

referência. Para mais informações, veja a documentação do flipPopp
boundary string | elemento 'scrollParent' Limite de transbordamento do menu dropdown. Aceita os

valores 'viewport', 'window', 'scrollParent' ou uma referência
HTMLElement (JavaScript, apenas). Para mias informações, veja
a documentação preventOverflow Popper.js.
reference string | elemento 'toggle' Elemento de referência do menu dropdown. Aceita os

valores 'toggle', 'parent' ou uma referência HTMLElement. Para m
informações, veja a documentação referenceObject Popper.js.
display string 'dynamic' Por padrão, nós usamos o posicionamento dinâmico do Popper.js.
Desative isso, usando o valor static.
Nota: quando boundary tem como valor definido qualquer coisa, que não 'scrollParent', o estilo position:
static é aplicado no container .dropdown.
Métodos
Método Descrição
$().dropdown('toggle') Alterna a visibilidade do menu dropdown em uma dada navbar ou navegação por abas.
Método Descrição
$().dropdown('update') Atualiza a posição do dropdown de um elemento.
$().dropdown('dispose') Destroi o dropdown de um elemento.
Eventos
Todos eventos dropdown são acionados no elemento pai do .dropdown-menu e possuem uma
propriedade relatedTarget, a qual tem o valor referente ao elemento âncora de
alternância.hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the
original event type is click) that contains an Event Object for the click event.
Evento Descrição
show.bs.dropdown Este evento é acionado, imediatamente, quando o método show é invocado.
shown.bs.dropdown Este evento é acionado quando o dropdown se torna visível ao usuário (espera as transições CSS
finalizarem)
hide.bs.dropdown Este evento é acionado, imediatamente, quando o método hide foi invocado.
hidden.bs.dropdown Este evento é acionado quando o dropdown acaba de se esconder do usuário (espera as transições
finalizarem).
Copy
$('#myDropdown').on('show.bs.dropdown', function () {
// Faça algo, aqui…
})
Formulários
Exemplos, instruções para estilizar campos de formulários, opções de layout e componentes personalizados
para criar uma grande variedade de formulários.
Visão geral
Campos de formulários Bootstrap extendem os estilos herdados do Reboot, graças a classes. Use estas
classes para conseguir uma exibição personalizada e, portanto, uma renderização nos browsers e
dispositivos, mais consistentes.
Se assegure de usar um atributo type adequado em todos inputs (email em campos de email, por exemplo)
para conseguir se aproveitar dos novos inputs, como seletores de números, verificadores de emails, etc.
Aqui está um rápido exemplo para demonstrar os estilos de formulário Bootstrap. Continue lendo a
documentação para descobrir sobre classes obrigatórias, layout de formulários e muito mais.
Endereço de emailNunca vamos compartilhar seu email, com ninguém.
Senha
Clique em mim
Enviar
Copy
<form>
<label for="exampleInputEmail1">Endereço de email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Seu email">
<small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com
ninguém.</small>
</div>
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Clique em mim</label>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
Campos de formulário
Campos de formulário textuais como <input>, <select> e <textarea> são estilizados com a classe .form-
control. Ela possui estilos para aparência, estado de foco e muito mais.
Tenha certeza de explorar nossos formulários personalizados para estilos de <select>.
Endereço de email
Select de exemplo
Exemplo de select múltiplo
Exemplo de textarea
Copy
<form>
<label for="exampleFormControlInput1">Endereço de email</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="nome@exemplo.com">
</div>
<label for="exampleFormControlSelect1">Select de exemplo</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<label for="exampleFormControlSelect2">Exemplo de select múltiplo</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<label for="exampleFormControlTextarea1">Exemplo de textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Para inputs de arquivo, troque o .form-control por .form-control-file.
Exemplo de input de arquivo

Copy
<form>
<label for="exampleFormControlFile1">Exemplo de input de arquivo</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
Tamanhos
Defina alturas, usando classes como .form-control-lg e .form-control-sm.
Copy
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Input padrão">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Copy
<select class="form-control form-control-lg">
<option>Select grande</option>
</select>
<select class="form-control">
<option>Select padrão</option>
</select>
<select class="form-control form-control-sm">
<option>Select pequeno</option>
</select>
Input só de leitura
Use o atributo booleano readonly em um input para evitar alterações no valor dele. Inputs readonly são mais
esmaecidos (como os desativados), mas preservam o cursor padrão.
Copy
<input class="form-control" type="text" placeholder="Input só de leitura, aqui..." readonly>
Input só de leitura em texto
Se você quiser elementos <input readonly> em seu formuláro, mas no estilo de texto, use a classe .form-
control-plaintext para remover os estilos padrões do campo, preservando margem e padding.
Email
Senha
Copy
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail"
value="email@exemplo.com">
</div>
</div>
<label for="inputPassword" class="col-sm-2 col-form-label">Senha</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Senha">
</div>
</div>
</form>
Email
Senha
Confirmar identidade
Copy
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2"
value="email@exemplo.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Senha</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Senha">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirmar identidade</button>
</form>
Inputs range
Crie um input range, usando .form-control-range.
Exemplo de input range

Copy
<form>
<label for="formControlRange">Exemplo de input range</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Checkboxes e radios
Checkboxes e radios padrões são aprimorados com ajuda da .form-check, uma classe para os dois tipos de
input que melhora o layout e comportamento de seus elementos HTML. Checkboxes são para selecionar
várias opções em uma lista, enquanto radios são para selecionar uma em muitas.
Checkboxes e radios desativados são suportados, mas para se ter um cursor not-allowedquando passá-lo
sobre o <label> pai, você precisará adicionar o atributo disabled no elemento com .form-check-input. O
atributo disabled vai aplicar um cor mais clara para indicar o estado do input.
Checkboxes e radios são feitos para terem suporte a validação de formulário HTML e prover labels consisos
e acessíveis. Assim, nossos <input> e <label> são elementos irmãos, diferente de um <input> dentro de
uma <label>. Isso é um pouco mais massante, já que você precisa especificar atributos id e for para vincular
o <input> a <label>.
Padrão (empilhados)
Por padrão, qualquer número de checkboxes e radios, que são irmãos imediatos, vão se empilhar e receber
espaçamento apropriado com a classe .form-check.
Checkbox padrão
Checkbox desativado
Copy
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Checkbox padrão
</label>
</div>
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Checkbox desativado
</label>
</div>
Radio padrão
Segundo radio padrão
Radio desativado
Copy
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="opcao1"
checked>
<label class="form-check-label" for="exampleRadios1">
Radio padrão
</label>
</div>
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="opcao2">
Segundo radio padrão
</label>
</div>
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3"
disabled>
Radio desativado
</label>
</div>
Inline
Crie grupos de checkboxes ou radios, na mesma linha horizontal, usando .form-check-inlineem

qualquer .form-check.
3 (desativado)
Copy
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="opcao1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="opcao2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="opcao3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (desativado)</label>
</div>
1
3 (desativado)
Copy
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
value="opcao1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
value="opcao2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
value="opcao3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (desativado)</label>
</div>
Sem labels
Use .position-static em inputs dentro de .form-check, os quais não possuem qualquer texto de label.
Lembre-se de, ainda assim, criar algum tipo de label para tecnologias assistivas (usando aria-label, por
exemplo).
Copy
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="opcao1"
aria-label="...">
</div>
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1"
value="opcao1" aria-label="...">
</div>
Layout
Já que Bootstrap aplica display: block e width: 100% em quase todos campos de formulários, eles vão se
empilhar, por padrão. Classes adicionais podem ser usadas para variar este layout.
Grupos de formulários
A classe .form-group é o jeito mais fácil de adicionar alguma estrutura aos formulários. Ela cria uma base
para o agrupamento apropriado de labels, controles, textos de ajuda e mensagens de validação de
formulário. Por padrão, ela só aplica margin-bottom, mas usa alguns estilos adicionais de form-inline,
sempre que necessário. Use-a em <fieldset>, <div>ou quase qualquer outro elemento.
Label exemplo
Outra label
Copy
<form>
<label for="formGroupExampleInput">Label exemplo</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Input exemplo">
</div>
<label for="formGroupExampleInput2">Outra label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Outro input">
</div>
</form>
Grid de formulário
Formulários mais complexos podem ser feitos usando classes do grid. Use-as para fazer layouts de
formulários que precisam de várias colunas, larguras e outras opções de alinhamento.
Copy
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Nome">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Sobrenome">
</div>
</div>
</form>
Form row
Você também pode trocar .row por .form-row, uma variação de nosso grid row padrão, a qual sobrescreve
as gutters padrões das colunas para conseguir layouts mais compactos.
Copy
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Nome">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Sobrenome">
</div>
</div>
</form>
Layouts mais complexos também podem ser criados com o sistema grid.
Email
Senha
Endereço
Endereço 2
Cidade
Estado
CEP
Clique em mim
Entrar
Copy
<form>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<label for="inputPassword4">Senha</label>
</div>
</div>
<label for="inputAddress">Endereço</label>
<input type="text" class="form-control" id="inputAddress" placeholder="Rua dos Bobos, nº 0">
</div>
<label for="inputAddress2">Endereço 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartamento, hotel, casa,
etc.">
</div>
<label for="inputCity">Cidade</label>
<input type="text" class="form-control" id="inputCity">
</div>
<label for="inputEstado">Estado</label>
<select id="inputEstado" class="form-control">
<option selected>Escolher...</option>
<option>...</option>
</select>
</div>
<label for="inputCEP">CEP</label>
<input type="text" class="form-control" id="inputCEP">
</div>
</div>
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Clique em mim
</label>
</div>
</div>
</form>
Formulário horizontal
Crie formulários horizontais com o grid, usando a classe .row em grupos de formulários e as classes .col-*-
* para especificar a largura de seus labels e controles. Também, se assegure de usar .col-form-label no
seu <label>, para que ele se centralize verticalmente com seus campos de formulário.
As vezes, você pode precisar usar utilitários de margem ou padding para criar o alinhamento perfeito que
precisa. Por exemplo, nós removemos padding-top em nossos inputs radios empilhados para melhorar o
alinhamento da baseline do texto.
Email
Senha
Radios
Primeiro radio
Segundo radio
Terceiro radio desativado
Checkbox
Checkbox exemplo
Entrar
Copy
<form>
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 col-form-label">Senha</label>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="opcao1"
checked>
<label class="form-check-label" for="gridRadios1">
Primeiro radio
</label>
</div>
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2"
value="opcao2">
Segundo radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="opcao3"
disabled>
Terceiro radio desativado
</label>
</div>
</div>
</div>
</fieldset>
<div class="col-sm-2">Checkbox</div>
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
</div>
</div>
</div>
</div>
</form>
Dimensionamento horizontal de labels
Tenha certeza de usar .col-form-label-sm ou .col-form-label-lg em um <label> ou <legend> para,

adequadamente, seguir o tamanho de .form-control-lg e .form-control-sm.
Email
Email
Email
Copy
<form>
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-
form-label-sm">
</div>
</div>
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-
form-label-lg">
</div>
</div>
</form>
Tamanho de colunas
Como mostrado nos exemplos anteriores, nosso sistema de grid permite que você use qualquer número
de .col, dentro de um .row ou .form-row. Elas vão dividir a largura disponível, igualmente, entre si. Você
também pode escolher se um subconjunto de colunas pode tomar mais ou menos espaço, enquanto
as .col restantes dividem o resto do espaço, usando classes de colunas como .col-7.
Copy
<form>
<div class="col-7">
<input type="text" class="form-control" placeholder="Cidade">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Estado">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="CEP">
</div>
</div>
</form>
Auto dimensionamento
O exemplo abaixo usa utilitário flexbox para centralizar verticalmente os conteúdos e troca .col por .col-
auto para que suas colunas só usem o espaço necessário. Em outras palavras, a coluna vai crescer sozinha,
baseando-se no tamanho de seus conteúdos.
Nome
Usuário
@
Lembrar de mim
Enviar
Copy
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Nome</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Fulano">
</div>
<label class="sr-only" for="inlineFormInputGroup">Usuário</label>
<div class="input-group mb-2">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Usuário">
</div>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Lembrar de mim
</label>
</div>
</div>
<button type="submit" class="btn btn-primary mb-2">Enviar</button>
</div>
</div>
</form>
Você também pode repetir isso, mas com classes de colunas de tamanhos específicos.
Nome
Usuário
@
Lembrar de mim
Enviar
Copy
<form>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Nome</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Fulano">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Usuário</label>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Usuário">
</div>
</div>
<div class="col-auto my-1">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Lembrar de mim
</label>
</div>
</div>
</div>
</div>
</form>
E, é claro, campos de formulário personalizados são suportados.
Preferência
Lembrar preferências
Enviar
Copy
<form>
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preferência</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option value="1">Um</option>
<option value="2">Dois</option>
<option value="3">Três</option>
</select>
</div>
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Lembrar preferências</label>
</div>
</div>
</div>
</div>
</form>
formulários inline
Use a classe .form-inline pora mostrar vários labels, controles e botões, em uma única linha. Campos
dentro de formulários inline são um pouco diferente de seus estados padrões.
• Controles usam display: flex, colapsando qualquer espaço HTML em branco e permitindo que você
tenha controle de alinhamento com utilitários de espaçamento e flexbox;
• Grupos de controles e inputs recebem width: auto para sobrescrever o padrão do Bootstrap width:
100%;
• Controles só aparecem inline em viewports que possuem, pelo menos, 576px de largura, levando
em conta viewports estreitas em dispositivos móveis.
Você pode precisar definir a largura e alinhamento individual dos campos, usando utilitários de
espaçamento (como mostrado abaixo). Por último, se assegure de sempre usar uma <label> em cada
controle, mesmo se você precisar escondê-lo de usuários sem leitores de telas, usando .sr-only.
Nome Usuário
@
Lembrar de mim
Enviar
Copy
<label class="sr-only" for="inlineFormInputName2">Nome</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Fulano">
<label class="sr-only" for="inlineFormInputGroupUsername2">Usuário</label>

<div class="input-group mb-2 mr-sm-2">
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Usuário">
</div>
<div class="form-check mb-2 mr-sm-2">

<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Lembrar de mim
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Enviar</button>

</form>
Controles de formuários e selects personalizados são suportados, também.
Preferência
Lembrar preferências
Enviar
Copy
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preferência</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">

<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Lembrar preferências</label>
</div>
<button type="submit" class="btn btn-primary my-1">Enviar</button>

</form>
Opções para esconder labels
Tecnologias assistivas como leitores de telas sempre vão ter problemas nos formulários, se você não colocar
um label em cada input. Nesses formulários inline, você pode esconder as labels usando a classe .sr-only.
Também há outros métodos de criar uma label para tecnologias assistivas, como os atributos aria-
label, aria-labelledby e title. Se nenhum deles é usado, tecnologias assistivas podem recorrer ao
atributo placeholder (se existir), mas perceba que o uso de placeholder como substituto não é aconselhável,
nesses casos.
Texto de ajuda
Textos de ajuda block-level em formulários podem ser criado usando .form-text(anteriormente, conhecido
como .help-block, na v3). Textos de ajuda inline podem ser implementados, sem problemas, usando
qualquer elemento HTML inline e classes utilitárias como .text-muted.
Associando textos de ajuda com campos de formulário
Textos de ajuda devem ser, explicitamente, associados aos campos de formulário que eles remetem, usando
o atributo aria-describedby. Isso vai garantir que tecnologias assistivas (como leitores de telas) mostrem
esse texto de ajuda, quando o usuário foca ou entra no campo.
Textos de ajuda abaixo podem ser estilizados com .form-text. Essa classe possui display: block e adiciona
alguma margem no topo para fácil distanciamento dos inputs acima.
Senha Sua senha deve ter entre 8 e 20 caracteres, os quais devem ser letras e números, sem espaços, caracteres
especiais ou emojis.
Copy
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Sua senha deve ter entre 8 e 20 caracteres, os quais devem ser letras e números, sem espaços,
caracteres especiais ou emojis.
</small>
Textos inline devem usar qualquer elemento HTML inline, seja <small>, <span> ou qualquer outra coisa, além
de classes utilitárias.
Senha Deve ter entre 8 e 20 caracteres.

Copy
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-
describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Deve ter entre 8 e 20 caracteres.
</small>
</div>
</form>
Desativar formulários
Use o atributo booleano disabled em um input para evitar interações e fazê-lo parecer mais esmaecido.
Copy
<input class="form-control" id="disabledInput" type="text" placeholder="Input desativado..." disabled>
Use o atributo disabled em um <fieldset> para desativar todos os campos dentro dele.
Input desativado
Menu select desativado
Não é possível clicar aqui
Enviar
Copy
<form>
<fieldset disabled>
<label for="disabledTextInput">Input desativado</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Input desativado">
</div>
<label for="disabledSelect">Menu select desativado</label>
<select id="disabledSelect" class="form-control">
<option>Select desativado</option>
</select>
</div>
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Não é possível clicar aqui
</label>
</div>
</fieldset>
</form>
Probleminha com âncoras
Por padrão, navegadores vão tratar todo campo de formulário nativo (<input>, <select> e <button>), dentro
de um <fieldset disabled>, como desativado. Dessa maneira, não será possível haver interação de teclado
ou mouse, neles. No entanto, se seu formulário também possui elementos <a ... class="btn btn-*">, estes
só vão receber o estilo pointer-events: none. Como falado na seção sobre estado desativado de botões (e
na sub-seção de elementos âncoras, especialmente), esta propriedade CSS ainda não foi padronizada e não
é suportada, totalmente, no Internet Explorer 10, além não evitar que usuários de teclado de serem capazes
de ativarem estes links. Portanto, para ter segurança, use JavaScript personalizado para desativar tais links.
Compatibilidade cross-browser
Apesar do Bootstrap aplicar estes estilos em todos os browsers, Internet Explorer 11 e versões anteriores não
vão suportar o atributo disabled em <fieldset>, totalmente. Use JavaScript personalizado para desativar o
fieldset, nesses browsers.
Validação
Dê um feedback significativo e acionável aos seus usuários, usando validação de formulário HTML5
(disponível em todos os nossos browsers suportados). Escolha entre o feedback de validação padrão do
browser ou implemente mensagens personalizadas com nossas classes integradas e JavaScript.
Atualmente, recomendamos usar estilos de validação personalizados, já que mensagens de validação

padrões não são, totalmente, expostas a tecnologias assistivas, em todos browsers (no Chrome desktop e
mobile, mais notavelmente).
Como funciona
Aqui está como validação de formulário funciona, usando Bootstrap:
• A validação de formulário HTML é aplicada usando duas pseudo-classes CSS: :invalide :valid;
o Ela é aplicada em <input>, <select> e <textarea>.
• Bootstrap limita o scopo de :invalid e :valid a classe pai .was-validated, usualmente, aplicada
no <form>;
o Caso contrário, qualquer campo obrigatório sem um valor será mostrado como inválido, ao
carregar a página;
o Assim, você pode escolher quando ativá-los (tipicamente, depois do envio de formulário).
• Para resetar a aparência do formulário (no caso de envio de dados dinâmico, via AJAX, por exemplo),
remova a classe .was-validated do <form>, depois de cada envio;
• Como um fallback, as classes is-invalid e .is-valid podem ser usadas, invés das pseudo-classes
para validação server side;
o Não exigem uma classe pai .was-validated.
• Devido as limitações do CSS, não podemos (no momento) aplicar estilos em uma <label> que venha
antes de um campo de formulário (no DOM), sem a ajuda de JavaScript;
• Todos browsers modernos suportam a constraint validation API, uma série de métodos JavaScript
para validar campos de formulário;
• Mensagens de feedback podem usar os padrões do browser (diferente em cada e não estilizável, via
CSS) ou nossos estilos de feedback personalizados, com HTML e CSS extra;
• Você pode prover mensagens de validação personalizadas com setCustomValidity, no JavaScript.
Com isso em mente, preste atenção nas seguintes demonstrações de nossos estilos de validação de
formulários personalizados, classes server-side opcionais e padrões dos browsers.
Estilos personalizados
Para mensagens de validação Bootstrap personalizadas, você precisará colocar o atributo

booleano novalidate em seu <form>. Isso desativa as dicas padrões do browser, mas continua tendo acesso
as APIs de validação de formulário, no JavaScript. Tente enviar o formulário abaixo e veja que nosso
JavaScript irá interceptar o botão “Enviar” e retornar um feedback a você. Quando tentando enviar o
formulário, verá os estilos :invalid e :valid aplicados em seus campos de formulário.
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better
communicate feedback. Background icons for <select>s are only available with .custom-select, and
not .form-control.
Primeiro nome
Sobrenome
Usuário
@
Cidade
Estado
CEP
Concordo com os termos e condições
Enviar
Copy
<form class="needs-validation" novalidate>
<div class="col-md-4 mb-3">
<label for="validationCustom01">Primeiro nome</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="Nome" value="Mark"
required>
<div class="valid-feedback">
Tudo certo!
</div>
</div>
<label for="validationCustom02">Sobrenome</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Sobrenome"
value="Otto" required>
Tudo certo!
</div>
</div>
<label for="validationCustomUsername">Usuário</label>
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Usuário"
aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Por favor, escolha um nome de usuário.
</div>
</div>
</div>
</div>
<label for="validationCustom03">Cidade</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="Cidade" required>
Por favor, informe uma cidade válida.
</div>
</div>
<label for="validationCustom04">Estado</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="Estado" required>
Por favor, informe um estado válido.
</div>
</div>
<label for="validationCustom05">CEP</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="CEP" required>
Por favor, informe um CEP válido.
</div>
</div>
</div>
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
</label>
Você deve concordar, antes de continuar.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Enviar</button>
</form>
<script>
// Exemplo de JavaScript inicial para desativar envios de formulário, se houver campos inválidos.
(function() {
'use strict';
window.addEventListener('load', function() {
// Pega todos os formulários que nós queremos aplicar estilos de validação Bootstrap personalizados.
var forms = document.getElementsByClassName('needs-validation');
// Faz um loop neles e evita o envio
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Padrões dos browsers
Não tem interesse em feedback de validação personalizado ou em escrever JavaScript para mudar os
comportamentos do formulário? Tudo bem! Use os padrões dos navegadores.
Tente enviar o formulário abaixo. Dependendo do seu browser e SO, verá um estilo de feedback pouco
diferente.
Apesar destes estilos não poderem serem estilizados com CSS, você ainda pode personalizar o texto de
feedback, usando JavaScript.
Primeiro nome
Sobrenome
Usuário
@
Cidade
Estado
CEP
Enviar
Copy
<form>
<label for="validationDefault01">Primeiro nome</label>
<input type="text" class="form-control" id="validationDefault01" placeholder="Nome" value="Mark"
required>
</div>
<label for="validationDefault02">Sobrenome</label>
<input type="text" class="form-control" id="validationDefault02" placeholder="Sobrenome"
</div>
<label for="validationDefaultUsername">Usuário</label>
<span class="input-group-text" id="inputGroupPrepend2">@</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Usuário"
aria-describedby="inputGroupPrepend2" required>
</div>
</div>
</div>
<label for="validationDefault03">Cidade</label>
<input type="text" class="form-control" id="validationDefault03" placeholder="Cidade" required>
</div>
<label for="validationDefault04">Estado</label>
<input type="text" class="form-control" id="validationDefault04" placeholder="Estado" required>
</div>
<label for="validationDefault05">CEP</label>
<input type="text" class="form-control" id="validationDefault05" placeholder="CEP" required>
</div>
</div>
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
</label>
</div>
</div>
</form>
Server-side
Recomendamos usar validação client-side, mas se precisar de server-side, poderá indicar campos de
formulário válidos e invalidos com as classes .is-invalid and .is-valid. Perceba que .invalid-
feedback também pode ser usada com essas classes.
Primeiro nome
Tudo certo!
Sobrenome
Tudo certo!
Usuário
@
Cidade
Estado
CEP

Enviar
Copy
<form>
<label for="validationServer01">Primeiro nome</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="Nome"
value="Mark" required>
Tudo certo!
</div>
</div>
<label for="validationServer02">Sobrenome</label>
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Sobrenome"
Tudo certo!
</div>
</div>
<label for="validationServerUsername">Usuário</label>
<span class="input-group-text" id="inputGroupPrepend3">@</span>
</div>
<input type="text" class="form-control is-invalid" id="validationServerUsername"
placeholder="Usuário" aria-describedby="inputGroupPrepend3" required>
</div>
</div>
</div>
</div>
<label for="validationServer03">Cidade</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="Cidade"
required>
</div>
</div>
<label for="validationServer04">Estado</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="Estado"
required>
</div>
</div>
<label for="validationServer05">CEP</label>
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="CEP"
required>
</div>
</div>
</div>
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
</label>
</div>
</div>
</div>
</form>
Elementos suportados
Nossos formulários de exemplo mostram <input> textuais nativos, abaixo, mas estilos de validação de
formulário estão disponíveis para <textarea>s e nossos controles de formulários personalizados, também.
Textarea
Please enter a message in the textarea.
Olha só, esse checkbox personalizado
Exemplo de texto para feedback inválido
Clique neste radio personalizado

Ou clique neste outro radio personalizado
Mais exemplo de texto para feedback inválido
Exemplo de feedback invalido para o select

Escolher arquivo...
Exemplo de feedback inválido para input file
Copy
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example
textarea" required></textarea>
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">

<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Olha só, esse checkbox
personalizado</label>
<div class="invalid-feedback">Exemplo de texto para feedback inválido</div>
</div>
<div class="custom-control custom-radio">

<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked"
required>
<label class="custom-control-label" for="customControlValidation2">Clique neste radio
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked"
required>
<label class="custom-control-label" for="customControlValidation3">Ou clique neste outro radio
<div class="invalid-feedback">Mais exemplo de texto para feedback inválido</div>
</div>
<select class="custom-select" required>
<option value="">Abra este menu select</option>
</select>
<div class="invalid-feedback">Exemplo de feedback invalido para o select</div>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Escolher arquivo...</label>
<div class="invalid-feedback">Exemplo de feedback inválido para input file</div>
</div>
</form>
Tooltips
Se o layout do seu formulário permite, você pode trocar as classes .{valid|invalid}-

feedback pelas .{valid|invalid}-tooltip para mostrar o feedback de validação em um tooltip. Se assegure
de ter um elemento pai com position: relative para o posicionamento do tooltip. No exemplo abaixo,
nossas classes de coluna já possuem isso, mas seu projeto pode ter uma estrutura diferente.
Primeiro nome
Sobrenome
Usuário
@
Cidade
Estado
CEP
Enviar
Copy
<form class="needs-validation" novalidate>
<label for="validationTooltip01">Primeiro nome</label>
<input type="text" class="form-control" id="validationTooltip01" placeholder="Nome" value="Mark"
required>
<div class="valid-tooltip">
Tudo certo!
</div>
</div>
<label for="validationTooltip02">Sobrenome</label>
<input type="text" class="form-control" id="validationTooltip02" placeholder="Sobrenome"
<div class="valid-tooltip">
Tudo certo!
</div>
</div>
<label for="validationTooltipUsername">Usuário</label>
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</div>
<input type="text" class="form-control" id="validationTooltipUsername" placeholder="Usuário"
aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Por favor, escolha um usuário válido e único.
</div>
</div>
</div>
</div>
<label for="validationTooltip03">Cidade</label>
<input type="text" class="form-control" id="validationTooltip03" placeholder="Cidade" required>
</div>
</div>
<label for="validationTooltip04">Estado</label>
<input type="text" class="form-control" id="validationTooltip04" placeholder="Estado" required>
</div>
</div>
<label for="validationTooltip05">CEP</label>
<input type="text" class="form-control" id="validationTooltip05" placeholder="CEP" required>
</div>
</div>
</div>
</form>
Formulários personalizados
Para mais customização ainda e consistência cross-browser, use nossos elementos de formulário
personalizados para substituir os padrões dos browsers. Eles são feitos com base em marcação semântica e
acessível, então, são substituições sólidas para qualquer campo de formulário padrão.
Checkboxes e radios
Cada checkbox e radio é envolto em uma <div> com um <span> irmão para criar nosso campo personalizado
e um <label> para acompanhar o texto. Estruturalmente, esta é a mesma abordagem que nossa .form-
check padrão.
Nós usamos o seletor de irmão (~) para todos os nossos estados de inputs (:checked, por exemplo) para,
adequadamente, estilizar nosso indicador de formulário personalizado. Quando combinado com a
classe .custom-control-label, também podemos estilizar o texto em cada item, baseando-se no estado
do <input>.
Nós escondemos o <input> padrão com opacity e usamos a .custom-control-label para fazer um novo
indicador de formulário, em seu lugar, com ::before e ::after. Infelizmente, não podemos fazer um
personalizado só a partir do <input>, porque a propriedade CSS content não funciona no elemento.
Nos estados :checked, usamos ícones SVG base64 embutidos do Open Iconic. Ele nos dá o melhor controle
para estilizar e posicionar, através dos browsers e dispositivos.
Checkboxes

Copy
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Olha só, esse checkbox personalizado</label>
</div>
Checkboxes personalizados também podem usar a pseudo-classe :indeterminate, quando, manualmente,
definida via JavaScript (não existe nenhum atributo HTML para defini-la).
Se você está usando jQuery, algo como isso deve servir:
Copy
$('.seu-checkbox').prop('indeterminate', true)
Radios

Copy
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Clique neste radio personalizado</label>
</div>
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Ou clique neste outro radio
</div>
Inline

Copy
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Clique neste radio personalizado</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Ou clique neste outro radio
</div>
Desativado
Checkboxes e radios também podem ser desativados. Coloque o atributo booleano disabledem
um <input> e o indicador personalizado e a descrição da label vão ser estilizados, automaticamente.

Copy
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">Olha só, esse checkbox
</div>

<input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-
input" disabled>
<label class="custom-control-label" for="customRadioDisabled">Clique neste radio personalizado</label>
</div>
Menu select
Menus de <select> personalizados só precisam de uma classe personalizada .custom-select, para ativar os
estilos personalizados. Custom styles are limited to the <select>’s initial appearance and cannot modify
the <option>s due to browser limitations.
Copy
<select class="custom-select">
<option selected>Abra este menu select</option>
</select>
Você também pode escolher entre selects personalizados pequenos ou grandes, para combinar com nossos
inputs estilizados similarmente.
Copy
<select class="custom-select custom-select-lg mb-3">
</select>
<select class="custom-select custom-select-sm">

</select>
O atributo multiple também é suportado:
Copy
<select class="custom-select" multiple>
</select>
Assim como o atributo size:
Copy
<select class="custom-select" size="3">
</select>
Range
Crie um <input type="range"> personalizado, usando .custom-range. A trilha e o valor são ambos estilizados
para aparecerem da mesma maneira, nos diferentes browsers. Já que só o IE e o Firefox suportam preencher
a trilha (da esquerda para a direita), como um indicador visual de progresso, nós não suportamos isso, ainda.
Range exemplo
Copy
<label for="customRange1">Range exemplo</label>
<input type="range" class="custom-range" id="customRange1">
Inputs range possuem valores padrões inplícitos para min e max, sendo eles 0 and 100, respectivamente. Você
pode especificar novos valores para os inputs que estiverem usando os atributos min and max.
Range exemplo
Copy
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Por padrão, inputs range pulam por valores inteiros. Para mudar isso, você pode especificar a quantia de
pulos. No exemplo abaixo, dobramos a quantia de pulos, usando step="0.5".
Range exemplo
Copy
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Explorador de arquivos
O input de arquivos é o mais cabuloso de todos e exige JavaScript adicional, se você quiser ter um Escolher
arquivo… e nome de arquivo selecionado funcional.
Escolher arquivo
Copy
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Escolher arquivo</label>
</div>
• Nós escondemos o <input> de arquivo via opacity e, pelo contrário, estilizamos o <label>;
• O botão é gerado e posicionado com ::after;
• Por último, nós declaramos width e height no <input> para espaçamento em volta do conteúdo,
apropriado.
Traduzindo ou customizando as strings
A pseudo-classe :lang() é usada para permitir a tradução do texto “Browse”, em outras linguagens.
Sobrescreva ou adicione valores na variável $custom-file-text com uma tag de linguagem e a string
referente ao local. Por exemplo, assim é como você pode adicionar tradução para o espanhol (a tag de
linguagem do espanhol é es):
Copy
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Aqui está a lang(es), em ação, no input de arquivo personalizado para a tradução espanhol:
Seleccionar Archivo
Copy
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
Você precisará definir a linguagem de seu documento, corretamente, para que o texto correto seja
mostrado. Isso pode ser feito usando o atributo lang no elemento <html> ou Content-Language HTTP header,
junto com os outros métodos.
Grupo de input
Facilmente, extenda os controles de formulário com textos, botões, selects personalizados, etc.
Exemplo básico
Coloque um add-on ou botão em qualquer um dos lados de um input. Você também pode colocar um
botão em cada lado do input. No entanto, lembre-se de colocar o <label> fora do grupo de input.
@exemplo.com
Sua tão honrada URL
https://exemplo.com.br/users/
R$
.00
Addon com textarea
Copy
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Usuário" aria-label="Usuário" aria-
describedby="basic-addon1">
</div>

<input type="text" class="form-control" placeholder="Recipiente para nickname" aria-label="Recipiente
para nickname" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@exemplo.com</span>
</div>
</div>
<label for="basic-url">Sua tão honrada URL</label>

<span class="input-group-text" id="basic-addon3">https://exemplo.com.br/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<span class="input-group-text">R$</span>
</div>
<input type="text" class="form-control" aria-label="Quantia">
<span class="input-group-text">.00</span>
</div>
</div>
<span class="input-group-text">Addon com textarea</span>
</div>
<textarea class="form-control" aria-label="Com textarea"></textarea>
</div>
Tamanhos
Use as classes de dimensionamento de formulário no .input-group e conteúdos dentro dele vão,
automaticamente, redimensionar (não é necessário classes de dimensionamento em cada elemento).
Dimensionamento em elementos individuais do grupo de inputs, não é possível.
Pequeno
Padrão
Grande
Copy
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Pequeno</span>
</div>
<input type="text" class="form-control" aria-label="Exemplo do tamanho do input" aria-
describedby="inputGroup-sizing-sm">
</div>

<span class="input-group-text" id="inputGroup-sizing-default">Padrão</span>
</div>
describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">

<span class="input-group-text" id="inputGroup-sizing-lg">Grande</span>
</div>
describedby="inputGroup-sizing-lg">
</div>
Checkboxes e radios
Coloque qualquer checkbox ou radio dentro do addon de grupo de input, invés de texto.
Copy
<div class="input-group-text">
<input type="checkbox" aria-label="Chebox para permitir input text">
</div>
</div>
<input type="text" class="form-control" aria-label="Input text com checkbox">
</div>
<div class="input-group-text">
<input type="radio" aria-label="Botão radio para acompanhar input text">
</div>
</div>
<input type="text" class="form-control" aria-label="Input text com botão radio">
</div>
Múltiplos inputs
Apesar de múltiplos <input> serem suportados (visualmente), estilos de validação só estão disponíveis para
grupos de input com um único <input>.
Nome e sobrenome
Copy
<span class="input-group-text">Nome e sobrenome</span>
</div>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</div>
Múltiplos addons
Múltiplos add-ons são suportados e podem ser misturados com input checkbox e radio.
R$0.00
R$0.00
Copy
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="Quantia em Dollar (com ponto e duas casas
decimais)">
</div>
<input type="text" class="form-control" aria-label="Quantia em Dollar (com ponto e duas casas
decimais)">
<span class="input-group-text">0.00</span>
</div>
</div>
Botões addons
Botão
Botão
BotãoBotão
BotãoBotão
Copy
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Botão</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1">
</div>

<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's
username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Botão</button>
</div>
</div>

<div class="input-group-prepend" id="button-addon3">
<button class="btn btn-outline-secondary" type="button">Botão</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button
addons" aria-describedby="button-addon3">
</div>
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's
username with two button addons" aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
</div>
</div>
Botões com dropdowns

Dropdown
Dropdown
Copy
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">Dropdown</button>
<a class="dropdown-item" href="#">Ação</a>
<a class="dropdown-item" href="#">Algo mais aqui</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link isolado</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Input text com botão dropdown">
</div>
<input type="text" class="form-control" aria-label="Input text com botão dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">Dropdown</button>
</div>
</div>
</div>
Botões segmentados
AçãoDropdown
AçãoDropdown
Copy
<button type="button" class="btn btn-outline-secondary">Ação</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-
</button>
</div>
</div>
<input type="text" class="form-control" aria-label="Input dropdown com botão dropdown segmentado">
</div>
<input type="text" class="form-control" aria-label="Input dropdown com botão dropdown segmentado">
<button type="button" class="btn btn-outline-secondary">Ação</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-
</button>
</div>
</div>
</div>
Formulários personalizados
Grupos de input possuem suporte para selects e inputs de arquivos personalizados. As versões padrões de
browsers deles não é suportada.
Select personalizado
Opções
Opções
Botão
Botão
Copy
<label class="input-group-text" for="inputGroupSelect01">Opções</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
</select>
</div>
<select class="custom-select" id="inputGroupSelect02">
</select>
<label class="input-group-text" for="inputGroupSelect02">Opções</label>
</div>
</div>

</div>
<select class="custom-select" id="inputGroupSelect03" aria-label="Exemplo de select com botão addon">
</select>
</div>
<select class="custom-select" id="inputGroupSelect04" aria-label="Exemplo de select com botão addon">
</select>
</div>
</div>
Input de arquivo personalizado
Upload
Escolher arquivo
Escolher arquivo
Upload
Botão
Escolher arquivo
Escolher arquivo
Botão
Copy
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-
describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Escolher arquivo</label>
</div>
</div>

<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02" aria-
describedby="inputGroupFileAddon02">Escolher arquivo</label>
</div>
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
</div>
</div>

<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Botão</button>
</div>
</div>
</div>
</div>
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Botão</button>
</div>
</div>
Acessibilidade
Leitores de telas vão ter problemas com seus formulários se você não incluir um <label> para cada input.
Para estes grupos de input, se assegure de que qualquer label ou funcionalidade extra seja percebida pelas
A melhor técnica (elementos <label> escondidos usando a classe .sr-only ou o uso dos atributos aria-
label e aria-labelledby, possivelmente, acompanhados do aria-describedby) e informação a ser
transmitida vai variar, dependendo do tipo de interface que você está implementando. Os exemplos, nesta
seção, dão algumas sugestões, para casos diferentes.
Jumbotron
Componente leve e flexível para exibir conteúdo.
Um componente leve e flexível que pode se extender pela viewport inteira para exibir mensagens de market,
em seu site.
Olá, mundo!
Este é um simples componente jumbotron para chamar mais atenção a um determinado conteúdo ou
informação.
Ele usa classes utilitárias para tipografia e espaçamento de conteúdo, dentro do maior container.
Leia mais
Copy
<div class="jumbotron">
<h1 class="display-4">Olá, mundo!</h1>
<p class="lead">Este é um simples componente jumbotron para chamar mais atenção a um determinado
conteúdo ou informação.</p>
<hr class="my-4">
<p>Ele usa classes utilitárias para tipografia e espaçamento de conteúdo, dentro do maior
container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Leia mais</a>
</div>
Para um jumbotron com largura total e sem cantos arredondados, use a classe modificadora .jumbotron-
fluid e adicione um .container ou .container-fluid dentro do jumbotron.
Fluid jumbotron
Este é um jumbotron modificado que ocupa todo o espaço horizontal de seu elemento pai.
Copy
<div class="jumbotron jumbotron-fluid">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">Este é um jumbotron modificado que ocupa todo o espaço horizontal de seu elemento
pai.</p>
</div>
</div>
Grupo de lista
Grupos de listas são componentes flexíveis e poderosos para mostrar vários conteúdos. Modifique e
aprimore-o para suportar quase qualquer conteúdo.
Exemplo básico
O grupo de lista mais básico é uma <ul> com <li> e algumas classes específicas. Desenvolva com as opções
a seguir ou com seu próprio CSS, dependendo da sua necessidade.
• Cras justo odio

• Morbi leo risus
• Porta ac consectetur ac
Copy
<ul class="list-group">
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
</ul>
Itens ativos
Use .active em um .list-group-item para indicar a seleção ativa, no momento.
• Cras justo odio

• Morbi leo risus
Copy
<li class="list-group-item active">Cras justo odio</li>
</ul>
Itens desativados
Use .disabled em um .list-group-item para fazê-lo ter aparência desativada. Perceba que alguns
elementos com .disabled vão precisar de JavaScript customizado para desativar seus eventos de clique,
totalmente (ex: links).
• Cras justo odio

• Morbi leo risus
Copy
<li class="list-group-item disabled">Cras justo odio</li>
</ul>
Links e botões
Use <a> ou <button> para criar itens do grupo de lista acionáveis com estados hover, disabled e active,
adicionando .list-group-item-action. Nós separamos estas pseudo-classes, para assegurar que grupos de
listas feitos com elementos não interativos (tipo <li> ou <div>) não permitam insinuações de clique ou
toque.
Se assegure de não usar as classes .btn padrões, aqui.
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
Copy
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
Com <button>, você também pode fazer uso do atributo disabled, invés da classe .disabled. Infelizmente,
elementos <a> não suportam o atributo disabled.
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
Copy
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at
eros</button>
</div>
Flush
Use .list-group-flush para remover algumas bordas e cantos arredondados para renderizar itens do grupo
de lista, de ponta-a-ponta, em um container pai.
• Cras justo odio

• Morbi leo risus
Copy
</ul>
Classes contextuais
Use classes contextuais para estilizar itens da lista com belos caracteres e cor de fundo.
• Um simples item primary do grupo de lista
• Um simples item secondary do grupo de lista
• Um simples item success do grupo de lista
• Um simples item danger do grupo de lista
• Um simples item warning do grupo de lista
• Um simples item info do grupo de lista
• Um simples item light do grupo de lista
• Um simples item dark do grupo de lista
Copy
<li class="list-group-item list-group-item-primary">Um simples item primary do grupo de lista</li>

<li class="list-group-item list-group-item-secondary">Um simples item secondary do grupo de lista</li>
<li class="list-group-item list-group-item-success">Um simples item success do grupo de lista</li>
<li class="list-group-item list-group-item-danger">Um simples item danger do grupo de lista</li>
<li class="list-group-item list-group-item-warning">Um simples item warning do grupo de lista</li>
<li class="list-group-item list-group-item-info">Um simples item info do grupo de lista</li>
<li class="list-group-item list-group-item-light">Um simples item light do grupo de lista</li>
<li class="list-group-item list-group-item-dark">Um simples item dark do grupo de lista</li>
</ul>
Classes contextuais também funcionam com .list-group-item-action. Perceba a presença dos estilos hover,
os quais não estavam no presentes no exemplo anterior. O estado .activetambém é suportado, bastando
aplicá-lo para indicar uma seleção ativa em um item do grupo de lista.
Dapibus ac facilisis inUm simples item primary do grupo de listaUm simples item secondary do grupo de listaUm
simples item success do grupo de listaUm simples item danger do grupo de listaUm simples item warning do grupo
de listaUm simples item info do grupo de listaUm simples item light do grupo de listaUm simples item dark do grupo
de lista
Copy
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Um simples item

primary do grupo de lista</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Um simples item
secondary do grupo de lista</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Um simples item
success do grupo de lista</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Um simples item
danger do grupo de lista</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Um simples item
warning do grupo de lista</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Um simples item info
do grupo de lista</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Um simples item light
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Um simples item dark
</div>
Usando badges
Coloque badges em qualquer item do grupo de lista para exibir contadores, atividade e muito mais, com
ajuda de alguns utilitários.
• Cras alemanha odio7

• Dapibus ac facilisis inx
• Morbi brasil risus1
Copy
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras alemanha odio
<span class="badge badge-primary badge-pill">7</span>
</li>
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">x</span>
</li>
Morbi brasil risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Conteúdo customizado
Coloque quase qualquer HTML dentro, mesmo em grupos de listas linkados, como o mostrado abaixo, com
ajuda de utilitários flexbox.
Cabeçalho do item
3 dias atrás
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
Cabeçalho do item
3 dias atrás
Cabeçalho do item
3 dias atrás
Copy
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Cabeçalho do item</h5>
<small>3 dias atrás</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<small class="text-muted">3 dias atrás</small>
</div>
varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<small class="text-muted">3 dias atrás</small>
</div>
varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
Use o plugin JavaScript tab (inclua-o, individualmente, ou usando o arquivo compilado bootstrap.js) para
aprimorar nosso grupo de lista para criar paineis de abas de conteúdo local.
HomePerfilMensagensConfigurações
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor.
Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad
non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt
incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud
do aliquip veniam minim.
Copy
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
href="#lista-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list"
href="#list-profile" role="tab" aria-controls="profile">Perfil</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list"
href="#lista-mensagens" role="tab" aria-controls="messages">Mensagens</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list"
href="#lista-configuracoes" role="tab" aria-controls="settings">Configurações</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-
list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-
list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-
list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-
list">...</div>
</div>
</div>
</div>
via atributos data

Você pode ativar uma nevegação do grupo de lista, sem escrever qualquer JavaScript, simplesmente,
especificando data-toggle="list" em um elemento. Use estes atributos data em um .list-group-item.
Copy

<div class="list-group" id="minhaLista" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home"
role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#perfil"
role="tab">Perfil</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#mensagens"
role="tab">Mensagens</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#configuracoes"
role="tab">Configurações</a>
</div>


<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="perfil" role="tabpanel">...</div>
<div class="tab-pane" id="mensagens" role="tabpanel">...</div>
<div class="tab-pane" id="configuracoes" role="tabpanel">...</div>
</div>
Via JavaScript
Ative uma aba item de lista, via JavaScript (cada item de lista precisa ser ativado, individualmente):
Copy
$('#minhaLista a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Você pode ativar itens de listas individuais, em diversas maneiras:
Copy
$('#minhaLista a[href="#perfil"]').tab('show') // Selecione pelo ID da tag
$('#minhaLista a:first-child').tab('show') // Seleciona primeira aba
$('#minhaLista a:last-child').tab('show') // Seleciona última aba
$('#minhaLista a:nth-child(3)').tab('show') // Seleciona terceira aba
Efeito fade
Para fazer o painel de abas receber o efeito fade in, use .fade em cada .tab-pane. A primeira aba também
deve receber .show, para fazer o conteúdo inicial visível.
Copy
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="perfil" role="tabpanel">...</div>
<div class="tab-pane fade" id="mensagens" role="tabpanel">...</div>
<div class="tab-pane fade" id="configuracoes" role="tabpanel">...</div>
</div>
Métodos
$().tab
Ativa um item de lista e o container de conteúdo. Abas devem ter um data-target ou um href remetendo a
um container, no DOM.
Copy
<div class="list-group" id="minhaLista" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home"
role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#perfil"
role="tab">Perfil</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#mensagens"
role="tab">Mensagens</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#configuracoes"
role="tab">Configurações</a>
</div>
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="perfil" role="tabpanel">...</div>
<div class="tab-pane" id="mensagens" role="tabpanel">...</div>
<div class="tab-pane" id="configuracoes" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#minhaLista a:last-child').tab('show')
})
</script>
.tab(‘show’)
Seleciona o item de lista específico e mostra o painel associado a ele. Qualquer outro item de lista que foi,
anteriormente selecionado, se torna não selecionado e seu painel associado se esconde. Retorna ao
invocador, antes do painel de abas ser exibido, de fato (antes do evento shown.bs.tab ocorrer, por
exemplo).
Copy
$('#algumListItem').tab('show')
Eventos
Quando mostrando uma nova aba, os eventos se acionam na seguinte ordem:
1. hide.bs.tab (na aba ativa, no momento)

2. show.bs.tab (na aba que está para ser exibida)
3. hidden.bs.tab (na aba ativa anteriormente, a mesma do evento hide.bs.tab)
4. shown.bs.tab (na aba recém ativa, a mesma do evento show.bs.tab)
Se nenhuma aba já foi ativada, os eventos hide.bs.tab e hidden.bs.tab não serão mostrados.
show.bs.tab Este evento é acionado na exibição de aba, mas antes da nova aba ser exibida.
Use event.target e event.relatedTarget para atingir a aba ativa e a aba anteriormente ativa,
respectivamente.
shown.bs.tab Este evento é acionado na exibição de aba, depois da aba ser mostrada.
Use event.target e event.relatedTarget para atingir a aba ativa e a aba anteriormente ativa,
respectivamente.
hide.bs.tab Este evento é acionado quando uma nova aba está para ser exibida e a aba anterior está para ser
oculta. Use event.target e event.relatedTarget para atingir a aba ativa, no momento, e a próx
aba que está para ser ativa, respectivamente.
hidden.bs.tab Este evento é acionado depois de uma nova aba ser exibida e a aba ativada anteriormente estar
escondida. Use event.target e event.relatedTarget para atingir a aba ativa anteriormente e a
aba ativa, respectivamente.
Copy
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // Aba recém ativa
e.relatedTarget // Aba ativa anteriorment
})
Modal
Use o plugin JavaScript modal para criar diálogos em seu site para notificações e outros tipos de conteúdos
customizados.
Como funciona
Antes de começar a usar o modal Bootstrap, se assegure de ler o seguinte, já que nossas opções de menu
mudaram, recentemente.
• Modals são feitos com HTML, CSS e JavaScript;

o Eles são posicionados acima de todas as coisas do documento e removem rolagem do <body> para que
o conteúdo do modal role.
• Clicar na tela atrás do modal vai fazer com que ele seja fechado, automaticamente;
• Bootstrap só suporta uma janela modal, por vez;
o Modals aninhados não são suportados, já que acreditamos proporcionarem pobres experiências ou
usuário.
• Modals usam position: fixed, o que pode ser um pouco chatinha, no que diz a respeito de sua renderização;
o Sempre que possível, coloque o HTML do seu modal em uma posição prioritária para evitar potenciais
interferências de outros elementos;
o Você vai passar por problemas, quando aninhar um .modal com outro elemento fixo.
• Mais uma vez, devido a position: fixed, existem alguns problemas sobre o uso de modais em dispositivos
móveis;
o Veja nossa documentação de suporte a browsers, para mais detalhes.
• Dado como HTML5 define suas semânticas, o atributo HTML autofocus não tem efeito em modals Bootstrap.
o Para alcançar o mesmo efeito, use algum tipo de JavaScript customizado:
Copy
$('#meuModal').on('shown.bs.modal', function () {
$('#meuInput').trigger('focus')
})
Continue lendo, para demonstrações e instruções de uso.
Exemplos
Componentes modal
Abaixo, temos um exemplo de modal static (position e display sobrescritos). Pode-se ver o cabeçalho,
corpo (precisa de padding) e footer (opcional) do modal. Nós só pedimos que você crie cabeçalhos modal
com recursos de dispensa, sempre que possível, ou dê outra opção de dispensa ao usuário.
Título do modal
×
Texto do corpo do modal, é aqui.
FecharSalvar mudanças
Copy
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Título do modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
</button>
</div>
<div class="modal-body">
<p>Texto do corpo do modal, é aqui.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar mudanças</button>
</div>
</div>
</div>
</div>
Demonstração em tempo real
Veja um exemplo de modal, clicando no botão abaixo. Ele vai deslizar para baixo, enquanto aparece
gradualmente.
Abrir modal de demonstração
Copy

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExemplo">
</button>


<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
</button>
</div>
...
</div>
</div>
</div>
</div>
</div>
Rolando conteúdo longo
Quando modals são muito longos para a viewport do usuário ou dispositivo, eles possuem rolagem
independente da página. Teste a demo abaixo, para saber de oquê estamos falando.
Copy
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLongoExemplo">
</button>


<div class="modal fade" id="ModalLongoExemplo" tabindex="-1" role="dialog" aria-
labelledby="TituloModalLongoExemplo" aria-hidden="true">
<h5 class="modal-title" id="TituloModalLongoExemplo">Título do modal</h5>
</button>
</div>
...
</div>
</div>
</div>
</div>
</div>
Verticalmente centralizado
Use .modal-dialog-centered no .modal-dialog para, verticalmente, centralizar o modal.
Copy
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#ExemploModalCentralizado">
</button>


<div class="modal fade" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-
labelledby="TituloModalCentralizado" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<h5 class="modal-title" id="TituloModalCentralizado">Título do modal</h5>
</button>
</div>
...
</div>
</div>
</div>
</div>
</div>
Tooltips e popovers
Tooltips e popovers podem ser posicionados dentro de modals, sempre que necessário. Quando modals são
fechados, qualquer tooltip ou popover dentro deles e fechado, automaticamente.
Copy
<h5>Popover em um modal</h5>
<p>Este <a href="#" role="button" class="btn btn-secondary popover-test" title="Título do popover"
data-content="O conteúdo do popover é definido aqui.">botão</a> aciona um popover, ao clicar nele.</p>
<hr>
<h5>Tooltips em um modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">Este link</a> e <a href="#" class="tooltip-test"
title="Tooltip">este outro</a> mostra tooltips, quando passamos o mouse sobre eles.</p>
</div>
Usando o grid
Use o sistema grid Bootstrap dentro de um modal, aninhando .container-fluid no .modal-body. Depois, use
as classes do sistema grid, assim como faria em outros locais.
Copy
<div class="container-fluid">
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
Level 1: .col-sm-9
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Variando o conteúdo de modais
Tem vários botões que acionam o mesmo modal, mas com o conteúdo um pouco diferente?
Use event.relatedTarget e atributos HTML data-* (via jQuery, se possível) para variar o conteúdo do modal,
dependendo de qual botão foi clicado.
Abaixo, temos uma demonstração seguida de um exemplo HTML e JavaScript. Para mais informação, leia a
documentação de eventos do modal para detalhes sobre relatedTarget.
Falar com @mdo Falar com @fat Falar com @getbootstrap
Copy
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-
whatever="@mdo">Falar com @mdo</button>
whatever="@fat">Falar com @fat</button>
whatever="@getbootstrap">Falar com @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<h5 class="modal-title" id="exampleModalLabel">Nova mensagem</h5>
</button>
</div>
<form>
<label for="recipient-name" class="col-form-label">Destinatário:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<label for="message-text" class="col-form-label">Mensagem:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<button type="button" class="btn btn-primary">Enviar</button>
</div>
</div>
</div>
</div>
Copy
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Botão que acionou o modal
var recipient = button.data('whatever') // Extrai informação dos atributos data-*
// Se necessário, você pode iniciar uma requisição AJAX aqui e, então, fazer a atualização em um
callback.
// Atualiza o conteúdo do modal. Nós vamos usar jQuery, aqui. No entanto, você poderia usar uma
biblioteca de data binding ou outros métodos.
var modal = $(this)
modal.find('.modal-title').text('Nova mensagem para ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Remover animação
Para modals que, simplesmente, aparecem de supetão, invés de gradualmente, remova a classe .fade da
marcação do seu modal.
Copy
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
Alturas dinâmicas
Se a altura do modal muda enquanto é aberta, você deveria

invocar $('#meuModal').modal('handleUpdate') para reajustar a posição do modal, caso a barra de rolagem
apareça.
Acessibilidade
Se assegure de usar role="dialog" e aria-labelledby="...", remetendo o título do modal

ao .modal e role="document" ao .modal-dialog. Alternativamente, você pode dar uma descrição do seu
modal, no aria-describedby do .modal.
Embutindo vídeos do YouTube
Embutir vídeos do YouTube em modals pede JavaScript adicional, para parar o playback e outras coisas,
automaticamente. Veja este ótimo post, no Stack Overflow, para mais informação.
Tamanhos opcionais
Modals possuem três tamanhos alternativos, disponíveis via classes modificadoras e a serem colocadas em
um .modal-dialog. Estes tamanhos são cancelados, em certos breakpoints, para evitar rolagem horizontal
em viewports menores.
Tamanho Classe Modal max-width
Pequeno .modal-sm 300px
Padrão None 500px
Grande .modal-lg 800px
Extra grande .modal-xl 1140px
Our default modal without modifier class constitutes the “medium” size modal.
Extra large modal Large modal Small modal
Copy

<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large
modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-

labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
...
</div>
</div>
</div>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-
lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-

labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
...
</div>
</div>
</div>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-
sm">Modal pequeno</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-

labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
...
</div>
</div>
</div>
Modo de uso
O plugin modal alterna a visibilidade do seu conteúdo, via atributos data ou JavaScript. Ele também
coloca .modal-open no <body> para sobrescrever o comportamento padrão de rolagem e gerar um .modal-
backdrop para dar uma área de clique fora do modal que permite fechá-lo.
Via atributos data
Ativa o modal sem escrever JavaScript. Defina data-toggle="modal" em um elemento de controle (como um
botão), junto com um data-target="#foo" ou href="#foo" que remeta a um modal específico a ser acionado.
Copy
<button type="button" data-toggle="modal" data-target="#meuModal">Abrir modal</button>
Via JavaScript
Invoque um modal com ID meuModal, usando uma única linha JavaScript:
Copy
$('#meuModal').modal(options)
Parâmetros
Parâmetros podem ser passados via atributos data ou JavaScript. Para atributos data, anexe o nome do
parâmetro ao prefixo data-*, como em data-backdrop="".
backdrop booleano ou a string 'static' true Cria um elemento modal backdrop. Alternativamente, use static
um backdrop que não fecha o modal, ao clicar.
keyboard boolean true Fecha o modal, quando a tecla esc é pressionada.
focus boolean true Foca no modal, quando inicializado.
show boolean true Mostra o modal, quando inicializado.
Métodos


.modal(options)
Define seu conteúdo como um modal. Aceita um objeto de parâmetros, opcional.
Copy
$('#meuModal').modal({
keyboard: false
})
.modal('toggle')
Manualmente, alterna a visibilidade do modal. Retorna ao invocador, antes do modal ter sido exibido ou
escondido, de fato (antes dos eventos shown.bs.modal ou hidden.bs.modalocorrerem).
Copy
$('#meuModal').modal('toggle')
.modal('show')
Manualmente, abre o modal. Retorna ao invocador, antes do modal ter sido exibido, de fato (antes do
evento shown.bs.modal ocorrer).
Copy
$('#meuModal').modal('show')
.modal('hide')
Manualmente, esconde o modal. Retorna ao invocador, antes do modal ter sido escondido, de
fato (antes do evento hidden.bs.modal ocorrer).
Copy
$('#meuModal').modal('hide')
.modal('handleUpdate')
Manualmente, reajuste a posição do modal se a altura dele se alterar, enquanto está aberto (caso uma barra
de rolagem apareça).
Copy
$('#meuModal').modal('handleUpdate')
.modal('dispose')
Destrói o modal de um elemento.
Eventos
A classe modal Bootstrap possui alguns eventos para criar a funcionalidade modal, em si. Todos eventos
modal são acionados nele mesmo (no <div class="modal">).
show.bs.modal Este evento é acionado, imediatamente, quando o método show é invocado. Se acionado por um
o elemento clicado fica disponível como a propriedade relatedTarget do evento.
shown.bs.modal Este evento é acionado quando o modal se torna visível ao usuário (espera as transições CSS
finalizarem). Se acionado por um clique, o elemento clicado fica disponível como a
propriedade relatedTarget do evento.
hide.bs.modal Este evento é acionado, imediatamente, quando o método hide é invocado.
hidden.bs.modal Este evento é acionado quando o modal acaba de ser oculto ao usuário (espera as transições CSS
finalizarem).
Copy
$('#meuModal').on('hidden.bs.modal', function (e) {
// Faça algo, aqui...
})
Navs
Documentação e exemplos de como usar os componentes de navegação Bootstrap.
Nav: a base de tudo

A navegação disponível no Bootstrap compartilha várias marcações e estilos, desde a classe base .nav até os
estados ativo e desativo. Troque de classes modificadoras para mudar de estilo.
O componente .nav é feito com flexbox e provê uma forte fundação para construir todo tipo de
componente de navegação. Ela possui sobrescrição de alguns estilos para trabalhar com listas, padding em
links para criar áreas de clique maiores e estilo desativado básico.
O componente base .nav não inclui qualquer estado .active. Os exemplos seguintes possuem a classe,
principalmente, para demonstrar que esta classe não aciona nenhum estilo, em específico.
• Ativo
• Link
• Link
• Desativado
Copy
<ul class="nav">
</li>
</li>
</li>
</li>
</ul>
As classes são usadas por toda parte, então, sua marcação consegue ser muito flexível. Use um <ul> como
acima ou faça seu próprio, com um elemento <nav>. Devido o .nav usar display: flex, os links navs se
comportam da mesma forma que os itens nav, mas sem marcação HTML a mais.
AtivoLinkLinkDesativado
Copy
<nav class="nav">
</nav>
Estilos disponíveis
Mude o estilo do componente .nav com modificadores e utilitários. Você também pode misturar e
combinar, assim como construir seu próprio nav.
Alinhamento horizontal
Altere o alinhamento horizontal de seu nav com utilitários flexbox. Por padrão, navs são alinhados a
esquerda, mas você pode modificá-los para serem centralizados ou alinhados a direita, facilmente.
Centralizado, usando .justify-content-center:
• Ativo
• Link
• Link
• Desativado
Copy
<ul class="nav justify-content-center">
</li>
</li>
</li>
</li>
</ul>
Alinhado a direita, usando .justify-content-end:
• Ativo
• Link
• Link
• Desativado
Copy
<ul class="nav justify-content-end">
</li>
</li>
</li>
</li>
</ul>
Alinhamento vertical
Empilhe sua navegação, modificando a direção flex item com o utilitário .flex-column.
Precisa empilhar eles, em algumas viewports, mas não em outras? Use variações responsivas, como .flex-
sm-column.
• Ativo
• Link
• Link
• Desativado
Copy
<ul class="nav flex-column">
</li>
</li>
</li>
</li>
</ul>
Navegação vertical é possível sem <ul>, também.
Copy
<nav class="nav flex-column">
</nav>
Abas
Use o nav básico acima e coloque a classe .nav-tabs para gerar uma interface de abas. Use isso para criar
regiões de abas com nosso plugin JavaScript tab.
• Ativo
• Link
• Link
• Desativado
Copy
<ul class="nav nav-tabs">
</li>
</li>
</li>
</li>
</ul>
Pílulas
Pegue o mesmo HTML, mas use .nav-pills e obtenha o seguinte:
• Ativo
• Link
• Link
• Desativado
Copy
<ul class="nav nav-pills">
</li>
</li>
</li>
</li>
</ul>
Fill e justify
Force o conteúdo do seu .nav se extender por toda largura disponível com uma das duas classes
modificadoras. Para preencher, proporcionalmente, todo espaço disponível com seus .nav-item, use .nav-
fill. Perceba que todo espaço horizontal é ocupado, mas nem todo item nav tem a mesma largura.
• Ativo
• Link nav muito mais longo
• Link
• Desativado
Copy
<ul class="nav nav-pills nav-fill">
</li>
<a class="nav-link" href="#">Link nav muito mais longo</a>
</li>
</li>
</li>
</ul>
Quando usando uma navegação baseada em <nav>, se assegure de usar .nav-item, nas âncoras.
Copy
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Ativo</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Desativado</a>
</nav>
Para ter elementos com larguras idênticas, use .nav-justified. Todo espaço horizontal será ocupado por
links nav, mas diferente do .nav-fill acima, todo item nav terá a mesma largura.
AtivoLink nav muito mais longoLinkDesativado

Copy
<nav class="nav nav-pills nav-justified">
<a class="nav-link" href="#">Link nav muito mais longo</a>
</nav>
Similar ao exemplo .nav-fill usando uma navegação baseada em <nav>, se assegure de incluir .nav-item,
nas âncoras.
Copy
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">Ativo</a>
</nav>
Trabalhando com utilitários flex

Se precisar de variações nav responsivas, considere usar utilitários flexbox. Apesar de ser mais massante,
estes utilitários oferecem melhor customização, nos direntes breakpoints. No exemplo abaixo, nosso nav irá
se empilhar no menor breakpoint, então, voltar ao layout horizontal que preenche a toda largura disponível,
a partir do breakpoint small (sm).
Copy
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Ativo</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Desativado</a>
</nav>
Acessibilidade
Se você está usando navs para prover uma barra de navegação, se assegure de usar role="navigation" no
container pai mais lógico do <ul> ou envolva um elemento <nav> em toda navegação. Não adicione
o role no <ul>, porque isso evitaria que ele fosse transmitido como uma lista, de fato, para as tecnologias
assistivas.
Perceba que barras de navegação, mesmo que visualmente estilizadas como abas com a classe .nav-
tabs, não devem receber os atributos role="tablist", role="tab" ou role="tabpanel". Eles só são
adequados para interfaces com abas dinâmicas, como descrito em WAI ARIA Authoring Practices. Leia sobre
o comportamento JavaScript para aprender sobre interfaces de abas dinâmicas.
Usando dropdowns
Use menus dropdown com uma marcação HTML extra e o plugin JavaScript dropdown.
Abas com dropdowns
• Ativo
• Dropdown
• Link
• Desativado
Copy
<ul class="nav nav-tabs">
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-
haspopup="true" aria-expanded="false">Dropdown</a>
</div>
</li>
</li>
</li>
</ul>
Pílulas com dropdowns
• Ativo
• Dropdown
• Link
• Desativado
Copy
</li>
</div>
</li>
</li>
</li>
</ul>
Use o plugin JavaScript tab (inclua-o individualmente ou através do arquivo compilado bootstrap.js) para
aprimorar nossas abas ou pílulas navegacionais e criar paineis dinâmicos com conteúdo local, até mesmo
usando menus dropdown.
Se você está montando nosso JavaScript a partir da fonte, vai precisar do util.js.
Interfaces de abas dinâmicas, como descritas em WAI ARIA Authoring Practices, precisam
de role="tablist", role="tab", role="tabpanel" e atributos aria- extras, para transmitir sua estrutura,
funcionalidade e atual estado para os usuários de tecnologias assistivas.
Perceba que interfaces de abas dinâmicas não devem conter menus dropdowns, já que isso causa problemas
de usabilidade e acessibilidade. De uma perspectiva de usabilidade, o fato do elemento gatilho da aba
atualmente exibida não estar visível (já que está dentro do menu dropdown fechado) pode causar confusão.
Do ponto de vista de acessibilidade, atualmente, não há maneira sensata de mapear este tipo de construção
em um padrão WAI ARIA, significando que isso não pode ser, facilmente, indendido por usuários de
• Home
• Perfil
• Contato
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip
placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Copy
<ul class="nav nav-tabs" id="myTab" role="tablist">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-
controls="home" aria-selected="true">Home</a>
</li>
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#perfil" role="tab" aria-
controls="profile" aria-selected="false">Perfil</a>
</li>
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contato" role="tab" aria-
controls="contact" aria-selected="false">Contato</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="perfil" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contato" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Para ajudar em suas necessidades, isso funciona com uma marcação baseada em <ul> ou feita por você
mesmo. Perceba que se você está usando <nav>, não deveria usar role="tablist" diretamente nele, já que
isso sobrescreveria o role nativo do elemento, que é uma referência de navegação. Por isso, escolha um
elemento alternativo (um <div>, no exemplo abaixo) e o envolva com o <nav>.
HomePerfilContato
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat
veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non
irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim
occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.
Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat
anim ullamco ad duis occaecat ex.
Copy
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
aria-controls="nav-profile" aria-selected="false">Perfil</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
aria-controls="nav-contact" aria-selected="false">Contato</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-
tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-
tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-
tab">...</div>
</div>
O plugin tab também funciona com pílulas.
• Home
• Perfil
• Contato
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo
anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing
minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt
nostrud.
Copy
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-
controls="pills-profile" aria-selected="false">Perfil</a>
</li>
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-
controls="pills-contact" aria-selected="false">Contato</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-
tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-
tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-
tab">...</div>
</div>
Ele também funciona com pílulas verticais.
HomePerfilMensagensConfigurações
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt
do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit
excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim
reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt
minim occaecat.
Copy
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home"
role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false">Perfil</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages"
role="tab" aria-controls="v-pills-messages" aria-selected="false">Mensagens</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings"
role="tab" aria-controls="v-pills-settings" aria-selected="false">Configurações</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-
home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-
tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-
messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-
settings-tab">...</div>
</div>
</div>
</div>
Usando atributos data
Você pode ativar uma navegação em aba ou pílula sem escrever qualquer JavaScript, simplesmente,
especificando data-toggle="tab" ou data-toggle="pill", em um elemento. Use estes atributos data
em .nav-tabs ou .nav-pills.
Copy

</li>
</li>
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-
controls="messages" aria-selected="false">Mensagens</a>
</li>
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-
controls="settings" aria-selected="false">Configurações</a>
</li>
</ul>


<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="perfil" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Usando JavaScript
Ative abas dinâmicas, usando JavaScript (cada aba precisa ser ativada, individualmente):
Copy
$('#minhaAba a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Você pode ativar abas individuais, em diversas maneiras:
Copy
$('#minhaAba a[href="#perfil"]').tab('show') // Por ID
$('#minhaAba li:first-child a').tab('show') // Ativar o primeiro elemento filho
$('#minhaAba li:last-child a').tab('show') // Ativar o último elemento filho
$('#minhaAba li:nth-child(3) a').tab('show') // Selecionar um filho específico (terceiro, neste caso)
Efeito fade
Para fazer as abas terem o efeito fade in, use .fade em cada .tab-pane. O primeiro .tab-panetambém deve
ter .show para fazer o conteúdo inicial vísivel.
Copy
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="perfil" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Métodos

$().tab
Ativa uma aba e o container de conteúdo. Abas devem ter um data-target ou um href, remetenado a um
container presente no DOM.
Copy
</li>
</li>
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-
controls="messages" aria-selected="false">Mensagens</a>
</li>
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-
controls="settings" aria-selected="false">Configurações</a>
</li>
</ul>
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="perfil" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
$(function () {
$('#myTab li:last-child a').tab('show')
})
</script>
.tab(‘show’)
Seleciona uma aba específica e mostra seu painel associado. Qualquer outra aba que foi, anteriormente,
selecionada, é desselecionada e o seu painel oculto. Retorna ao invocador, antes da aba do painel ter
sido exibida, de fato (antes do evento shown.bs.tab ocorrer).
Copy
$('#algumaAba').tab('show')
.tab(‘dispose’)
Destrói a aba de um elemento.
Eventos
Quando mostrando uma nova aba, os eventos são acionados, na seguinte ordem:
1. hide.bs.tab (na aba ativa, no momento);

2. show.bs.tab (na aba que está para ser exibida);
3. hidden.bs.tab (na aba anteriormente ativa, a mesma do evento hide.bs.tab);
4. shown.bs.tab (na aba recém ativa e exibida, a mesma do evento show.bs.tab).
Se nenhuma aba já estava ativa, então, os eventos hide.bs.tab e hidden.bs.tab não serão acionados.

show.bs.tab Este evento é acionado na exibição de aba, mas antes da nova aba ser exibida.
Use event.target e event.relatedTarget para atingir a aba ativa e anteriormente ativa (se
disponível), respectivamente.
shown.bs.tab Este evento é acionado na exibição de aba, mas depois da exibição.
Use event.target e event.relatedTarget para atingir a aba ativa e anteriormente ativa (se
disponível), respectivamente.
hide.bs.tab Este evento é acionado quando uma nova aba está para ser exibida e a aba ativa,
anteriormente, está para ser oculta. Use event.target e event.relatedTarget para atingir a
atualmente, ativa e a que está para ser ativada, respectivamente.
hidden.bs.tab Este evento é acionado depois que uma nova aba é exibida e, portanto, a aba ativa
anteriormente é oculta. Use event.target e event.relatedTarget para atingir a aba,
anteriormente, ativa e a nova aba ativa, respectivamente.
Copy
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // aba que acabou de ser ativada
e.relatedTarget // aba, anteriormente, ativa
})
Navbar
Documentação e exemplos para o poderoso e responsivo cabeçalho de navegação, o navbar. Inclui suporte
para logo, navegação, plugin collapse e muito mais.
Como funciona
Aqui está oquê você precisa saber, antes de começar a usar o navbar:
• Navbars precisam de um .navbar com .navbar-expand{-sm|-md|-lg|-xl} (para responsividade) e

classes do esquema de cores;
• Navbars e seus conteúdos são fluidos, por padrão;
o Use containers alternativos para limitar suas larguras.
• Use nossas classes utilitárias de espaçamento e flex para controlar o espaço e alinhamento, dentro
das navbars;
• Navbars são responsivos, por padrão, mas você pode modificar isso, facilmente;
o Comportamento responsivo depende do nosso plugin JavaScript Collapse.
• Navbars são escondidos, por padrão, quando imprimindo. Forçe-os a serem imprimidos, usando a
classe .d-print no .navbar;
o Leia sobre a classe utilitária display.
• Garanta acessibilidade com o elemento <nav> ou, se estiver usando um elemento mais genérico
(como <div>), coloque role="navigation" em cada navbar para identificá-lo como tal, em tecnologias
assistivas.
Continue lendo para ver um exemplo e lista de sub-componentes suportados.
Conteúdo suportado
Navbars vem com suporte integrado para um punhado de sub-componentes. Escolha entre os seguintes,
sempre que precisar:
• .navbar-brand para o nome de seu projeto, produto ou companhia;

• .navbar-nav para obter uma leve navegação com suporte a dropdowns;
• .navbar-toggler para usar com nosso plugin collapse e outros comportamentos;
• .form-inline para qualquer campo de formulário e ações;
• .navbar-text para adicionar texto centralizado verticalmente;
• .collapse.navbar-collapse para agrupar e esconder conteúdos navbar, de acordo com o breakpoint
do pai.
Aqui está um exemplo de todos os sub-componentes incluídos em um navbar light responsivo, o qual
colapsa no breakpoint lg (large, em português: grande), automaticamente.
Navbar
• Home(página atual)
• Link
• Dropdown
• Desativado
Pesquisar
Copy
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-
label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="conteudoNavbarSuportado">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(página atual)</span></a>
</li>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
</div>
</li>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Pesquisar</button>
</form>
</div>
</nav>
Este exemplo usa utilitários de cor (bg-light) e espaçamento (my-2, my-lg-0, mr-sm-0 e my-sm-0).
Marca
A classe .navbar-brand pode ser aplicada na maioria dos elementos, mas uma âncora funciona melhor, já
que alguns elementos precisam de classes utilitárias ou estilos customizados.
NavbarNavbar
Copy

<nav class="navbar navbar-light bg-light">
</nav>


<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
Colocar imagens no .navbar-brand vai, provavelmente, sempre precisar de estilos customizados ou utilitários
para dimensionamento, adequado. Aqui estão alguns exemplos para demonstrar.
Copy

<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
Bootstrap
Copy

<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block
align-top" alt="">
Bootstrap
</a>
</nav>
Nav
Links de navegação navbar são feitos com nossas opções .nav, suas próprias classes modificadoras e
precisam usar classes togglers, para estilização responsiva apropriada. Navegação em navbars também
vão crescer para ocupar o maior espaço horizontal possível, mantendo os conteúdos do seu navbar
alinhados.
Estados ativos (classe .active) para indicar a página atual podem ser aplicados, diretamente, no .nav-
link ou seus pais imediatos .nav-item.
Navbar
• Home(Página atual)
• Destaques
• Preços
• Desativado
Copy
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Alterna navegação">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
</li>
<a class="nav-link" href="#">Destaques</a>
</li>
<a class="nav-link" href="#">Preços</a>
</li>
</li>
</ul>
</div>
</nav>
E porque nós usamos classes em nossos navs, você pode evitar a abordagem baseada em lista, se quiser.
Navbar
Home(Página atual)DestaquesPreçosDesativado
Copy
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Alterna navegação">
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(Página atual)</span></a>
<a class="nav-item nav-link" href="#">Destaques</a>
<a class="nav-item nav-link" href="#">Preços</a>
</div>
</div>
</nav>
Você também pode usar dropdowns em seu nav da navbar. Menus dropdown precisam de um elemento
envolto para posicionamento, então, se assegure de usar elementos aninhados e separados para .nav-
item e .nav-link, como mostrado abaixo.
Navbar
• Destaques
• Preços
• Link dropdown
Copy
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Alterna navegação">
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
</li>
</li>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-
Link dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
</div>
</li>
</ul>
</div>
</nav>
Formulários
Coloque vários campos de formulário e componentes, dentro de um navbar com .form-inline.
Pesquisar
Copy
</form>
</nav>
Elementos filhos imediatos no .navbar usam layout flex e vão ter justify-content: between, por padrão.
Use utilitários flex sempre que precisar, para ajustar este comportamento.
Navbar
Pesquisar
Copy
<a class="navbar-brand">Navbar</a>
</form>
</nav>
Grupos de input também funcionam:
Copy
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Usuário" aria-label="Usuário" aria-
describedby="basic-addon1">
</div>
</form>
</nav>
Vários botões dentro dos formulários navbar também são suportados. Isso é um bom lembrete que
utilitários de alinhamento vertical podem ser usados para linhar elementos de diferentes tamanhos.
Botão principalBotão menor

Copy
<button class="btn btn-outline-success" type="button">Botão principal</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Botão menor</button>
</form>
</nav>
Texto
Navbars podem conter pedaços de textos, com ajuda do .navbar-text. Esta classe configura o alinhamento
vertical e espaçamento horizontal, em linhas de textos.
Texto navbar com um elemento inline

Copy
<span class="navbar-text">
</span>
</nav>
Misture e combine com outros componentes e utilitários, se precisar.
Navbar com texto
• Destaques
• Preços

Copy
<a class="navbar-brand" href="#">Navbar com texto</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#textoNavbar" aria-
controls="textoNavbar" aria-expanded="false" aria-label="Alterna navegação">
</button>
<div class="collapse navbar-collapse" id="textoNavbar">
<ul class="navbar-nav mr-auto">
</li>
</li>
</li>
</ul>
<span class="navbar-text">
</span>
</div>
</nav>
Esquema de cores
Tematizar o navbar nunca foi tão fácil, graças a combinação de classes temas e utilitários background-color.
Escolha de .navbar-light (cores de fundo leves) até .navbar-dark (cores de fundo escuras). Depois,
personalize o resto com utilitários .bg-*.
Navbar
• Destaques
• Preços
• Sobre
Pesquisar
Navbar
• Destaques
• Preços
• Sobre
Pesquisar
Navbar
• Destaques
• Preços
• Sobre
Pesquisar
Copy
<nav class="navbar navbar-dark bg-dark">

</nav>
<nav class="navbar navbar-dark bg-primary">

</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">

</nav>
Containers
Apesar de não ser necessário, você pode envolver um .container em um navbar para centralizá-lo na página
ou colocar um .container dentro para centralizar os conteúdos de um navbar top fixo ou estático.
Navbar
Copy
</nav>
</div>
Quando o container está dentro do seu navbar, seu padding horizontal é removido em breakpoints menores
que sua classe .navbar-expand{-sm|-md|-lg|-xl} especificada. Isso garante que não dobraremos o padding,
desnecessariamente, em viewports menores, quando seu navbar está expandido.
Navbar
Copy
</div>
</nav>
Posicionamento
Use nossos utilitários de posicionamento para posicionar navbars em locais não estáticos. Escolha entre fixo
ao topo, fixo a parte inferior ou sticky top (rola com a página e fica fixo, quando ele alcança a topo). Navbars
fixos usam position: fixed, significando que eles estão a parte do fluxo comum do DOM e podem precisar
CSS customizado (ex: padding-top no <body>) para evitar sobreposição com outros elementos.
Também perceba que .sticky-top usa position: sticky, oquê não é suportado, totalmente, em todos
browsers.
Padrão
Copy
<a class="navbar-brand" href="#">Padrão</a>
</nav>
Fixo na parte superior
Copy
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixo na parte superior</a>
</nav>
Fixo na parte inferior
Copy
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixo na parte inferior</a>
</nav>
Sticky top
Copy
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
Comportamentos responsivos
Navbars podem utilizar classes .navbar-toggler, .navbar-collapse e .navbar-expand{-sm|-md|-lg|-xl} para
alterar quando o conteúdo colapsa, atrás do botão. Em combinação com outros utilitários, você pode
escolher quando mostrar ou esconder certos elementos, facilmente.
Para navbars que não estão sempre colapsados, use a classe .navbar-expand no navbar. Para navbars que
estão sempre colapsados, não coloque nenhuma classe .navbar-expand.
Toggler
Togglers navbar são alinhados a esquerda, por padrão, mas se eles seguem um elemento irmão
como .navbar-brand, vão ser alinhados a direita, automaticamente. Revertendo sua marcação HTML vai
reverter o posicionamento do toggler.
Abaixo, temos exemplos de diferentes estilos de togglers.
Sem .navbar-brand exibido, em breakpoints menores:
Marca escondida
• Link
• Desativado
Pesquisar
Copy
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Alterna navegação">
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Marca escondida</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
</li>
</li>
</li>
</ul>
</form>
</div>
</nav>
Com o nome da marca exibido na esquerda e o toggler na direita:
Navbar
• Link
• Desativado
Pesquisar
Copy
</button>

</li>
</li>
</li>
</ul>
<input class="form-control mr-sm-2" type="search" placeholder="Pesquisar">
</form>
</div>
</nav>
Com toggler na esquerda e nome da marca na direita:
Navbar
• Link
• Desativado
Pesquisar
Copy
</button>

</li>
</li>
</li>
</ul>
</form>
</div>
</nav>
Conteúdo externo
Algumas vezes você quer usar o plugin collapse para acionar conteúdo oculto, em algum lugar da página.
Porque nosso plugin funciona com o pareamento de id e data-target, isso pode ser feito, facilmente!
Copy
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Conteúdo expandido</h5>
<span class="text-muted">Expansível, atráves da marca no navbar.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false"
aria-label="Alterna navegação">
</button>
</nav>
</div>
Paginação
Documentação e exemplos de paginação para indicar um série de conteúdos relacionados, existentes em
várias páginas.
Own your code from end to end. Resolve errors way faster right in your workflow.ads via Carbon
Visão geral
Nós usamos um grande bloco de links conectados para nossa paginação, fazendo-os fácil de clicar e escalar.
A paginação é feita com elementos HTML de lista para que leitores de telas possam anunciar o número de
links disponíveis. Use um elemento <nav> como envolto para identificá-lo como uma seção de navegação
aos leitores de telas e outras tecnologias assistivas.
Além do mais, já que as páginas possuem mais de uma seção de navegação, normalmente, é aconselhado
usar um aria-label descritivo, no <nav>. Por exemplo, se o componente de paginação é usado para navegar
entre um conjunto de resultados de pesquisa, uma boa aria-label seria aria-label="Páginas dos
resultados de pesquisa".
• Anterior
• 1
• 2
• 3
• Próximo
Copy
<nav aria-label="Navegação de página exemplo">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Anterior</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Próximo</a></li>
</ul>
</nav>
Trabalhando com ícones

Querendo usar um ícone ou símbolo, no lugar de texto, em alguns links de paginação? Se assegure de usar
os atributos aria apropriados e utilitários .sr-only.
• «Anterior
• 1
• 2
• 3
• »Próximo
Copy
<li class="page-item">
<a class="page-link" href="#" aria-label="Anterior">
<span aria-hidden="true">«</span>
</a>
</li>
<a class="page-link" href="#" aria-label="Próximo">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Estados desativado e ativado

Links de paginação são personalizáveis para diferentes ocasiões. Use .disabled para links não poderem ser
clicados e .active para indicar a página atual.
Apesar da classe .disabled usar pointer-events: none para tentar desativar a funcionalidade de link do <a>,
esta propriedade CSS ainda não é padronizada e não conta com navegação pelo teclado. Assim, você deve
sempre colocar tabindex="-1" em links desativados e usar JavaScript personalizado para desativar suas
funcionalidades, totamente.
• Anterior
• 1
• 2(atual)
• 3
• Próximo
Copy
<nav aria-label="...">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Anterior</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(atual)</span></a>
</li>
<a class="page-link" href="#">Próximo</a>
</li>
</ul>
</nav>
Opcionalmente, você pode trocar âncoras ativadas e desativadas por <span> ou, omitir a âncora no caso de
flechas anterior/próximo, para remover a funcionalide de clique e evitar foco de teclado, enquanto mantém
os estilos.
• Anterior
• 1
• 2(atual)
• 3
• Próximo
Copy
<span class="page-link">Anterior</span>
</li>
<li class="page-item active">
<span class="page-link">
2
<span class="sr-only">(atual)</span>
</span>
</li>
</li>
</ul>
</nav>
Tamanhos
Paginação grande e chique ou pequena? Use .pagination-lg ou .pagination-sm para desfrutar dos
diferentes tamanhos.
• 1
• 2
• 3
Copy
<ul class="pagination pagination-lg">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
</ul>
</nav>
• 1
• 2
• 3
Copy
<ul class="pagination pagination-sm">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
</ul>
</nav>
Alinhamento
Altere o alinhamento dos componentes de paginação, usando utilitários flexbox.
• Anterior
• 1
• 2
• 3
• Próximo
Copy
<ul class="pagination justify-content-center">
</li>
</li>
</ul>
</nav>
• Anterior
• 1
• 2
• 3
• Próximo
Copy
<ul class="pagination justify-content-end">
</li>
</li>
</ul>
</nav>
Popovers
Documentação e exemplos para criar popovers Bootstrap (igual aqueles do iOS), em qualquer elemento do
seu site.
Try DigitalOcean today and get a free $100 credit.ads via Carbon
Visão geral
Coisas para saber, quando usando o plugin popover:
• O popover depende da biblioteca externa Popper.js, para posicionamento. Você deve

colocar popper.min.js antes de bootstrap.js ou usar bootstrap.bundle.min.js / bootstrap.bundle.js, os
quais contém Popper.js para o popover funcionar.
• Popovers precisam do plugin tooltip, como sua dependência;
• Se você está montando o JavaScript a partir da fonte, vai precisar do util.js;
• Popovers são opcionais por motivos de desempenho, então, você deve inciá-lo, por conta própria;
• Atributos title e content vazios nunca vão ser mostrados em um popover;
• Declare container: 'body' para evitar problemas de renderização, em componentes mais complexos (como
nos grupos de inputs ou botões);
• Acionar popovers em elementos ocultos não funciona;
• Popovers em elementos .disabled ou disabled devem ser acionados em um elemento pai;
• Quando acionados por âncoras que envolvem várias linhas, os popovers serão centralizados entre a largura
total das âncoras. Use white-space: nowrap; em seus <a>, para evitar este comportamento.
• Popovers devem ser ocultos, antes que seus elementos correspondentes sejam removidos do DOM.
Continue lendo, para ver como popovers funcionam, em alguns exemplos.
Ative popovers, em qualquer lugar.

Uma maneira de inicializar todos popovers, em uma página, seria selecioná-los por seus atributos data-
toggle:
Copy
$(function () {
$('[data-toggle="popover"]').popover()
})
Usando o parâmetro container.

Quando você tem alguns estilos em um elemento pai que interfere no popover, você vai querer especificar
um container personalizado para que, pelo contrário, o HTML do popover apareça dentro do elemento.
Copy
$(function () {
$('.popover-exemplo').popover({
container: 'body'
})
})
Demonstração
Clique para ver o popover
Copy
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Título do popover"
data-content="Aqui vai algum tipo de conteúdo. Muito da hora, né?!">Clique para ver o popover</button>
As quatro direções
Quatro opções de direção estão disponíveis: top, right, bottom e left.
Popover na parte superior Popover na direita Popover na parte inferior Popover na esquerda
Copy
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-
placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover na parte superior
</button>

placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover na direita
</button>

placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover na parte inferior
</button>

placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover na esquerda
</button>
Dispensar no próximo clique
Use o gatilho focus para dispensar popovers, no próximo clique do usuário, em um elemento diferente do
qual ativou o popover.
Marcação HTML necessária para dispensar, no próximo clique.

Para um comportamento cross-browser e cross-platform, adequado, você deve usar a tag <a>,
mas não<button>. Além do mais, você deve usar o atributo tabindex.
Popover dispensável
Copy
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus"
title="Popover dispensável" data-content="Aqui vai algum tipo de conteúdo. Muito da hora, né?!">Popover
dispensável</a>
Copy
$('.popover-dismiss').popover({
trigger: 'focus'
})
Elementos desativados
Elementos com o atributo disabled não são interativos, significando que usuários não podem passar o
mouse sobre eles ou clicar para acionar um popover ou tooltip. Como uma forma de contornar a situação,
você vai querer acionar o popover a partir de um elemento pai <div> ou <span> e sobrescrever o pointer-
eventer, no elemento desativado.
Para acionadores de popovers desativados, você também podem preferir usar data-trigger="hover" para
que o popover apareça como um feedback visual imediato para seus usuários, já que eles esperam não ter
que clicar em um elemento desativado.
Botão desativado
Copy
<span class="d-inline-block" data-toggle="popover" data-content="Popover desativado">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Botão
desativado</button>
</span>
Modo de uso
Ative popovers, via JavaScript:
Copy
$('#exemplo').popover(options)
Parâmetros
Parâmetros podem ser passados via atributos data ou JavaScript. No caso de atributos data, anexe o nome
do parâmetro ao prefixo data-, como em data-animation="".
animation booleano true Aplica um transição fade CSS, no popover.
container string | false Anexa o popover, em um elemento espec

elemento | Este parâmetro é, particularmente, útil po
false permite você posiciona o popover, no flu
documento, perto do elemento gatilho. Is
vai evitar que o popover flutue para long
elemento gatilho, durante redimensionam
de janela. Exemplo de uso: container: 'b
content string | '' Valor padrão do conteúdo, se o atributo
elemento | content não está presente.
função
Se uma função é provida, ela vai ser invoc

com sua referência this definida no elem
que o popover é anexado.
delay number | 0 Atraso na hora de exibir ou ocultar o pop
objeto em ms. Não se aplica ao tipo de acionam
manual.
Se um número é provido, o atraso é aplic

tanto em exibição, quanto em ocultação.
A estrutura do objeto é: delay: { "show":

500, "hide": 100 }
html booleano false Coloque HTML, dentro do popover. Se falso,
método jQuery text será usado para inserir
conteúdo no DOM. Use texto, se você está
preocupado com ataques XSS.
placement string | 'right' Define como posicionar o popover (auto,

função botton, left ou right). Quando auto é defi
ele vai reorientar o popover, dinamicame
Quando uma função é usada para determ

o posicionamento, ela é invocada com o
DOM do popover, como seu primeiro
argumento e aciona o nó DOM como o
segundo argumento. O contexto this é
definido na instância popover.
selector string | false Se um seletor é provido, objetos popover ser
false delegados a alvos específicos. Na prática, isso
usado para permitir um conteúdo HTML dinâ
ter popover. Veja isto e um exemplo informa
template string '<div class="popover" HTML base para criar um popover.

role="tooltip"><div
class="arrow"></div><h3
O title do popover será injetado em
class="popover-header"></h3><div
class="popover-body"></div></div>' um .popover-header.
O content do popover será injetado em

um .popover-body.
O .arrow se tornará a flecha do popover.
O elemento pai mais externo deve recebe

classe .popover.
title string | '' Valor padrão para o título, se o
elemento | atributo title não está presente.
função
Se uma função é provida, ela vai ser invoc
com sua referência this definida no elem
que o popover é anexado.
trigger string 'click' Define como o popover é acionado - clique |

| focus | manual. Você pode passar vários
acionadores, separando eles com espaço. No
entanto, manual não pode ser passado com o
acionadores.
offset number | 0 Define o deslocamento do popover, em relaç

string seu alvo. Para mais informação, leia
a documentação offset do Popper.js.
fallbackPlacement string | 'flip' Permite especificar qual posição Popper vai u

array em fallback. Para mais informação leia
a documentação de comportamento do Pop
boundary string | 'scrollParent' Limite de transbordamento do popover. Acei

elemento valores 'viewport', 'window', 'scrollParen
uma referência HTMLElement (apenas JavaSc
Para mais informação, leia a documentação
preventOverflow do Popper.js.
Atributos data para popovers individuais

Parâmetros para popovers individuais podem ser, opcionalmente, especificados usando atributos data, como
explicado acime.
Métodos


$().popover(options)
Inicializa popovers em uma coleção de elementos.
.popover('show')
Revela o popover de um elemento. Retorna ao invocador, antes do popover ter sido exibido, de
fato (antes do evento shown.bs.popover ocorrer). Isto é considerado um acionamento “manual” do popover.
Popovers, os quais possuem atributos title e contentvazios, nunca são exibidos.
Copy
$('#elemento').popover('show')
.popover('hide')
Esconde o popover de um elemento. Retorna ao invocador, antes do popover ter sido escondido, de
fato (antes do evento hidden.bs.popover ocorrer). Isto é considerado um acionamento “manual” do
popover.
Copy
$('#elemento').popover('hide')
.popover('toggle')
Alterna a visibilidade do popover de um elemento. Retorna ao invocador, antes do popover ter sido
escondido ou exibido, de fato (antes dos eventos shown.bs.popover e hidden.bs.popover ocorrerem). Isto é
considerado um acionamento “manual” do popover.
Copy
$('#elemento').popover('toggle')
.popover('dispose')
Esconde e destrói o popover de um elemento. Popovers que usam delegação (são criados usando o
parâmetro selector), não podem ser destruídos individualmente, em elementos gatilhos descendentes.
Copy
$('#elemento').popover('dispose')
.popover('enable')
Dá ao popover de um elemento a habildiade de ser exibido. Ativado por padrão.
Copy
$('#elemento').popover('enable')
.popover('disable')
Retira a habilidade do popover de um elemento de ser exibido. O popover só poderá ser exibido, se este
método for reativado.
Copy
$('#elemento').popover('disable')
.popover('toggleEnabled')
Alterna a habilidade do popover de um elemento ser exibido ou oculto.
Copy
$('#elemento').popover('toggleEnabled')
.popover('update')
Atualiza a posição do popover de um elemento.
Copy
$('#elemento').popover('update')
Eventos
Evento Descrição
show.bs.popover Este evento é acionado, imediatamente, quando o método show é invocado.
shown.bs.popover Este evento é acionado quando o popover se torna visível ao usuário (espera as transições CSS se
finalizadas).
hide.bs.popover Este evento é acionado, imediatamente, quando o método hide é invocado.
hidden.bs.popover Este evento é acionado quando o popover não está mais oculto ao usuário (espera as transições C
serem finalizadas).
Evento Descrição
inserted.bs.popover Este evento é acionado depois do evento show.bs.popover, quando o template do popover é
adicionado ao DOM.
Copy
$('#meuPopover').on('hidden.bs.popover', function () {
})
Progress
Documentação e exemplos de uso das barras de progresso Bootstrap, além de barras empilhadas,
backgrounds animados e rótulos.
Como funciona
Componentes de progresso são feitos com dois elementos HTML, um pouco de CSS para a largura e outros
atributos. Não usamos o elemento HTML5 <progress> para garantir que você possa empilhar barras de
progresso e colocar textos sobre elas.
• Nós usamos o elemento com .progress como um envolto para indicar o valor máximo da barra de
progresso;
• Nós usamos o elemento interno com .progress-bar para indicar o progresso da barra, até então;
• A .progress-bar exige um CSS inline, classe utilitária ou CSS personalizado, para definir sua largura;
• A classe .progress-bar também exige o uso de alguns atributos role e aria para fazê-lo acessível.
Junte tudo isso e consiga o seguinte:
Copy
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-
valuemax="100"></div>
</div>
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
Bootstrap provê um punhado de utilitários para definir largura. Dependendo de suas necessidades, elas
podem ajudar a configurar seu progresso, rapidamente.
Copy
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-
valuemax="100"></div>
</div>
Rótulos
Use rótulos em suas barras de progressos, colocando texto dentro do elemento com .progress-bar.
25%
Copy
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">25%</div>
</div>
Altura
Nós só definimos um valor para altura no .progress, então, se você alterar o valor, o elemento
interno .progress-bar vai se redimensionar propocionalmente, automaticamente.
Copy
<div class="progress" style="height: 1px;">
</div>
<div class="progress" style="height: 20px;">
</div>
Backgrounds
Use classes utilitárias de background para mudar a aparência das barras de progresso.
Copy
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-
</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-
</div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-
</div>
Múltiplas barrras
Crie várias barras de progresso, dentro de um único componente de progresso, se precisar.
Copy
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-
</div>
Listrada
Adicione .progress-bar-striped em qualquer .progress-bar para aplicar uma listra sobre a cor de fundo, via
gradiente CSS.
Copy
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-
valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-
</div>
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-
</div>
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-
</div>
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-
</div>
Listras animadas
O gradiente listrado também pode ser animado. Use .progress-bar-animated no .progress-bar para animar
as listras, da direita para esquerda, via animações CSS3.
Ligar animação
Copy
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-
valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
Scrollspy
Automaticamente, atualize componentes de navegação ou grupo de listas, baseando-se na área visível do
site, para indicar qual link está ativo na viewport, no momento.
Try PhpStorm - the PHP IDE that gets your code. Free trial, license from $119.ads via Carbon
Como funciona
O scrollspy tem algumas exigências para funcionar direito:
• Se você está montando nosso JavaScript a partir da fonte, precisará do util.js;

• Este componente deve ser usado em um componente nav ou grupo de lista;
• Scrollspy pede que tenha position: relative; no elemento que você está espiando a área visível
(normalmente, é o <body>);
• Quando espiando elementos que não sejam o <body>, se assegure de ter declarado height e overflow-y:
scroll;;
• É preciso usar âncoras (<a>), as quais devem referenciar o elemento, com o idespecificado.
Quando implementado com sucesso, sua nav ou grupo de lista vai se atualizar de acordo com a área visível,
movendo a classe .active de um item para o outro.
Exemplo com navbar

Role a área abaixo do navbar e veja a classe .active mudar de elemento. Os itens dropdown vão ser
destacados, de acordo com a área visível, também.
Navbar
• @fat
• @mdo
• Dropdown
@fat
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr
farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3
wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't
heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred
irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat
mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck,
mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis
gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
um
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing
banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park
consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger
bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
dois
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam.
Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure
four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art
party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi
sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud
mlkshk brooklyn nesciunt.
três
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr
farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3
wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't
heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred
irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch
nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit.
VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Copy
<nav id="navbar-exemplo2" class="navbar navbar-light bg-light">
<a class="nav-link" href="#fat">@fat</a>
</li>
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<a class="dropdown-item" href="#um">um</a>
<a class="dropdown-item" href="#dois">dois</a>
<a class="dropdown-item" href="#tres">tres</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-exemplo2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="um">um</h4>
<p>...</p>
<h4 id="dois">dois</h4>
<p>...</p>
<h4 id="tres">tres</h4>
<p>...</p>
</div>
Exemplo com nav aninhada

Scrollspy também funciona com .navs aninhados. Se um .nav está ativo, seu pai também estará ativado. Role
pela a área próximo ao navbar e veja a classe .active ser alterada.
NavbarItem 1Item 1.1Item 1.2Item 2Item 3Item 3.1Item 3.2
Item 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna
ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum
incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod
consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore
ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat
commodo velit ut eiusmod cupidatat elit dolore.
Item 1.1
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui
et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure
consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua
commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat
non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim
commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint
dolor elit cillum anim et fugiat.
Item 2.2
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris
mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum
cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse
elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
Item 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non
elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt
sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur
commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo
tempor sunt in proident.
Item 3
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat
minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex
pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 3.1
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim
exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore
reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure
nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim
enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum
esse eiusmod irure proident ipsum esse qui.
Item 3.2
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute
reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit
incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation
cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in
veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
Copy
<nav id="navbar-exemplo3" class="navbar navbar-light bg-light">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1.1</a>
</nav>
</nav>
</nav>
</nav>
<div data-spy="scroll" data-target="#navbar-exemplo3" data-offset="0">

<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1.1</h5>
<p>...</p>
<h5 id="item-1-2">Item 2.2</h5>
<p>...</p>
<p>...</p>
<p>...</p>
<h5 id="item-3-1">Item 3.1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3.2</h5>
<p>...</p>
</div>
Exemplo com grupo de lista

O Scrollspy também funciona com .list-group. Role na área próxima ao grupo de lista e veja a classe ativa
mudar.
Item 1Item 2Item 3Item 4
Item 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna
ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum
incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod
consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore
ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat
commodo velit ut eiusmod cupidatat elit dolore.
Item 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non
elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis
laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt
sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur
commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo
tempor sunt in proident.
Item 3
Item 4
Copy
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
Modo de uso
Via atributos data
Para implementar o comportamento scrollspy na sua navegação superior, facilmente, coloque data-
spy="scroll" no elemento que você quer espiar a área visível (o <body>, normalmente). Depois, coloque o
atributo data-target com o ID ou classe do elemento pai de qualquer componente Bootstrap .nav.
Copy
body {
position: relative;
}
Copy
<body data-spy="scroll" data-target="#navbar-exemplo">
...
<div id="navbar-exemplo">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Via JavaScript
Depois de adicionar position: relative; em seu CSS, invoque o scrollspy, assim:
Copy
$('body').scrollspy({ target: '#navbar-exemplo' })
IDs alvos válidos são obrigatórios
Links do navbar devem ter IDs alvos válidos. Por exemplo, um <a href="#home">home</a> deve remeter a
algo no DOM como <div id="home"></div>.
Elementos alvos invisíveis (sem :visible) são ignorados
Elementos alvos que não não são considerados visíveis pelo jQuery vão ser ignorados e seus itens nav,
correspondentes, serão destacados.
Métodos
.scrollspy('refresh')
Quando usando scrollspy, ao mesmo tempo que adiciona ou remove elementos do DOM, você precisará
invocar o método refresh, de tal forma:
Copy
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
.scrollspy('dispose')
Destrói o scrollspy vinculado a um elemento.
Parâmetros
do parâmetro ao prefixo data-, como em data-offset="".
offset number 10 Pixels para deslocar, a partir do topo, quando calculando a posição do scroll.
Eventos
activate.bs.scrollspy Este evento é acionado no elemento de rolagem, quando um item se torna ativado pelo scrollspy.
Copy
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
})
Tooltips
Documentação e exemplos para criar tooltips Bootstrap personalizados com CSS e JavaScript, usando CSS3
para animações e atributos data para armazenamento local de título.
Visão geral
Oquê saber, quando usar o plugin tooltip:
• Tooltips dependem da biblioteca externa Popper.js, para posicionamento;

o Você deve colocar popper.min.js antes do bootstrap.js ou
usar bootstrap.bundle.min.js / bootstrap.bundle.js, os quais já possuem Popper.js.
• Se você está montando nosso JavaScript a partir da fonte, vai precisar do util.js;
• Tooltips são opcionais por questões de desempenho, então, você deve inicializá-lo por conta própria;
• Tooltips com title sem valor, nunca serão exibidos;
• Declare container: 'body' para evitar problemas de renderização, em componentes mais complexos (como
grupos de botões ou input);
• Acionar tooltips em elementos ocultos não é possível;
• Tooltips para elementos .disabled ou disabled devem ser acionados em um elemento pai;
• Quando acionados a partir de âncoras que envolvem várias linhas, tooltips são centralizados;
o Use white-space: nowrap; nos <a> para evitar este comportamento.
• Tooltips devem ser escondidos, antes que seus elementos correspondentes sejam removidos do DOM.
Pegou tudo isso? Perfeito! Vamo ver como isso funciona, em algums exemplos.
Ative tooltips, em qualquer lugar.

Uma maneira de inicializar todos tooltips, em uma página, seria selecioná-los por seus atributos data-toggle:
Copy
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Exemplos
Passe o mouse sobre os links abaixo, para ver tooltips:
Et sit consectetur laboriosam accusamus. Ipsam amet aut. Exercitationem quasi accusantium et et ut. Alias
quam sed. Omnis minus ad repellendus. Et sit consectetur laboriosam accusamus. Ipsam amet aut.
Exercitationem quasi accusantium et et ut. Alias quam sed. Omnis minus ad repellendus. Et sit consectetur
laboriosam accusamus. Ipsam amet aut. Exercitationem quasi accusantium et et ut. Alias quam sed. Omnis
minus ad repellendus. Et sit consectetur laboriosam accusamus. Ipsam amet aut. Exercitationem
quasi accusantium et et ut. Alias quam sed. Omnis minus ad repellendus. Et sit consectetur laboriosam
accusamus. Ipsam amet aut. Exercitationem quasi accusantium et et ut. Alias quam sed. Omnis minus ad
repellendus.
Passe o mouse sobre os botões abaixo para ver as quatro direções de tooltip, possíveis: top, right, bottom e
left.
Tooltip na parte superior Tooltip na direita Tooltip na parte inferior Tooltip na esquerda
Copy
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
title="Tooltip na parte superior">
Tooltip na parte superior
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
title="Tooltip na direita">
Tooltip na direita
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
title="Tooltip na parte inferior">
Tooltip na parte inferior
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
title="Tooltip na esquerda">
Tooltip na esquerda
</button>
Ou um exemplo de tooltip que usa HTML, no seu conteúdo.
Tooltip com HTML
Copy
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true"
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip com HTML
</button>
Modo de uso
O plugin tooltip gera conteúdo e marcação sob demanda e, por padrão, posiciona tooltips depois de seus
elementos acionadores.
Acione o tooltip via JavaScript:
Copy
$('#exemplo').tooltip(options)
Overflow auto and scroll
Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow:
scroll like our .table-responsive, but still keeps the original placement’s positioning. To resolve, set
the boundary option to anything other than default value, 'scrollParent', such as 'window':
Copy
$('#example').tooltip({ boundary: 'window' })
Marcação
A marcação necessária para um tooltip só são os atributos data e title, no elemento HTML que você deseja
ter um tooltip. A marcação gerada de um tooltip é bem simples, mas precisa de posicionamento (definido
como top, por padrão).
Fazendo tooltips funcionarem para usuários de teclado e tecnologias assistivas

Você só deveria colocar tooltips em elementos HTML que são, tradicionalmente, focáveis com teclado e
interativos (como links e campos de formulário). Apesar de elementos HTML genéricos (como <span>)
poderem se tornar focáveis, adicionando o atributo tabindex="0", isso vai criar potenciais tabulações
irritantes e confusas, em elementos não interativos para usuários de teclado. Além disso, a maioria das
tecnologias assistivas, atualmente, não transmitem o tooltip, nesta situação.
Além do mais, não dependa só no hover como acionador para seu tooltip, já que isso vai fazer seus tooltips
impossíveis de serem acionados por usuários de teclado.
Copy

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Passe o mouse em mim</a>

<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Algum texto de tooltip
</div>
</div>
Elementos desativados
Elementos com o atributo disabled não são interativos, significando que usuários não podem focar, clicar ou
passar o mouse sobre eles para acionar o tooltip (ou popover). Como uma forma de contornar a situação,
você vai querer acionar o tooltip a partir de um elemento pai <div> ou <span>, idealmente, fazendo-os serem
focáveis com tabindex="0" e sobrescrever a pointer-events, no elemento desativado.
Botão desativado
Copy
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Tooltip em elemento desativado">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Botão
desativado</button>
</span>
Parâmetros
do parâmetro ao prefixo data-, como em data-animation="".
Nome Tipo Padrão Description
animation booleano true Aplica uma transição CSS fade, no tooltip.
container string | false Anexa o tooltip ao elemento específico. Este parâmetro é,

elemento particularmente, útil porque permite você posicionar o too
| false fluxo do documento, perto do elemento gatilho (o que vai
que o tooltip flutue para longe do elemento gatilho, no
redimensionamento de página). Exemplo: container: 'bod
delay number | 0 Atraso na exibição e ocultação do tooltip, em ms. Não se a
objeto tipo de acionamento manual.
Se um número é provido, o atraso é aplicado tanto a exibiç

quanto a ocultação.
A estrutura do objeto é: delay: { "show": 500, "hide": 10

html booleano false Permite HTML, no tooltip.
Se declarado como true, tags HTML no título do tooltip ser

renderizadas. Se definido como false, o método jQuery tex
usado para inserir conteúdo no DOM.
placement string | 'top' Define como posicionar o tooltip (auto, top, bottom, left e
função Quando auto é especificado, ele vai reorientar o tooltip,
automaticamente.
Nome Tipo Padrão Description
Quando uma função é usada para determinar o posicionam

ela é invocada com o nó DOM do tooltip como seu primeir
argumento e o nó DOM do elemento acionador como o se
O contexto this é definido para a instância tooltip.
selector string | false Se um seletor é provido, objetos tooltip serão delegados aos alv
false específicos. Na prática, isto é usado para permitir conteúdo HTM
dinâmico ter popovers. Veja isto e um exemplo informativo.
template string '<div class="tooltip" HTML base para criação de tooltip.

role="tooltip"><div
class="arrow"></div><div
O title do tooltip será injetado no .tooltip-inner.
class="tooltip-
inner"></div></div>'
A .arrow se tornará a flecha do tooltip.
O elemento pai mais exeterno deve ter a classe .tooltip e

atributo role="tooltip".
title string | '' Define o título padrão, se o valor do atributo title não est
elemento presente.
| função
Se uma função é declarada, ela será invocada com sua
referência this definida para o elemento que o tooltip está
anexado.
trigger string 'hover focus' Define como o tooltip é acionado (click, hover, focus e man
Você pode passar vários acionadores, separando-os com e
'manual' indica que o tooltip será acionado, programaticam

pelos
métodos .tooltip('show'), .tooltip('hide') e .tooltip('
Este valor não pode ser combinado com os outros acionad
Usar só o 'hover' vai resultar em tooltips que não podem

acionados por teclado e só devem ser usados se métodos
alternativos, para transmitir a mesma informação para usuá
teclado, existem.
offset number | 0 Deslocamento do tooltip, em relação ao seu alvo. Para mais info
string leia a documentação offset do Popper.js.
fallbackPlacement string | 'flip' Permite especificar qual posição o Popper vai usar, em caso de f
array Para mais informação, leia a documentação de comportamento
Popper.js.
boundary string | 'scrollParent' Define o limite de transbordamento do tooltip. Aceita os

elemento valores 'viewport', 'window', 'scrollParent' ou uma referên
HTMLElement (apenas JavaScript). Para mais informação, leia
a documentação preventOverflow do Popper.js.
Atributos data para tooltips individuais

Parâmetros para tooltips individuais podem, opcionalmente, serem especificados usando atributos data,
como mostrado acima.
Métodos

$().tooltip(options)
Anexa um manipulador tooltip, em uma coleção de elementos.
.tooltip('show')
Revela o tooltip de um elemento. Retorna ao invocador, antes do tooltip ter sido exibido, de fato (antes
do evento shown.bs.tooltip ocorrer). Isto é considerado um acionamento “manual” do tooltip. Tooltips
com title vazios, nunca são mostrados.
Copy
$('#elemento').tooltip('show')
.tooltip('hide')
Esconde o tooltip de um elemento. Retorna ao invocador, antes do tooltip ter sido oculto, de fato (antes
do evento hidden.bs.tooltip ocorrer). Isto é considerado um acionamento “manual” do tooltip.
Copy
$('#elemento').tooltip('hide')
.tooltip('toggle')
Alterna a visibilidade do tooltip de um elemento. Retorna ao invocador, antes do tooltip ter sido exibido
ou oculto, de fato (antes dos eventos shown.bs.tooltip e hidden.bs.tooltip ocorrerem). Isto é considerado
um acionamento “manual” do tooltip.
Copy
$('#elemento').tooltip('toggle')
.tooltip('dispose')
Esconde e destrói o tooltip de um elemento. Tooltips que usam delegação (são criadas usando
o parâmetro selector) não podem ser, individualmente, destruídos em elementos acionadores
descendentes.
Copy
$('#elemento').tooltip('dispose')
.tooltip('enable')
Dá a habilide de se exibir ao tooltip de um elemento. Ativado por padrão.
Copy
$('#elemento').tooltip('enable')
.tooltip('disable')
Remove a habilidade de se exibir do tooltip de um elemento. O tooltip só será capaz de ser exibido se isto
for reativado.
Copy
$('#elemento').tooltip('disable')
.tooltip('toggleEnabled')
Alterna a capacidade do tooltip de um elemento de ser exibido ou oculto.
Copy
$('#elemento').tooltip('toggleEnabled')
.tooltip('update')
Atualiza a posição do tooltip de um elemento.
Copy
$('#elemento').tooltip('update')
Eventos
Evento Descrição
show.bs.tooltip Este evento é acionado quando o método show é invocado.
shown.bs.tooltip Este evento é acionado quando o tooltip foi exibido ao usuário (espera as transições CSS finalizare
hide.bs.tooltip Este evento é acionado, imediatamente, quando o método hide é invocado.
hidden.bs.tooltip Este evento é acionado quando o tooltip acaba de se ocultar do usuário (espera as transições CSS
finalizarem).
inserted.bs.tooltip Este evento é acionado depois do evento show.bs.tooltip, quando o template tooltip foi adicion
ao DOM.
Copy
$('#meuTooltip').on('hidden.bs.tooltip', function () {
})
Bordas
Use os utilitários de borda para estilizar rapidamente a borda e o raio da borda de um elemento. Ótimo para
imagens, botões ou qualquer outro elemento.
Reliable SMTP Service. Avoid Spam Folders & Ensure Delivery. Integrates in 5-minads via Carbon
Borda
Use os utilitários de borda para adicionar ou remover as bordas de um elemento. Escolha entre um dos
lados ou todos de uma vez.
Adicione
Copy
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
Remova
Copy
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
Cor da borda
Altere a cor da borda usando utilitários criados a partir das nossas cores de tema.
Copy
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Raio da borda
Adicione classes a um elemento para arredondar facilmente seus cantos.
Copy
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">
Clearfix
Rapido e facilmente usar a propriedade clear em elementos flutuando, usando o utilitário clearfix.
Facilmente limpa a float, usando a classe .clearfix, no elemento pai. Além do mais, também pode ser
usado como um mixin.
Copy
<div class="clearfix">...</div>
Copy
// O mixin, em si.
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Como usar o mixin.

.element {
@include clearfix;
}
O exemplo a seguir mostra como o clearfix pode ser usado. Sem ele, a div envoltando não se expandiria ao
redor dos botões, oquê causaria um layout quebrado.
Exemplo de botão flutuando à esquerdaExemplo de botão flutuando à direita
Copy
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-left">Exemplo de botão flutuando à
esquerda</button>
<button type="button" class="btn btn-secondary float-right">Exemplo de botão flutuando à
direita</button>
</div>

Lei No 4.320-1964

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lei No 4.320-1964

Enviado por

Direitos autorais:

Formatos disponíveis

Introdução

Mostrar componentes dependentes de JavaScript

Meta tag responsiva

Na rara ocasião de precisar sobrecrever isso, use algo como o seguinte:

Aprenda mais sobre o box model e dimensionamento, no CSS Tricks.

• Siga @getbootstrap no Twitter;

• Pacotes de CSS minificados e compilados (veja a comparação de arquivos CSS);

• Compilador Sass (Libsass ou Ruby Sass) para compilar seu CSS;

Instale o Bootstrap em seus apps Node.js com o pacote npm:

O package.json possui alguns metadados, nas seguintes chaves:

• sass - caminho para o principal arquivo Sass Bootstrap;

Arquivos CSS Layout Conteúdo Componentes Utilitários

bootstrap.css Incluído Incluído Incluído Incluído

bootstrap-reboot.css Não incluído Apenas o Reboot Não incluído Não incluído

Arquivos JS Popper jQuery

bootstrap.bundle.js Incluído Não incluído

bootstrap.js Não incluído Não incluído

Código fonte Bootstrap

Chrome Firefox Safari Android Browser & WebView Microsoft E

Android Suportado Suportado N/A Android v5.0+ Suportado Suportado

iOS Suportado Suportado Suportado N/A Suportado

Windows 10 Móvel N/A N/A N/A N/A Suportado

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari

Mac Suportado Suportado N/A N/A Suportado Suportado

Windows Suportado Suportado Suportado, IE10+ Suportado Suportado Not Suportado

Modais e dropdowns em dispositivos móveis

Campos de texto e rolagem no iOS

Sticky :hover/:focus no iOS

Browser padrão do Android

Nossos dropdowns, popovers e tooltips também dependem do Popper.js.

Funções e transições assíncronas

Você pode alterar as configurações padrões de um plugin, modificado o objeto Constructor.Default do

//Bootstrap e suas variáveis padrões

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@function theme-color($key: "primary") {

@function gray($key: "100") {

@return mix($color-base, $color, $level * $theme-color-interval);

Variável Valores Descrição

$enable-rounded true (padrão) ou false Ativa estilos border-radius pré-definidos, em vários

$enable-shadows true ou false (padrão) Ativa estilos box-shadow pré-definidos, em vários

$enable- true (padrão) ou false Ativa transições pré-definidas, em vários componente

$enable-hover- true ou false (padrão) Defasado

$enable-caret true (padrão) ou false Ativa a setinha do .dropdown-toggle usando pseudo-

$enable-print- true (padrão) ou false Ativa estilos para otimizar impressões.

É assim que você pode usar isso, no seu Sass:

// Usando o mapa Sass, com nossa função `color()`

// Gera utilitários de cores para `.bg-*`

.text#{$infix}-left { text-align: left !important; }

Aqui está um exemplo de oquê não é suportado:

1. Baixe e instale o Node.js, o qual usamos para gerenciar nossas dependências;

Usando scripts NPM

Nós mantemos uma lista de browsers suportados no Autoprefixer em um arquivo separado, em um

Aprenda mais sobre o uso do Jekyll, lendo sua documentação.

Importação do CSS compilado

Visão geral e limitações

Os componentes interativos do Bootstrap, como modais, menus suspensos e dicas de ferramentas

Conteúdo visualmente oculto

// Dispositivos small (telefones em modo paisagem, com 576px ou mais)

// Dispositivos médios (tablets com 768px ou mais)

// Dispositivos large (desktops com 992px ou mais)