"Bootstrap Badges"
Bootstrap 4.0.0 Snippet by CreativeTim

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="container mt-5"> <div class="title"> <h3>Badges</h3> </div> <span class="badge badge-pill badge-secondary">Default</span> <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-rose">Rose</span> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> </body>
html *{ -webkit-font-smoothing: antialiased; } .title h3{ font-size: 25px !important; margin-top: 20px; margin-bottom: 25px; line-height: 1.4em !important; font-weight: 300; } .badge { padding: 5px 12px; font-size: 10px; color: #fff; text-transform: uppercase; font-weight: 500; line-height: 1; } .badge-secondary { background-color: #6c757d; } .badge.badge-primary { background-color: #9c27b0; } .badge.badge-info { background-color: #00bcd4; } .badge.badge-success { background-color: #4caf50; } .badge.badge-warning { background-color: #ff9800; } .badge.badge-danger { background-color: #f44336; } .badge.badge-rose { background-color: #e91e63; } /* footer */ footer{ margin-top: 20px; color: #555; background: #fbfafa; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; }

Related: See More

Argon Design System
Round Icon Badges
Product badges responsive
Product notch badges responsive

Questions / Comments: