Simple Alerts
<div class="container py-5"> <div class="row"> <div class="alert alert-primary text-white font-weight-bold" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary text-white font-weight-bold" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success text-white font-weight-bold" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger text-white font-weight-bold" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning text-white font-weight-bold" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info text-white font-weight-bold" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light text-white font-weight-bold" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark text-white font-weight-bold" role="alert"> A simple dark alert—check it out! </div> </div> </div>
Alerts with Links
<div class="container py-5"> <div class="row"> <div class="alert alert-primary text-white" role="alert"> A simple primary alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary text-white" role="alert"> A simple secondary alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success text-white" role="alert"> A simple success alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-danger text-white" role="alert"> A simple danger alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-warning text-white" role="alert"> A simple warning alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-info text-white" role="alert"> A simple info alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-light text-white" role="alert"> A simple light alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> <div class="alert alert-dark text-white" role="alert"> A simple dark alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like. </div> </div> </div>
Alerts with Content
<div class="container py-10"> <div class="row"> <div class="alert alert-success text-white" role="alert"> <h4 class="alert-heading">Good job!</h4> <p>That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.</p> <hr class="horizontal light"> <p class="mb-0">What else could rust the heart more over time? Blackgold.</p> </div> </div> </div>
Dismissing Alert
<div class="container py-7 mt-3"> <div class="row"> <div class="alert alert-warning alert-dismissible text-white fade show" role="alert"> <strong>Holy molly!</strong> You should check in on some of those fields below. <button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div>