<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="form-group"></div> <h3>Normal Labels</h3> <hr /> <div class="form-group"> <label class="lbl lbl-default"><span>Default</span></label> <label class="lbl lbl-success"><span>Success</span></label> <label class="lbl lbl-danger"><span>Danger</span></label> <label class="lbl lbl-primary"><span>Primary</span></label> <label class="lbl lbl-warning"><span>Warning</span></label> </div> <h3>Full Width Labels</h3> <hr /> <div class="form-group"> <label class="lbl lbl-default lbl-block"><span>Default</span></label> <label class="lbl lbl-success lbl-block"><span>Success</span></label> <label class="lbl lbl-danger lbl-block"><span>Danger</span></label> <label class="lbl lbl-primary lbl-block"><span>Primary</span></label> <label class="lbl lbl-warning lbl-block"><span>Warning</span></label> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); body { font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 500; } .lbl { padding: .5rem 1rem; border-radius: .2rem; cursor: pointer; transition: all .3s; transition-timing-function: ease-in-out; } .lbl-default { background-color: rgb(116,120,141, 0.1); color: #74788d; } .lbl-default:hover { background-color: #74788d; color: #fff; } .lbl-success { background-color: rgba(10, 187, 135, 0.1); color: #0abb87; } .lbl-success:hover { background-color: #0abb87; color: #fff; } .lbl-danger { background-color: rgba(253,57,122,.1); color: #fd397a; } .lbl-danger:hover { background-color: #fd397a; color: #fff; } .lbl-primary { background-color: rgba(93,120,255,.1); color: #5d78ff; } .lbl-primary:hover { background-color: #5d78ff; color: #fff; } .lbl-warning { background-color: rgba(255,184,34,.1); color: #ffb822; } .lbl-warning:hover { background-color: #ffb822; color: #fff; } .lbl-block { display: block; }