Components
Typography Heading
Ex. <h1> H1. Bootstrap heading </h1>

H1. Bootstrap heading

H2. Bootstrap heading

H3. Bootstrap heading

H4. Bootstrap heading

H5. Bootstrap heading
H6. Bootstrap heading
Display Heading
Ex. <p class="display-1"> Display 1 </p>

Display 1

Display 2

Display 3

Display 4

Background Color
Ex. <div class="bg-primary"> Doctris Multipurpose Template </div>

Soft Background Color
Ex. <div class="bg-soft-primary"> Doctris Multipurpose Template </div>

Text Color
Ex. <div class="text-primary"> Doctris Multipurpose Template </div>
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark
Buttons
Ex. <a href="#" class="btn btn-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark
Buttons Pill
Ex. <a href="#" class="btn btn-pills btn-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark
Buttons Soft
Ex. <a href="#" class="btn btn-soft-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark
Buttons Pill Soft
Ex. <a href="#" class="btn btn-pills btn-soft-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark
Buttons Outline
Ex. <a href="#" class="btn btn-outline-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark
Buttons Pill Outline
Ex. <a href="#" class="btn btn-outline-primary"> Primary </a>
Primary Secondary Success Danger Info Warning Light Dark
Button Icons
Ex. <a href="#" class="btn btn-icon btn-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>
Soft Button Icons
Ex. <a href="#" class="btn btn-icon btn-soft-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>
Outline Button Icons
Ex. <a href="#" class="btn btn-icon btn-outline-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>
Button Pill Icons
Ex. <a href="#" class="btn btn-icon btn-pills btn-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>
Soft Button Icons Pill
Ex. <a href="#" class="btn btn-icon btn-pills btn-soft-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>
Outline Button Pill Icons
Ex. <a href="#" class="btn btn-icon btn-pills btn-outline-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>
Button Sizing
Ex. <a href="#" class="btn btn-primary btn-sm"> Primary </a>
Small Small Small Small
Ex. <a href="#" class="btn btn-primary btn-lg"> Primary </a>
Large Large Large Large
Badges
Ex. <span class="badge bg-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark
Soft Badges
Ex. <span class="badge bg-soft-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark
Pill Badges
Ex. <span class="badge rounded-md bg-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark
Soft Pill Badges
Ex. <span class="badge rounded-md bg-soft-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark
Link Badges
Ex. <a href="#" class="badge bg-primary"> primary </a>
Primary Secondary Success Danger Warning Info Light Dark
Breadcrumb
Ex.
<ul class="breadcrumb bg-transparent rounded mb-0 p-0">
<li class="breadcrumb-item"><a href="#">Doctris</a></li>
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Menu</li>
</ul>
Pagination
Ex.
<ul class="pagination mb-0 list-unstyled">
 <li><a href="#" class="px-3 py-2 border"> Prev</a></li>
 <li class="active"><a href="#" class="px-3 py-2 border">1</a></li>
 <li><a href="#" class="px-3 py-2 border">2</a></li>
 <li><a href="#" class="px-3 py-2 border">Next </a></li>
</ul>
Alert
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>
Additional Content
Dismissing Alert
Ex.
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true"> × </span>
  </button>
</div>
Advanced Alert
Ex.
<div class="alert alert-primary alert-pills" role="alert">
   <span class="badge rounded-md bg-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
Advanced Outline Alert
Ex.
<div class="alert alert-outline-primary alert-pills" role="alert">
   <span class="badge rounded-md bg-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
Accordions

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
Forms
Checkboxes
Radio Buttons
Switches Button
Form Select Box
Google Map
Default Avatars
Ex. <img src="../assets/images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded">
Circle Avatars
Ex. <img src="../assets/images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded-circle">
Nav Tabs

You can combine all the Doctris templates into a single one, you can take a component from the Application theme and use it in the Website.

You can combine all the Doctris templates into a single one, you can take a component from the Application theme and use it in the Website.

You can combine all the Doctris templates into a single one, you can take a component from the Application theme and use it in the Website.

Modal
Click Here
Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Harry Potter @hpt
Icons
Feather Icons

There are 280+ feather icons and you can get all icons info from here: https://feathericons.com/

Ex. <i data-feather="mail" class="fea icon-sm"> </i>
Material Design Icons

There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/

Ex. <i class="mdi mdi-home"> </i>
Iconscout (Unicons) Icons

There are 1100+ Iconscout (Unicons) Icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon

Ex.
<span class="h3 text-primary me-2">
  <i class="uil uil-0-plus"></i>
</span>

© Doctris. Design with by Shreethemes.