<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>Alerts</h2> <div class="alert alert-primary" role="alert"> This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-success" role="alert"> This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-danger" role="alert"> This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-warning" role="alert"> This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-info" role="alert"> This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-light" role="alert"> This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> <div class="alert alert-dark" role="alert"> This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col-lg-12"> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> </div> <div class="col-lg-12"> <h2>PILL BADGES</h2> <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> </div> <br> <div class="col-lg-12"> <h2>LINK BADGES</h2> <a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-secondary">Secondary</a> <a href="#" class="badge badge-success">Success</a> <a href="#" class="badge badge-danger">Danger</a> <a href="#" class="badge badge-warning">Warning</a> <a href="#" class="badge badge-info">Info</a> <a href="#" class="badge badge-light">Light</a> <a href="#" class="badge badge-dark">Dark</a> </div> <br><br> <div class="col-lg-12"> <h2></h2> <button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button> </div> </div> <br> </div>