Can I use "Alert box Bootstrap 5.1.3" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Alert box Bootstrap 5.1.3 — Free Buttons Snippet (Bootstrap 5)

Loading…

Alert box Bootstrap 5.1.3 — Free Buttons Snippet (Bootstrap 5) | 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

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Buttons snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Alert box Bootstrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Buttons snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection