badge.html

---
layout: default
title: "Badges - Sleek Admin Dashboard Template"


parent: "ui-elements"
sub_parent: "components"
activePage: "badge"
plugins: []
---

							<div class="breadcrumb-wrapper">
								<h1>Badges</h1>
								{%- include breadcrumb.htm -%}
							</div>
							<div class="row">

								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header justify-content-between card-header-border-bottom">
											<h2>Badges </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> more details.</a></p>
											<h1 class="mb-2 text-dark">Heading
												<span class="badge badge-secondary ">New</span>
											</h1>
											<h2 class="mb-2 text-dark">Heading
												<span class="badge badge-secondary ">New</span>
											</h2>
											<h3 class="mb-2 text-dark">Heading
												<span class="badge badge-secondary ">New</span>
											</h3>
											<h4 class="mb-2 text-dark">Heading
												<span class="badge badge-secondary ">New</span>
											</h4>
											<h5 class="mb-2 text-dark">Heading
												<span class="badge badge-secondary ">New</span>
											</h5>
											<h6 class="mb-2 text-dark">Heading
												<span class="badge badge-secondary ">New</span>
											</h6>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Contextual Variations </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Add any of the below mentioned modifier classes to change the appearance of a badge. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> more details.</a></p>
											<span class="mb-2 mr-2 badge badge-primary">Primary</span>
											<span class="mb-2 mr-2 badge badge-secondary">Secondary</span>
											<span class="mb-2 mr-2 badge badge-success">Success</span>
											<span class="mb-2 mr-2 badge badge-danger">Danger</span>
											<span class="mb-2 mr-2 badge badge-warning">Warning</span>
											<span class="mb-2 mr-2 badge badge-info">Info</span>
											<span class="mb-2 mr-2 badge badge-dark">Dark</span>
										</div>
									</div>
									<div class="card card-default rounded mb-0 bg-white">
										<div class="card-header card-header-border-bottom">
											<h2>Pill Badges </h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> Use the <code>.badge-pill</code> modifier class to make badges more rounded. Read bootstrap
												documentaion <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> more details.</a></p>
											<span class="mb-2 mr-2 badge badge-pill badge-primary">Primary</span>
											<span class="mb-2 mr-2 badge badge-pill badge-secondary">Secondary</span>
											<span class="mb-2 mr-2 badge badge-pill badge-success">Success</span>
											<span class="mb-2 mr-2 badge badge-pill badge-danger">Danger</span>
											<span class="mb-2 mr-2 badge badge-pill badge-warning">Warning</span>
											<span class="mb-2 mr-2 badge badge-pill badge-info">Info</span>
											<span class="mb-2 mr-2 badge badge-pill badge-dark">Dark</span>
										</div>
									</div>
								</div>
							</div>