Basic layout
Basic layout with icons
Checkbox Controls
Checkbox and radio controls (default appearance is in primary color)
Dropdown sizes
Add class .btn-{size} to dropdown buttons
Add class .form-check-{color} for checkbox and radio controls
in theme colors
Single color buttons
Add class .btn-{color} for buttons in theme colors
Rounded buttons
Add class .btn-rounded
Outlined buttons
Add class .btn-outline-{color} for outline buttons
Inverse buttons
Add class .btn-inverse-{color} for inverse buttons
Icon Buttons
Add class .btn-icon for buttons with only icons
Button Size
Use class .btn-{size}
Block buttons
Add class .btn-block
Button groups
Wrap a series of buttons with .btn
in .btn-group
Button with text and icon
Wrap icon and text inside .btn-icon-text and use
.btn-icon-prepend
or .btn-icon-append for icon tags
Social Icon Buttons
Add class .btn-social-icon
Social button with text
Add class .btn-social-icon-text
Headings
Add tags <h1> to <h6> or class .h1 to
.h6
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Headings with secondary text
Add faded secondary text to headings
h1. Heading Secondary text
h2. Heading Secondary text
h3. Heading Secondary text
h4. Heading Secondary text
h5. Heading Secondary text
h6. Heading Secondary text
Display headings
Add class .display1 to .display-4
Display 1
Display 2
Display 3
Display 4
Paragraph
Write text in <p> tag
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley not only five centuries,
Icon size
Add class .icon-lg, .icon-md, .icon-sm
Icon-lg
Icon-md
Icon-sm
Blockquotes
Wrap content inside<blockquote class="blockquote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Address
Use <address> tag
Skydash inc.
695 lsom Ave,
Suite 00
San Francisco, CA 94107
johndoe@examplemeail.com
Web Address
www.Skydash.com
Lead
Use class .lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Text colors
Use class .text-primary, .text-secondary etc. for text in theme colors
.text-primary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-secondary
.text-dark
.text-muted
.text-white
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
Center aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.
Highlighted Text
Wrap the text in <mark> to highlight text
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
List Unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Bold text
Use class.font-weight-bold
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
List Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
Underline
Wrap in <u> tag for underline
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Lowercase
Use class .text-lowercase
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Uppercase
Use class .text-uppercase
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Mute
Use class .text-muted
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
Strike
Wrap content in <del> tag
lorem ipsum dolor sit amet, consectetur
mod tempor incididunt ut labore et dolore
magna aliqua.
Capitalized
Use class .text-capitalize
lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
List with icon
Add class .list-ticked to <ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
List with icon
Add class .list-arrow to <ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
List with icon
Add class .list-star to <ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>
Advanced Table
| Quote# | Product | Business type | Policy holder | Premium | Status | Updated at |
|---|
Basic Table
Add class .table
| Profile | VatNo. | Created | Status |
|---|---|---|---|
| Jacob | 53275531 | 12 May 2017 | |
| Messsy | 53275532 | 15 May 2017 | |
| John | 53275533 | 14 May 2017 | |
| Peter | 53275534 | 16 May 2017 | |
| Dave | 53275535 | 20 May 2017 |
Hoverable Table
Add class .table-hover
| User | Product | Sale | Status |
|---|---|---|---|
| Jacob | Photoshop | 28.76% | |
| Messsy | Flash | 21.06% | |
| John | Premier | 35.00% | |
| Peter | After effects | 82.00% | |
| Dave | 53275535 | 98.05% |
Striped Table
Add class .table-striped
| User | First name | Progress | Amount | Deadline |
|---|---|---|---|---|
|
Herman Beck |
|
$ 77.99 | May 15, 2015 |
|
Messsy Adam |
|
$245.30 | July 1, 2015 |
|
John Richards |
|
$138.00 | Apr 12, 2015 |
|
Peter Meggik |
|
$ 77.99 | May 15, 2015 |
|
Edward |
|
$ 160.25 | May 03, 2015 |
|
John Doe |
|
$ 123.21 | April 05, 2015 |
|
Henry Tom |
|
$ 150.00 | June 16, 2015 |
Bordered table
Add class .table-bordered
| # | First name | Progress | Amount | Deadline |
|---|---|---|---|---|
| 1 | Herman Beck |
|
$ 77.99 | May 15, 2015 |
| 2 | Messsy Adam |
|
$245.30 | July 1, 2015 |
| 3 | John Richards |
|
$138.00 | Apr 12, 2015 |
| 4 | Peter Meggik |
|
$ 77.99 | May 15, 2015 |
| 5 | Edward |
|
$ 160.25 | May 03, 2015 |
| 6 | John Doe |
|
$ 123.21 | April 05, 2015 |
| 7 | Henry Tom |
|
$ 150.00 | June 16, 2015 |
Inverse table
Add class .table-dark
| # | First name | Amount | Deadline |
|---|---|---|---|
| 1 | Herman Beck | $ 77.99 | May 15, 2015 |
| 2 | Messsy Adam | $245.30 | July 1, 2015 |
| 3 | John Richards | $138.00 | Apr 12, 2015 |
| 4 | Peter Meggik | $ 77.99 | May 15, 2015 |
| 5 | Edward | $ 160.25 | May 03, 2015 |
| 6 | John Doe | $ 123.21 | April 05, 2015 |
| 7 | Henry Tom | $ 150.00 | June 16, 2015 |
Table with contextual classes
Add class .table-{color}
| # | First name | Product | Amount | Deadline |
|---|---|---|---|---|
| 1 | Herman Beck | Photoshop | $ 77.99 | May 15, 2015 |
| 2 | Messsy Adam | Flash | $245.30 | July 1, 2015 |
| 3 | John Richards | Premeire | $138.00 | Apr 12, 2015 |
| 4 | Peter Meggik | After effects | $ 77.99 | May 15, 2015 |
| 5 | Edward | Illustrator | $ 160.25 | May 03, 2015 |