<h1>H1. Bootstrap heading </h1>
<p class="display-1">Display 1 </p>
Display 1
Display 2
Display 3
Display 4
<div class="bg-primary">Landrick Saas & Software Template </div>
<div class="bg-soft-primary">Landrick Saas & Software Template </div>
<div class="text-primary">Landrick Saas & Software Template </div>
<div class="btn-group dropdown-primary">
<button type="button" class="btn btn-primary dropdown-toggle" data-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 badge-primary">primary </span>
<span class="badge badge-pill badge-primary">primary </span>
<span class="badge badge-pill badge-outline-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="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-primary alert-pills" role="alert">
<span class="badge badge-pill badge-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 badge-pill badge-danger">New </span>
<span class="alert-content">A Modern primary alert—check it out!</span>
</div>
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.
<div class="card shadow rounded border-0 overflow-hidden>
<img src="images/blog/01.jpg" class="img-fluid" alt=">
<div class="card-body">
<h5 class="card-title">Saas & Software:Landrick</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 border-0 overflow-hidden>
<img src="images/blog/01.jpg" class="img-fluid" alt=">
<div class="card-body">
<h5 class="card-title">Saas & Software:Landrick</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">Components</li>
</ul>
</div>
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Previous">Prev</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" 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">Next</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">
<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 Flaticon icons and you can get all icons info from here:https://www.flaticon.com/packs/basic-icon
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 mr-2">
<i class="uil uil-0-plus"></i>
</span>