Badges

Default Primary Success Danger Info Warning

<span class="badge badge-default mr-1 mb-1 mt-1">Default</span>
<span class="badge badge-primary  mr-1 mb-1 mt-1">Primary</span>
<span class="badge badge-success  mr-1 mb-1 mt-1">Success</span>
<span class="badge badge-danger  mr-1 mb-1 mt-1">Danger</span>
<span class="badge badge-info  mr-1 mb-1 mt-1">Info</span>
<span class="badge badge-warning  mr-1 mb-1 mt-1">Warning</span>

Pill Badges

Default Primary Success Danger Info Warning

<span class="badge badge-pill badge-default mr-1 mb-1 mt-1">Default</span>
<span class="badge badge-pill badge-primary mr-1 mb-1 mt-1">Primary</span>
<span class="badge badge-pill badge-success mr-1 mb-1 mt-1">Success</span>
<span class="badge badge-pill badge-danger mr-1 mb-1 mt-1">Danger</span>
<span class="badge badge-pill badge-info mr-1 mb-1 mt-1">Info</span>
<span class="badge badge-pill badge-warning mr-1 mb-1 mt-1">Warning</span>

Buttons with Badges

<button type="button" class="btn btn-primary mt-1 mb-1 ml-3">
	<span>Notifications</span>
	<span class="badge badge-white">2</span>
</button>
<button type="button" class="btn btn-secondary  mt-1 mb-1 ml-3">
	<span>Notifications</span>
	<span class="badge badge-dark">2</span>
</button>
<button type="button" class="btn btn-success  mt-1 mb-1 ml-3">
	<span>Notifications</span>
	<span class="badge badge-info">2</span>
</button>
<button type="button" class="btn btn-info  mt-1 mb-1 ml-3">
	<span>Notifications</span>
	<span class="badge badge-danger">2</span>
</button>
<button type="button" class="btn btn-warning mt-1 mb-1 ml-3">
	<span>Notifications</span>
	<span class="badge badge-primary">2</span>
</button>
<button type="button" class="btn btn-danger  mt-1 mb-1 ml-3">
	<span>Notifications</span>
	<span class="badge badge-info">2</span>
</button>

Simple Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New

Heading 06 New

<h1>Heading 01 <span class="badge badge-default">New</span></h1>
<h2>Heading 02 <span class="badge badge-default">New</span></h2>
<h3>Heading 03 <span class="badge badge-default">New</span></h3>
<h4>Heading 04 <span class="badge badge-default">New</span></h4>
<h5>Heading 05 <span class="badge badge-default">New</span></h5>
<h6>Heading 06 <span class="badge badge-default">New</span></h6>

Colored Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New

Heading 06 New

<h1 class="text-blue">Heading 01 <span class="badge badge-primary">New</span></h1>
<h2  class="text-red">Heading 02  <span class="badge badge-danger">New</span></h2>
<h3  class="text-yellow">Heading 03 <span class="badge badge-warning">New</span></h3>
<h4  class="text-green">Heading 04 <span class="badge badge-success">New</span></h4>
<h5  class="text-info">Heading 05  <span class="badge badge-info">New</span></h5>
<h6  class="text-secondary">Heading 06 <span class="badge badge-secondary">New</span></h6>

Card Model Badges

top

Default badge

And a little description.
and so one

top

Success badge

And a little description.
and so one

top

Primary badge

And a little description.
and so one

top

Info Badge

And a little description.
and so one

top

Warning badge

And a little description.
and so one

top

Danger Badge

And a little description.
and so one

<div class="row">
	<div class="col-xs-12 col-sm-6 col-lg-4">
		<div class="offer offer-default">
			<div class="shape">
				<div class="shape-text">
					top
				</div>
			</div>
			<div class="offer-content">
				<h3 class="lead">
					Default badge
				</h3>
				<p class="mb-0">
					And a little description.
					<br> and so one
				</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-lg-4">
		<div class="offer offer-success">
			<div class="shape">
				<div class="shape-text">
					top
				</div>
			</div>
			<div class="offer-content">
				<h3 class="lead">
					Success badge
				</h3>
				<p class="mb-0">
					And a little description.
					<br> and so one
				</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-lg-4">
		<div class="offer offer-radius offer-primary">
			<div class="shape">
				<div class="shape-text">
					top
				</div>
			</div>
			<div class="offer-content">
				<h3 class="lead">
					Primary badge
				</h3>
				<p class="mb-0">
					And a little description.
					<br> and so one
				</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-lg-4">
		<div class="offer offer-info">
			<div class="shape">
				<div class="shape-text">
					top
				</div>
			</div>
			<div class="offer-content">
				<h3 class="lead">
					Info Badge
				</h3>
				<p class="mb-0">
					And a little description.
					<br> and so one
				</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-lg-4">
		<div class="offer offer-warning">
			<div class="shape">
				<div class="shape-text">
					top
				</div>
			</div>
			<div class="offer-content">
				<h3 class="lead">
					Warning badge
				</h3>
				<p class="mb-0">
					And a little description.
					<br> and so one
				</p>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-lg-4">
		<div class="offer offer-radius offer-danger">
			<div class="shape">
				<div class="shape-text">
					top
				</div>
			</div>
			<div class="offer-content">
				<h3 class="lead">
					Danger Badge
				</h3>
				<p class="mb-0">
					And a little description.
					<br> and so one
				</p>
			</div>
		</div>
	</div>
</div>

Navigation Style

Skin Themes

Skin Modes

Background Patterns

Horizontal Menu Styles

Vanessa Dyer

Tables

Forms

Calendar

Error Pages

Badge

Badges

Pill Badges

Buttons with Badges

Simple Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New

Heading 06 New

Colored Badges

Heading 01 New

Heading 02 New

Heading 03 New

Heading 04 New

Heading 05 New

Heading 06 New

Card Model Badges

Default badge

Success badge

Primary badge

Info Badge

Warning badge

Danger Badge

Maryam Naz

Sahar Darya

Maryam Naz

Yolduz Rafi

Nargis Hawa

Khadija Mehr

Khadija Mehr