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

Display 5

Display 6

Background Color

Ex. <div class="bg-primary"> Starty Multipurpose Template </div>

Soft Background Color

Ex. <div class="bg-soft-primary"> Starty Multipurpose Template </div>

Text Color

Ex. <div class="text-primary"> Starty 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>

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>

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

Dropdown

Ex.
<div class="btn-group dropdown-primary">
   <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Primary
   </button>
   <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Home</a>
     <a class="dropdown-item" href="#">Services</a>
     <a class="dropdown-item" href="#">About us</a>
     <div class="dropdown-divider"></div>
     <a class="dropdown-item" href="#">Contact us</a>
   </div>
</div>

Badges

Ex. <span class="badge text-bg-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Ex. <span class="badge rounded-pill text-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

Soft Pill Badges

Ex. <span class="badge rounded-pill bg-soft-primary"> primary </span>
Primary Secondary Success Danger Warning Info Light Dark

Link Badges

Ex. <a href="#" class="badge text-bg-primary"> primary </a>
Primary Secondary Success Danger Warning Info Light Dark

Alert

Ex. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>

Alert Links

Ex. <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </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="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
</div>

Advanced Alert

Ex.
<div class="alert alert-primary alert-pills" role="alert">
   <span class="badge rounded-pill 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-pill 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.

Cards

Vertical Card
<div class="card shadow rounded overflow-hidden>
   <img src="images/blog/01.jpg" class="img-fluid" alt=">
   <div class="card-body">
     <h5 class="card-title">Multipurpose HTML5 Template: Starty</h5>
     <p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
   </div>
</div>
Multipurpose HTML5 Template: Starty

Due to its widespread use as filler text for layouts, non-readability is of great importance

Read More
Multipurpose HTML5 Template: Starty

Due to its widespread use as filler text for layouts, non-readability is of great importance

Read More
Horizontal Card
<div class="card shadow rounded overflow-hidden>
   <img src="images/blog/img01.jpg" class="img-fluid" alt=">
   <div class="card-body">
     <h5 class="card-title">Multipurpose HTML5 Template: Starty</h5>
     <p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
   </div>
</div>
...
Multipurpose HTML5 Template: Starty

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Forms

Checkboxes

Radio Buttons

Switches Button

Form Select Box

Subscribe Form

Google Map

Breadcrumb

Ex.
<nav aria-label="breadcrumb" class="d-inline-block">
  <ul class="breadcrumb bg-white rounded shadow mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Pages</a></lt>
    <li class="breadcrumb-item active" aria-current="page">Elements</li>
  </ul>
</div>

Pagination

Ex.
<ul class="pagination">
  <li class="page-item">
   <a class="page-link" href="#" aria-label="Previous">
    <span aria-hidden="true"><i class="mdi mdi-chevron-left mdi-18px"></i></span>
   </a>
  </li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link active" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item">
   <a class="page-link" href="#" aria-label="Next">
    <span aria-hidden="true"><i class="mdi mdi-chevron-right mdi-18px"></i></span>
   </a>
  </li>
</ul>

Default Avatars

Ex. <img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded">

Circle Avatars

Ex. <img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded-circle">

Nav Tabs

You can combine all the Starty 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 Starty 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 Starty templates into a single one, you can take a component from the Application theme and use it in the Website.

Progressbar

Ex.
<div class="progress-box">
   <h6 class="title text-muted"> Progress</h6>
   <div class="progress">
     <div class="progress-bar position-relative bg-primary" style="width:84%;">
       <div class="progress-value d-block text-muted h6">84%</div>
     </div>
   </div>
</div>
WordPress
84%
PHP / MYSQL
75%
Angular / JavaScript
79%
HTML
95%

Tooltip

Ex. <a href="#"class="btn btn-primary me-2 mb-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Top Tooltip" alt=""> Top Tooltip </a>
Top Left Bottom Right

Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Harry Potter @hpt

Blockquotes

" There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. "

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>