Can I use "Custom colored alerts boostrap 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.

Custom colored alerts boostrap 5.1.3 — Free Utilities 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="border-start border-4 border-primary ps-3 p-3 my-3 alert-primary shadow" role="alert"> 18A simple shadow primary alert—check it out! 19</div> 20<div class="border-start border-4 border-secondary ps-3 p-3 my-3 alert-secondary" role="alert"> 21A simple secondary alert—check it out! 22</div> 23<div class="border-start border-4 border-success ps-3 p-3 my-3 alert-success" role="alert"> 24A simple success alert—check it out! 25</div> 26<div class="border-start border-4 border-danger ps-3 p-3 my-3 alert-danger shadow" role="alert"> 27A simple danger alert—check it out! 28</div> 29<div class="border-start border-4 border-warning border-end ps-3 p-3 my-3 alert-warning" role="alert"> 30A simple warning alert—check it out! 31</div> 32<div class="border-start border-4 border-info ps-3 p-3 my-3 alert-info" role="alert"> 33A simple info alert—check it out! 34</div> 35<div class="border-start border-4 border-dark ps-3 p-3 my-3 alert-light" role="alert"> 36A simple light alert—check it out! 37</div> 38<div class="border-start border-4 border-end border-secondary ps-3 p-3 my-3 alert-dark" role="alert"> 39A simple dark alert—check it out! 40</div> 41</div> 42</div> 43 </div> 44 45</body> 46</html> 47

Custom colored alerts boostrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities 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