<h1> H1. Bootstrap heading </h1><p class="display-1"> Display 1 </p>Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<div class="bg-primary"> Starty Multipurpose Template </div><div class="bg-soft-primary"> Starty Multipurpose Template </div><div class="text-primary"> Starty Multipurpose Template </div>
<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>
<span class="badge text-bg-primary"> primary </span><span class="badge rounded-pill text-bg-primary"> primary </span><span class="badge bg-soft-primary"> primary </span><span class="badge rounded-pill bg-soft-primary"> primary </span><div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div><div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<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>
<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>
<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>
<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>
Due to its widespread use as filler text for layouts, non-readability is of great importance
Read MoreDue to its widespread use as filler text for layouts, non-readability is of great importance
Read More
<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>
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
<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>
<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>
<img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded">
<img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded-circle">
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.
<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>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Harry | Potter | @hpt |
" 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. "
There are 280+ feather icons and you can get all icons info from here: https://feathericons.com/
<i data-feather="mail" class="fea icon-sm"> </i>There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/
<i class="mdi mdi-home"> </i>There are 1100+ Iconscout (Unicons) Icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon
<span class="h3 text-primary me-2">
<i class="uil uil-0-plus"></i>
</span>