IndoUi – Bootstrap 4 Admin Dashboard HTML Template

Contextual colors

Primary
.bg-primary

Info
.bg-info

Secondary
.bg-secondary

Warning
.bg-warning

Danger
.bg-danger

Success
.bg-success

<div class="row">
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3 bg-primary  mr-4"></div>
			<div>
				<strong>Primary</strong><br>
				<code>.bg-primary</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-info  mr-4"></div>
			<div>
				<strong>Info</strong><br>
				<code>.bg-info</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-secondary  mr-4"></div>
			<div>
				<strong>Secondary</strong><br>
				<code>.bg-secondary</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-warning  mr-4"></div>
			<div>
				<strong>Warning</strong><br>
				<code>.bg-warning</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-danger  mr-4"></div>
			<div>
				<strong>Danger</strong><br>
				<code>.bg-danger</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-success  mr-4"></div>
			<div>
				<strong>Success</strong><br>
				<code>.bg-success</code>
			</div>
		</div>
	</div>
</div>

Gradient colors

Primary
.bg-gradient-primary

Secondary
.bg-gradient-secondary

Danger
.bg-gradient-danger

Warning
.bg-gradient-warning

info
.bg-gradient-info

Success
.bg-gradient-success

<div class="row">
	<div class="col-md-12 col-lg-6 col-sm-12 col-xl-4">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-gradient-primary  mr-4"></div>
			<div>
				<strong>Primary</strong><br>
				<code>.bg-gradient-primary</code>
			</div>
		</div>
	</div>
	<div class="col-md-12 col-lg-6 col-sm-12 col-xl-4">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-gradient-secondary  mr-4"></div>
			<div>
				<strong>Secondary</strong><br>
				<code>.bg-gradient-secondary</code>
			</div>
		</div>
	</div>
	<div class="col-md-12 col-lg-6 col-sm-12 col-xl-4">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3 bg-gradient-danger  mr-4"></div>
			<div>
				<strong>Danger</strong><br>
				<code>.bg-gradient-danger</code>
			</div>
		</div>
	</div>
	<div class="col-md-12 col-lg-6 col-sm-12 col-xl-4">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-gradient-warning  mr-4"></div>
			<div>
				<strong>Warning</strong><br>
				<code>.bg-gradient-warning</code>
			</div>
		</div>
	</div>
	<div class="col-md-12 col-lg-6 col-sm-12 col-xl-4">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-gradient-info  mr-4"></div>
			<div>
				<strong>info</strong><br>
				<code>.bg-gradient-info</code>
			</div>
		</div>
	</div>
	<div class="col-md-12 col-lg-6 col-sm-12 col-xl-4">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-gradient-success  mr-4"></div>
			<div>
				<strong>Success</strong><br>
				<code>.bg-gradient-success</code>
			</div>
		</div>
	</div>
</div>

Other colors

Blue
.bg-blue

Red
.bg-red

Teal
.bg-teal

Azure
.bg-azure

Orange
.bg-orange

Cyan
.bg-cyan

Indigo
.bg-indigo

Yellow
.bg-yellow

Gray
.bg-gray

Purple
.bg-purple

Lime
.bg-lime

Dark Gray
.bg-gray-dark

Pink
.bg-pink

Green
.bg-green

secondary
.bg-secondary

<div class="row">
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-blue  mr-4"></div>
			<div>
				<strong>Blue</strong><br>
				<code>.bg-blue</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-red  mr-4"></div>
			<div>
				<strong>Red</strong><br>
				<code>.bg-red</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-teal  mr-4"></div>
			<div>
				<strong>Teal</strong><br>
				<code>.bg-teal</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-azure   mr-4"></div>
			<div>
				<strong>Azure</strong><br>
				<code>.bg-azure </code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-orange  mr-4"></div>
			<div>
				<strong>Orange</strong><br>
				<code>.bg-orange</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-cyan  mr-4"></div>
			<div>
				<strong>Cyan</strong><br>
				<code>.bg-cyan</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-indigo  mr-4"></div>
			<div>
				<strong>Indigo</strong><br>
				<code>.bg-indigo</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-yellow  mr-4"></div>
			<div>
				<strong>Yellow</strong><br>
				<code>.bg-yellow</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3 bg-gray  mr-4"></div>
			<div>
				<strong>Gray</strong><br>
				<code>.bg-gray</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-purple   mr-4"></div>
			<div>
				<strong>Purple</strong><br>
				<code>.bg-purple </code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-lime  mr-4"></div>
			<div>
				<strong>Lime</strong><br>
				<code>.bg-lime</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3 bg-gray-dark  mr-4"></div>
			<div>
				<strong>Dark Gray</strong><br>
				<code>.bg-gray-dark</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-pink   mr-4"></div>
			<div>
				<strong>Pink</strong><br>
				<code>.bg-pink </code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-green  mr-4"></div>
			<div>
				<strong>Green</strong><br>
				<code>.bg-green</code>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-lg-4 col-sm-6">
		<div class="d-flex align-items-center mb-3 mt-3">
			<div class="w-8 h-8 br-3  bg-secondary  mr-4"></div>
			<div>
				<strong>secondary</strong><br>
				<code>.bg-secondary</code>
			</div>
		</div>
	</div>
</div>

Navigation Style

Skin Themes

Skin Modes

Background Patterns

Horizontal Menu Styles

Tables

Forms

Calendar

Error Pages

Colors

Contextual colors

Gradient colors

Other colors

Maryam Naz

Sahar Darya

Maryam Naz

Yolduz Rafi

Nargis Hawa

Khadija Mehr

Khadija Mehr

Navigation Style

Skin Themes

Skin Modes

Background Patterns

Horizontal Menu Styles

Vanessa Dyer

Tables

Forms

Calendar

Error Pages

Colors

Contextual colors

Gradient colors

Other colors

Maryam Naz

Sahar Darya

Maryam Naz

Yolduz Rafi

Nargis Hawa

Khadija Mehr

Khadija Mehr