sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
81 lines (75 loc) • 3.66 kB
HTML
---
layout: default
title: "Badges - Sleek Admin Dashboard Template"
parent: "components"
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.4/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.4/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.4/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>