Alert box Bootstrap 5.1.3

Loading…

Alert box Bootstrap 5.1.3 | GoSnippets

Source Code

1<!DOCTYPE html>
2<html lang="pt-br" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
8</head>
9
10<body>
11    <!-- created by https://www.codesnippets.dev.br/post/alert-box-modal-coloridos-com-boostrap -->
12  <div class="container mt-3 pt-3">
13    <div class="row">
14      <div class="col-12">
15        <button id="button_modal_confirm" class="btn btn-danger" type="button">Confirm?</button>
16        <button id="button_modal_warning" class="btn btn-warning" type="button">Aten&ccedil;&atilde;o</button>
17        <button id="button_modal_success" class="btn btn-success" type="button">Sucesso</button>
18        <button id="button_modal_dark" class="btn btn-dark" type="button">Dark</button>
19      </div>
20    </div>
21  </div>
22  <!-- modal element -->
23  <div id="my_modal" class="modal" tabindex="-1">
24    <div class="modal-dialog modal-dialog-centered">
25      <div class="modal-content">
26        <div id="my_modal_header" class="modal-header">
27          <h5 class="modal-title">Confirme exclus&atilde;o</h5>
28          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
29        </div>
30        <div id="my_modal_body" class="modal-body">
31          <p>Modal body text goes here.</p>
32        </div>
33        <div id="my_modal_footer" class="modal-footer">
34        </div>
35      </div>
36    </div>
37  </div>
38</body>
39</html>
40

Alert box Bootstrap 5.1.3

Source Code

More Buttons snippets

Comments(0)