Bootstrap: Carrossel e Modal
Última atualização: 2026-08-26
1. Introdução
(1) Pré-requisitos
- Lição 13: Formulários e Validação de Formulário
(2) 🎯 O que você vai aprender
- Construir um carrossel e configurar auto-play
- Aprimorar o carrossel usando indicadores, setas anterior/próximo e legendas
- Construir um modal e controlar abertura/fechamento
- Usar variantes de tamanho de modal e centralização vertical
- Incorporar formulários e carrosséis dentro de modais
(3) O Problema
A página de detalhe do produto da Alice precisa de um carrossel de imagens para exibir múltiplos ângulos do produto, e um modal de "Visão Rápida" que aparece com os detalhes do produto—juntos, esses dois componentes criam uma experiência de usuário profissional sem escrever JavaScript personalizado.
(4) A Solução
Carrosséis e modais são dois dos componentes JavaScript interativos mais usados no Bootstrap. Um carrossel é usado para percorrer imagens ou conteúdo, enquanto um modal é usado para exibir uma caixa de diálogo, formulário ou mensagem de confirmação.
Pense desta forma: Um carrossel = uma apresentação de slides com auto-play, um modal = uma caixa de diálogo temporária que sobrepõe a página atual.
(5) O Benefício
Usar carrosséis e modais juntos permite criar uma vitrine de produtos profissional sem escrever nenhum JavaScript.
2. Carrosséis
▶ Exemplo: Carrossel Básico
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demonstração de Carrossel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400/0d6efd/fff?text=Slide+1" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Primeiro Slide</h5>
<p>Bem-vindo ao Carrossel do Bootstrap.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400/198754/fff?text=Slide+2" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400/dc3545/fff?text=Slide+3" class="d-block w-100" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
(1) Estrutura do Componente Carrossel
| Elemento | classe/data-* | Descrição |
|---|---|---|
| Contêiner | carousel slide |
O contêiner do carrossel; o id é usado para vinculação |
| Indicadores | carousel-indicators |
Os pontos na base para pular para um slide |
| Contêiner de Slides | carousel-inner |
Envolve todos os slides |
| Slide Individual | carousel-item |
O conteúdo de cada slide |
| Slide Ativo | carousel-item active |
O slide atualmente exibido |
| Legenda | carousel-caption |
Texto sobreposto na imagem |
(2) Configuração do Carrossel
<!-- Auto-play a cada 2 segundos (padrão: 5000ms) -->
<div id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
<!-- Transição de fade em vez de slide -->
<div id="carousel" class="carousel slide carousel-fade">
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
3. Modais
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Abrir Modal de Demonstração
</button>
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5">Título do Modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Este é o conteúdo do corpo do modal. Você pode colocar qualquer HTML aqui.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
<button class="btn btn-primary">Salvar alterações</button>
</div>
</div>
</div>
</div>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
(1) Estrutura do Modal
| Elemento | classe | Descrição |
|---|---|---|
| Backdrop | modal fade |
A sobreposição de fundo semi-transparente |
| Diálogo | modal-dialog |
Controla tamanho e centralização vertical |
| Conteúdo | modal-content |
O contêiner do painel branco |
| Cabeçalho | modal-header |
Título + botão de fechar |
| Corpo | modal-body |
Área de conteúdo principal |
| Rodapé | modal-footer |
Grupo de botões de ação |
4. Tamanhos e Alinhamento do Modal
<div class="modal-dialog modal-sm">Pequeno</div>
<div class="modal-dialog modal-lg">Grande</div>
<div class="modal-dialog modal-xl">Extra grande</div>
<div class="modal-dialog modal-dialog-centered">Centralizado verticalmente</div>
<div class="modal-dialog modal-dialog-scrollable">Corpo rolável</div>
<div class="modal-dialog modal-fullscreen-md-down">Tela cheia no mobile</div>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
| classe | Largura | Caso de Uso |
|---|---|---|
modal-sm |
300px | Diálogos de confirmação |
| Padrão | 500px | Formulários gerais |
modal-lg |
800px | Formulários grandes |
modal-xl |
1140px | Conteúdo de tamanho total |
modal-fullscreen |
100vw | Tela cheia no mobile |
5. Mais Exemplos de Carrossel e Modal
▶ Exemplo: Carrossel de Produto com Legenda e Indicadores
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrossel de Produto</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<div id="productCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400/0d6efd/fff?text=iPhone+15" class="d-block w-100" alt="Produto 1">
<div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
<h5>iPhone 15 Pro</h5>
<p>A partir de $999 — chip A17 Pro, design em titânio.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400/198754/fff?text=MacBook+Air" class="d-block w-100" alt="Produto 2">
<div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
<h5>MacBook Air M3</h5>
<p>Potência leve — bateria de 18h, tela de 15 polegadas.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400/dc3545/fff?text=AirPods+Pro" class="d-block w-100" alt="Produto 3">
<div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
<h5>AirPods Pro 2</h5>
<p>Áudio adaptativo, cancelamento de ruído, USB-C.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
▶ Exemplo: Modal com Formulário Incorporado
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
Deixar Feedback
</button>
<div class="modal fade" id="feedbackModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Enviar Feedback</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Seu Nome</label>
<input type="text" class="form-control" placeholder="Digite o nome">
</div>
<div class="mb-3">
<label class="form-label">Avaliação</label>
<select class="form-select">
<option selected>5 - Excelente</option>
<option>4 - Bom</option>
<option>3 - Médio</option>
<option>2 - Ruim</option>
<option>1 - Péssimo</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Mensagem</label>
<textarea class="form-control" rows="3" placeholder="Conte-nos sobre sua experiência..."></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button class="btn btn-primary">Enviar</button>
</div>
</div>
</div>
</div>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
▶ Exemplo: Modal com Carrossel Incorporado
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carouselModal">
Ver Galeria
</button>
<div class="modal fade" id="carouselModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Galeria de Produtos</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-0">
<div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x500/0d6efd/fff?text=Photo+1" class="d-block w-100" alt="Foto 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x500/198754/fff?text=Photo+2" class="d-block w-100" alt="Foto 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x500/dc3545/fff?text=Photo+3" class="d-block w-100" alt="Foto 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
</div>
</div>
</div>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
▶ Exemplo: Modal com Backdrop Estático
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticModal">
Abrir com Backdrop Estático
</button>
<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-body py-4">
<div class="display-6 text-warning mb-3">⚠️</div>
<h5>Excluir Conta?</h5>
<p class="text-muted small">Esta ação não pode ser desfeita.</p>
<div class="d-grid gap-2">
<button class="btn btn-danger">Confirmar Exclusão</button>
<button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
</div>
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
(1) Fluxo de Interação Carrossel-Modal
flowchart TD
subgraph Carrossel
A[carousel slide] --> B[carousel-indicators (Indicadores)]
A --> C[carousel-inner (Contêiner de Slides)]
C --> D[carousel-item active (Slide Atual)]
C --> E[carousel-item (Outros Slides)]
A --> F[carousel-control-prev/next (Setas Anterior/Próximo)]
D --> G[carousel-caption (Legenda)]
end
subgraph Modal
H[modal fade (Backdrop)] --> I[modal-dialog (Diálogo)]
I --> J[modal-content (Painel de Conteúdo)]
J --> K[modal-header (Cabeçalho)]
J --> L[modal-body (Corpo)]
J --> M[modal-footer (Rodapé)]
end
N[Clique do Usuário] --> O{Alvo}
O -->|Indicador do Carrossel| B
O -->|Seta do Carrossel| F
O -->|Botão Abrir| H
O -->|Botão Fechar| K
Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.
| Atributo data-bs-* | Alvo | Valores |
|---|---|---|
data-bs-ride="carousel" |
Contêiner do carrossel | carousel / false |
data-bs-interval |
Contêiner do carrossel | Milissegundos (padrão 5000) |
data-bs-slide-to |
Botão indicador | Índice (0,1,2...) |
data-bs-slide |
Botão de controle | prev / next |
data-bs-toggle="modal" |
Elemento de disparo | modal |
data-bs-target="#id" |
Elemento de disparo | ID do modal alvo |
data-bs-dismiss="modal" |
Botão de fechar | modal |
data-bs-backdrop |
Modal | true / false / static |
data-bs-keyboard |
Modal | true / false |
data-bs-touch |
Contêiner do carrossel | true / false |
| Opção do Carrossel | atributo data | Efeito |
|---|---|---|
| Auto-play | data-bs-ride="carousel" |
Inicia auto-play no carregamento da página |
| Intervalo | data-bs-interval="2000" |
Troca slides a cada 2 segundos |
| Transição de fade | classe carousel-fade |
Some/aparce em vez de deslizar |
| Pausar no hover | data-bs-pause="hover" |
Pausa quando o mouse passa por cima |
| Swipe por toque | data-bs-touch="true" |
Habilita gestos de swipe no mobile |
| Loop infinito | data-bs-wrap="true" |
Volta ao primeiro slide após o último |
| Tamanho do Modal | classe | Largura | Caso de Uso |
|---|---|---|---|
| Pequeno | modal-sm |
300px | Diálogos de confirmação, mensagens breves |
| Padrão | none | 500px | Formulários, exibição de informações |
| Grande | modal-lg |
800px | Formulários grandes, tabelas de dados |
| Extra Grande | modal-xl |
1140px | Painéis de conteúdo de tamanho total |
| Tela Cheia | modal-fullscreen |
100vw | Experiência imersiva no mobile |
❓ Perguntas Frequentes
P: E se as imagens do carrossel tiverem tamanhos diferentes? R: Há duas soluções: (1) Use imagens com tamanho fixo (recomendado: corte para uma proporção uniforme como 16:9); (2) Use
object-fit: coverjunto com umaheightfixa para o carrossel.
P: O fundo pode rolar quando um modal está aberto? R: Não, por padrão—quando um modal está aberto, o
overflowdobodyé definido comohidden. Para permitir rolagem, adicionemodal-dialog-scrollableaomodal-dialog.
P: Modais podem ser aninhados? R: O Bootstrap não suporta modais aninhados. Apenas um modal é exibido por vez. No entanto, você pode usar JavaScript para abrir um modal após fechar outro.
P: O carrossel suporta controle por teclado? R: Sim. Quando o carrossel tem foco, as setas esquerda e direita trocam os slides. Isso é habilitado por padrão.
P: O carrossel suporta gestos de swipe no mobile? R: Sim. O carrossel do Bootstrap 5 habilita eventos de toque por padrão (
data-bs-touch="true"), permitindo que os usuários deslizem para a esquerda/direita com os dedos para trocar slides em dispositivos móveis sem configuração extra.
📖 Resumo
- Estrutura do carrossel:
carousel slide>carousel-inner>carousel-item active, com indicadores e setas anterior/próximo data-bs-ride="carousel"para auto-play,carousel-fadepara transição de fade- Estrutura do modal:
modal fade>modal-dialog>modal-content(cabeçalho + corpo + rodapé) - Tamanhos do modal:
modal-sm/modal-lg/modal-xl/modal-fullscreen - Ambos são dirigidos por atributos
data-bs-*; o JS do Bootstrap deve ser incluído
📝 Exercícios
- ⭐ Crie um carrossel de vitrine de produtos: 3 imagens de produto + legendas (carousel-caption) + indicadores + setas anterior/próximo, trocando automaticamente a cada 3 segundos.
- ⭐⭐ Implemente um recurso de "Visão Rápida": um botão em um cartão de produto que abre um modal exibindo uma imagem grande do produto, nome, preço, descrição e um botão de comprar.
- ⭐⭐⭐ Crie um modal em tela cheia (no mobile) que contenha um formulário de registro (nome + e-mail + senha).
Lição Anterior: Formulários · Próxima Lição: Alertas
