` e um botão fechar usando um elemento `` com a classe `btn-close`.
```html

Título Modal

```
6. Em seguida, adicione um elemento `

` com a classe `modal-body`. Este elemento conterá o conteúdo principal do modal.
```html

```
7. Adicione o conteúdo que deseja exibir dentro do corpo modal. Isso pode incluir texto, imagens, formulários, etc.
8. Finalmente, adicione um elemento `

` com a classe `modal-footer`. Este elemento conterá quaisquer botões de ação, como um botão enviar ou fechar.
```html

```
9. Adicione quaisquer botões de ação desejados dentro do rodapé modal. Esses botões devem ter a classe `btn` e a classe de botão Bootstrap apropriada (por exemplo, `btn-primary`, `btn-secondary`).
```html
Fechar
Salvar alterações
```

CSS:

Adicione os seguintes estilos CSS à sua folha de estilo:

```css
.modal {
posição:fixa;
topo:0;
esquerda:0;
índice z:1050;
exibição:nenhum;
}

.modal.fade .modal-dialog {
transição:transformação 0,3s de atenuação;
}

.modal.show .modal-dialog {
transformar:traduzir(0, 0);
}
```

JavaScript:

Para exibir o modal, você pode usar JavaScript para adicionar a classe `show` ao elemento `.modal`. Aqui está um exemplo usando jQuery:

```javascript
$('#exemploModal').modal('mostrar');
```

Para ocultar o modal, use JavaScript para remover a classe `show` do elemento `.modal`.

```javascript
$('#exemploModal').modal('ocultar');
```

É isso! Você criou com sucesso um modal Bootstrap 5. Você pode personalizar ainda mais a aparência e o comportamento do modal adicionando CSS e JavaScript adicionais.

Anterior : Como criar cartões Bootstrap 5?

Próximo : Como criar breadcrumbs do Bootstrap 5?