Trechos
Padrões comuns para criar sites e aplicativos baseados em componentes e utilitários existentes com CSS personalizado e muito mais.
![](/docs/5.1/assets/img/examples/headers.png)
Cabeçalhos
Exiba sua marca, navegação, pesquisa e muito mais com esses componentes de cabeçalho
![](/docs/5.1/assets/img/examples/heroes.png)
Heróis
Defina o cenário em sua página inicial com heróis que apresentam frases de chamariz claras.
![](/docs/5.1/assets/img/examples/features.png)
Características
Explique os recursos, benefícios ou outros detalhes em seu conteúdo de marketing.
![](/docs/5.1/assets/img/examples/sidebars.png)
Barras laterais
Padrões de navegação comuns ideais para layouts offcanvas ou de várias colunas.
![](/docs/5.1/assets/img/examples/footers.png)
Rodapés
Termine cada página com um rodapé incrível, grande ou pequeno.
![](/docs/5.1/assets/img/examples/dropdowns.png)
Listas suspensas
Aprimore seus menus suspensos com filtros, ícones, estilos personalizados e muito mais.
![](/docs/5.1/assets/img/examples/list-groups.png)
Listar grupos
Estenda grupos de listas com utilitários e estilos personalizados para qualquer conteúdo.
![](/docs/5.1/assets/img/examples/modals.png)
Modais
Transforme modais para servir a qualquer propósito, de tours de recursos a diálogos.
Componentes personalizados
Novos componentes e modelos para ajudar as pessoas a começar rapidamente com o Bootstrap e demonstrar as melhores práticas para adicionar à estrutura.
![](/docs/5.1/assets/img/examples/album.png)
Álbum
Modelo simples de uma página para galerias de fotos, portfólios e muito mais.
![](/docs/5.1/assets/img/examples/pricing.png)
Preços
Exemplo de página de preços criada com Cartões e com cabeçalho e rodapé personalizados.
![](/docs/5.1/assets/img/examples/checkout.png)
Confira
Formulário de checkout personalizado mostrando nossos componentes de formulário e seus recursos de validação.
![](/docs/5.1/assets/img/examples/product.png)
produtos
Página de marketing enxuta com foco no produto com extenso trabalho de grade e imagem.
![](/docs/5.1/assets/img/examples/cover.png)
Cobrir
Um modelo de uma página para criar páginas iniciais simples e bonitas.
![](/docs/5.1/assets/img/examples/carousel.png)
Carrossel
Personalize a barra de navegação e o carrossel e adicione alguns novos componentes.
![](/docs/5.1/assets/img/examples/blog.png)
Blogue
Revista como modelo de blog com cabeçalho, navegação, conteúdo em destaque.
![](/docs/5.1/assets/img/examples/dashboard.png)
Painel
Shell básico do painel de administração com barra lateral e barra de navegação fixas.
![](/docs/5.1/assets/img/examples/sign-in.png)
Entrar
Layout e design de formulário personalizado para um formulário de entrada simples.
![](/docs/5.1/assets/img/examples/sticky-footer.png)
Rodapé fixo
Anexe um rodapé à parte inferior da janela de visualização quando o conteúdo da página for curto.
![](/docs/5.1/assets/img/examples/sticky-footer-navbar.png)
Navbar de rodapé fixo
Anexe um rodapé à parte inferior da viewport com uma barra de navegação superior fixa.
![](/docs/5.1/assets/img/examples/jumbotron.png)
Jumbotron
Use utilitários para recriar e aprimorar o jumbotron do Bootstrap 4.
Estrutura
Exemplos que se concentram na implementação de usos de componentes internos fornecidos pelo Bootstrap.
![](/docs/5.1/assets/img/examples/starter-template.png)
Modelo inicial
Nada além do básico: CSS compilado e JavaScript.
![](/docs/5.1/assets/img/examples/grid.png)
Rede
Vários exemplos de layouts de grade com todas as quatro camadas, aninhamento e muito mais.
![](/docs/5.1/assets/img/examples/cheatsheet.png)
Folha de dicas
Pia de cozinha de componentes Bootstrap.
![](/docs/5.1/assets/img/examples/cheatsheet-rtl.png)
Folha de referência RTL
Pia de cozinha de componentes Bootstrap, RTL.
Barras de navegação
Pegando o componente padrão da barra de navegação e mostrando como ele pode ser movido, posicionado e estendido.
![](/docs/5.1/assets/img/examples/navbars.png)
Barras de navegação
Demonstração de todas as opções responsivas e de contêiner para a barra de navegação.
![](/docs/5.1/assets/img/examples/navbar-static.png)
Barra de navegação estática
Exemplo de barra de navegação única de uma barra de navegação superior estática junto com algum conteúdo adicional.
![](/docs/5.1/assets/img/examples/navbar-fixed.png)
Barra de navegação corrigida
Exemplo de barra de navegação única com uma barra de navegação superior fixa juntamente com algum conteúdo adicional.
![](/docs/5.1/assets/img/examples/navbar-bottom.png)
Parte inferior da barra de navegação
Exemplo de barra de navegação única com uma barra de navegação inferior junto com algum conteúdo adicional.
![](/docs/5.1/assets/img/examples/offcanvas-navbar.png)
Barra de navegação offcanvas
Transforme sua barra de navegação expansível em um menu offcanvas deslizante (não usa nosso componente offcanvas).
RTL
Veja a versão RTL do Bootstrap em ação com esses exemplos de componentes personalizados modificados.
O recurso RTL ainda é experimental e provavelmente evoluirá de acordo com o feedback do usuário. Encontrou algo ou tem uma melhoria para sugerir? Abra um problema , adoraríamos receber seus insights.
![](/docs/5.1/assets/img/examples/album-rtl.png)
Álbum RTL
Modelo simples de uma página para galerias de fotos, portfólios e muito mais.
![](/docs/5.1/assets/img/examples/checkout-rtl.png)
Finalizar RTL
Formulário de checkout personalizado mostrando nossos componentes de formulário e seus recursos de validação.
![](/docs/5.1/assets/img/examples/carousel-rtl.png)
Carrossel RTL
Personalize a barra de navegação e o carrossel e adicione alguns novos componentes.
![](/docs/5.1/assets/img/examples/blog-rtl.png)
Blog RTL
Revista como modelo de blog com cabeçalho, navegação, conteúdo em destaque.
![](/docs/5.1/assets/img/examples/dashboard-rtl.png)
RTL do painel
Shell básico do painel de administração com barra lateral e barra de navegação fixas.
Integrações
Integrações com bibliotecas externas.
![](/docs/5.1/assets/img/examples/masonry.png)
Alvenaria
Combine os poderes da grade Bootstrap e do layout Masonry.
Vá mais longe com os temas do Bootstrap
Precisa de algo mais do que esses exemplos? Leve o Bootstrap para o próximo nível com temas premium do mercado oficial de temas do Bootstrap . Eles são construídos como seus próprios frameworks estendidos, ricos em novos componentes e plugins, documentação e ferramentas de construção poderosas.
Procurar temas![Temas de inicialização](/docs/5.1/assets/img/bootstrap-themes-collage.png)