Can I use "Alerts with link button" 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.

Alerts with link button — Free Buttons Snippet (Bootstrap 5)

Loading…

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  13  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> 54

Alerts with link button

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