#### Components

- Typography Heading
- Display Heading
- Background Colors
- Text Colors
- Buttons
- Dropdowns
- Badges
- Alerts
- Accordions
- Cards
- Forms
- Checkboxes
- Radio Buttons
- Switches Buttons
- Form Select Box
- Subscribe Forms
- Google Map
- Breadcrumbs
- Pagination
- Avatar
- Nav Tabs
- Progressbar
- Tooltips
- Modals
- Tables
- Blockquotes
- Icons

#### 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>`

#### Soft Background Color

###### Ex. `<div class="bg-soft-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

#### 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-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 badge-primary"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

#### Pill Badges

###### Ex. `<span class="badge badge-pill badge-primary"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

#### Soft Badges

###### Ex. `<span class="badge badge-soft-primary"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

#### Soft Pill Badges

###### Ex. `<span class="badge badge-pill badge-soft-primary"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

#### Outline Badges

###### Ex. `<span class="badge badge-pill badge-outline-primary"> primary </span>`

Primary Secondary Success Danger Warning Info Light Dark

#### Link Badges

###### Ex. `<a href="#" class="badge badge-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>`

A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!

#### Alert Links

###### Ex. `<div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>`

A simple primary alert with an link.
A simple secondary alert with an link.
A simple success alert with an link.
A simple danger alert with an link.
A simple warning alert with an link.
A simple info alert with an link.
A simple light alert with an link.
A simple dark alert with an link.

#### 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>`

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

#### Advanced Alert

###### Ex.
`<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>`

New A Modern primary alert—check it out!
New A Modern danger alert—check it out!

#### Advanced Outline Alert

###### Ex.
`<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>`

New A Modern primary alert—check it out!
New A Modern danger alert—check it out!

#### 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.

#### Cards

###### Vertical Card
`<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>`

##### Saas & Software : Landrick

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

Read More

##### Saas & Software : Landrick

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 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>`

##### Saas & Software : Landrick

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

Your Name *
Your Email *
Subject
Comments

#### Checkboxes

One
Two
Disabled

#### Radio Buttons

Yes
No
Disabled

#### Switches Button

Toggle this switch element
Disabled switch element

#### Form Select Box

#### Subscribe Form

#### Google Map

#### Pagination

###### Ex.
`<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>
`

- Prev
- 1
- 2
- 3
- Next

#### 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">`

#### 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 mr-2 mb-2" data-toggle="tooltip" data-placement="top" title="Top Tooltip" alt=""> Top Tooltip </a>`

Top Left Bottom Right

#### Modal

Click Here Login Popup Subscribe Popup Wishlist Popup Empty Cart Popup

##### Modal title

Dummy text is also used to demonstrate the appearance of different typefaces and layouts, and in general the content of dummy text is nonsensical. Due to its widespread use as filler text for layouts, non-readability is of great importance: human perception is tuned to recognize certain patterns and repetitions in texts. If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page (layout or type area). For this reason, dummy text usually consists of a more or less random series of words or syllables. This prevents repetitive patterns from impairing the overall visual impression and facilitates the comparison of different typefaces. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised.

Your Email *
Password *
Remember me

Forgot password ?

Don't have an account ? Sign Up

###### Be the first to know daily updates

#### Signup for daily updates

Subscribe to the Landrick mailing list to receive updates on new arrivals, special offers and our promotions.

Already have an account ? Sign in

#

#### Your wishlist is empty.

Create your first wishlist request...

+ Create new wishlist

#### Your cart is empty.

Looks like you haven't made your choice yet...

Start Shopping

#### 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>`

###### Flaticon Icons

There are Flaticon icons and you can get all icons info from here: `https://www.flaticon.com/packs/basic-icon`

###### 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 mr-2">
<i class="uil uil-0-plus"></i>
</span>`