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"> Landrick Saas & Software Template </div>
Text Color
Ex. <div class="text-primary"> Landrick Saas & Software Template </div>
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark
Accordions
Accordion #1
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
Accordion #2
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
Accordion #3
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
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-pill">
Google Map
Nav Tabs
You can combine all the Landrick 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 Landrick 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 Landrick templates into a single one, you can take a component from the Application theme and use it in the Website.
Breadcrumb
Ex.
<div class="page-next-level">
<ul class="page-next d-inline-block bg-white shadow p-2 pl-4 pr-4 rounded mb-0">
<li class="list-inline-item"> <a href="index.html" class="text-uppercase font-weight-bold text-dark"> Home </a> </li>
<li class="list-inline-item"> <a href="pages.html" class="text-uppercase font-weight-bold text-dark"> Pages </a> </lt>
<li class="list-inline-item">
<span class="text-uppercase text-primary font-weight-bold">Components </span>
</li>
</ul>
</div>
<ul class="page-next d-inline-block bg-white shadow p-2 pl-4 pr-4 rounded mb-0">
<li class="list-inline-item"> <a href="index.html" class="text-uppercase font-weight-bold text-dark"> Home </a> </li>
<li class="list-inline-item"> <a href="pages.html" class="text-uppercase font-weight-bold text-dark"> Pages </a> </lt>
<li class="list-inline-item">
<span class="text-uppercase text-primary font-weight-bold">Components </span>
</li>
</ul>
</div>
Pagination
Ex.
<ul class="pagination mb-0 list-unstyled">
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">Prev</a></li>
<li class="active"><a href="#" class="pr-3 pl-3 pt-2 pb-2">1</a></li>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">2</a></li>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">3</a></li>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">Next</a></li>
</ul>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">Prev</a></li>
<li class="active"><a href="#" class="pr-3 pl-3 pt-2 pb-2">1</a></li>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">2</a></li>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">3</a></li>
<li><a href="#" class="pr-3 pl-3 pt-2 pb-2">Next</a></li>
</ul>
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>
<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
PHP / MYSQL
Angular / JavaScript
HTML
Badges
Ex. <span class="badge badge-primary"> primary </span>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill Badges
Ex. <span class="badge badge-primary rounded"> primary </span>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outline Badges
Ex. <span class="badge badge-outline-primary rounded"> primary </span>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Dropdown
Ex.
<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>
<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>
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
Well done!
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.
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>
<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 badge-danger rounded"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
<span class="badge badge-danger rounded"> 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 badge-danger rounded"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
<span class="badge badge-danger rounded"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
Forms
Checkboxes
Radio Buttons
Switches Button
Subscribe Form
Modal
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
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>
Flaticon Icons
https://www.flaticon.com/packs/basic-icon
