Buttons Bootstrap 5Free
Alerts with link button — a free Bootstrap 5 button snippet. Copy the HTML and paste straight into your Bootstrap 5 project.
3.1k views7 downloads
gosnippets.com/preview/alerts-with-link-button
Source Code
1<!DOCTYPE html>
2<html lang="pt-br" dir="ltr">
3<head>
4 <meta charset="utf-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10</head>
11<body>
12 <!-- created by https://www.codesnippets.dev.br/post/como-fazer-alert-boxes-com-buttons-bootstrap-5 -->
13 <!-- @BrCodeSnippets -->
14 <div class="container mt-3 pt-3">
15 <div class="row">
16 <div class="col-12">
17 <div class="alert alert-primary" role="alert">
18 <span class="fw-bolder">Info</span>
19 A simple primary alert—check it out! <a class="btn btn-primary btn-sm float-end" href="#"> Ação</a>
20 </div>
21 <div class="alert alert-secondary" role="alert">
22 <span class="fw-bolder">Info</span>
23 A simple secondary alert—check it out! <a class="btn btn-secondary btn-sm float-end" href="#"> Ação</a>
24 </div>
25 <div class="alert alert-success" role="alert">
26 <span class="fw-bolder">sucess</span>
27 A simple success alert—check it out! <a class="btn btn-success btn-sm float-end" href="#"> Ação</a>
28 </div>
29 <div class="alert alert-danger" role="alert">
30 <span class="fw-bolder">Erro </span>
31 A simple danger alert—check it out! <a class="btn btn-danger btn-sm float-end" href="#"> Ação</a>
32 </div>
33 <div class="alert alert-warning" role="alert">
34 <span class="fw-bolder">Aviso</span>
35 A simple warning alert—check it out! <a class="btn btn-warning btn-sm float-end" href="#"> Ação</a>
36 </div>
37 <div class="alert alert-info" role="alert">
38 <span class="fw-bolder">Info</span>
39 A simple info alert—check it out! <a class="btn btn-info btn-sm float-end" href="#"> Ação</a>
40 </div>
41 <div class="alert alert-light" role="alert">
42 <span class="fw-bolder">Mensagem</span>
43 A simple light alert—check it out! <a class="btn btn-light btn-sm float-end" href="#"> Ação</a>
44 </div>
45 <div class="alert alert-dark" role="alert">
46 <span class="fw-bolder">Mensagem</span>
47 A simple dark alert—check it out! <a class="btn btn-dark btn-sm float-end" href="#"> Ação</a>
48 </div>
49 </div>
50 </div>
51 </div>
52</body>
53</html>
54More Buttons snippets
Pure CSS Neon Button
Add a button to your UI with Pure CSS Neon Button. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
ButtonsView →
Firework Animation on Button Click
Firework Animation on Button Click — a free Bootstrap 5 button snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
ButtonsView →
Pure CSS Pulsing Button ripple effect animation
Pure CSS Pulsing Button ripple effect animation: a hand-crafted, open-source Bootstrap 5 button. HTML & CSS included, ready to copy.
ButtonsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.