Comece a usar o Bootstrap#

Bootstrap é um poderoso conjunto de ferramentas de front-end repleto de recursos. Construa qualquer coisa — do protótipo à produção — em minutos.

Início rápido#

Comece incluindo o CSS e o JavaScript prontos para produção do Bootstrap via CDN sem a necessidade de nenhuma etapa de construção. Veja na prática com esta demonstração do CodePen do Bootstrap.

Crie um novo arquivo index.html na raiz do seu projeto. Inclua também a tag <meta name="viewport"> para um comportamento responsivo adequado em dispositivos móveis.

html <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Bootstrap</title> </head> <body> <h1>Olá, mundo!</h1> </body> </html>
Inclua o CSS e o JS do Bootstrap. Coloque a tag <link> no <head> para nosso CSS, e a tag <script> para nosso pacote JavaScript (incluindo Popper para posicionar menus suspensos, popovers e tooltips) antes do fechamento </body>. Saiba mais sobre nossos links de CDN. html <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h1>Olá, mundo!</h1> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> Você também pode incluir o Popper e nosso JS separadamente. Se você não planeja usar menus suspensos, popovers ou tooltips, economize alguns kilobytes não incluindo o Popper. html <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
Olá, mundo! Abra a página no seu navegador de escolha para ver sua página com Bootstrap. Agora você pode começar a construir com Bootstrap criando seu layout, adicionando dezenas de componentes e utilizando nossos exemplos oficiais.

Links de CDN#

Como referência, aqui estão nossos principais links de CDN.

Descrição	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Você também pode usar a CDN para obter qualquer uma das nossas compilações adicionais listadas na página Conteúdo.

Próximos passos#

Leia um pouco mais sobre algumas configurações importantes do ambiente global que o Bootstrap utiliza.
Leia sobre o que está incluído no Bootstrap em nossa seção Conteúdo e a lista de componentes que exigem JavaScript abaixo.
Precisa de um pouco mais de capacidade? Considere construir com o Bootstrap incluindo os arquivos fonte usando o gerenciador de pacotes.
Procurando usar o Bootstrap como um módulo com <script type="module">? Consulte nossa seção Usando o Bootstrap como um módulo.

Componentes JS#

Quer saber quais componentes exigem explicitamente nosso JavaScript e Popper? Se você não tiver certeza sobre a estrutura geral da página, continue lendo para um modelo de página de exemplo.

Acordeões para estender nosso plug-in Collapse;
Alertas para dispensar;
Botões para alternar estados e funcionalidade de caixa de seleção/rádio;
Carrossel para todos os comportamentos de slides, controles e indicadores;
Collapse para alternar a visibilidade do conteúdo;
Menus suspensos para exibição e posicionamento (também requer Popper);
Modais para exibição, posicionamento e comportamento de rolagem;
Barra de navegação para estender nossos plug-ins Collapse e Offcanvas para implementar comportamentos responsivos;
Barras de navegação com o plug-in Tab para alternar painéis de conteúdo;
Offcanvases para exibição, posicionamento e comportamento de rolagem;
Scrollspy para comportamento de rolagem e atualizações de navegação;
Toasts para exibição e dispensa;
Tooltips e popovers para exibição e posicionamento (também requer Popper).

Globais importantes#

O Bootstrap emprega um punhado de estilos e configurações globais importantes, todos os quais são quase exclusivamente voltados para a normalização de estilos entre navegadores. Vamos nos aprofundar.

Doctype HTML5#

O Bootstrap requer o uso do doctype HTML5. Sem ele, você verá alguns estilos estranhos e incompletos.

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

Meta `viewport`#

O Bootstrap é desenvolvido com foco em dispositivos móveis, uma estratégia na qual otimizamos o código para dispositivos móveis primeiro e, em seguida, aumentamos a escala dos componentes conforme necessário usando consultas de mídia CSS. Para garantir a renderização adequada e o controle de zoom por toque para todos os dispositivos, adicione a meta tag responsiva viewport ao seu <head>.

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

Você pode ver um exemplo disso em ação na seção Início rápido.

`box-sizing`#

Para um dimensionamento mais direto em CSS, trocamos o valor global box-sizing de content-box para border-box. Isso garante que o padding não afete a largura final calculada de um elemento, mas pode causar problemas com alguns programas de terceiros, como o Google Maps e o Google Custom Search Engine.

Na rara ocasião em que você precisar substituí-lo, use algo como o seguinte:

.seletor-para-algum-componente {
    box-sizing: content-box;
}

Com o código acima, elementos aninhados — incluindo conteúdo gerado via ::before e ::after — herdarão o box-sizing especificado para esse .seletor-para-algum-componente.

Saiba mais sobre o modelo de caixa e dimensionamento no CSS Tricks.

Reboot#

Para renderização aprimorada entre navegadores, usamos o Reboot para corrigir inconsistências em navegadores e dispositivos, ao mesmo tempo em que fornecemos redefinições um pouco mais opinativas para elementos HTML comuns.

Comunidade#

Acompanhe o desenvolvimento do Bootstrap e entre em contato com a comunidade com esses recursos úteis.

Leia e assine o Blog Oficial do Bootstrap;
Faça perguntas e explore nossas Discussões no GitHub;
Discuta, faça perguntas e muito mais no Discord da comunidade ou no subreddit do Bootstrap;
Converse com colegas Bootstrappers no IRC no servidor irc.libera.chat, no canal #bootstrap;
A ajuda para implementação pode ser encontrada no Stack Overflow (marcada como bootstrap-5);
As pessoas desenvolvedoras devem usar a palavra-chave bootstrap em pacotes que modificam ou adicionam funcionalidades do Bootstrap ao distribuir por meio do npm ou mecanismos de distribuição semelhantes para máximo alcance.

Você também pode seguir @getbootstrap no Twitter para as últimas fofocas e vídeos musicais incríveis.