Alerts

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

This is a info alert with an example link. Give it a click if you like.

This is a light alert with an example link. Give it a click if you like.

This is a dark alert with an example link. Give it a click if you like.

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.

Holy guacamole! You should check in on some of those fields below.

Badges

Example heading New

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

Buttons

Circle Buttons

Use Font Awesome Icons (included with this theme package) along with the circle buttons as shown in the examples below!

.btn-circle

.btn-circle .btn-sm

.btn-circle .btn-lg

Brand Buttons

Google and Facebook buttons are available featuring each company's respective brand color. They are used on the user login and registration pages.

You can create more custom buttons by adding a new color variable in the _variables.scss file and then using the Bootstrap button variant mixin to create a new style, as demonstrated in the _buttons.scss file.

.btn-google .btn-facebook

Split Buttons with Icon

Works with any button colors, just use the .btn-icon-split class and the markup in the examples below. The examples below also use the .text-white-50 helper class on the icons for additional styling, but it is not required.

Split Button Primary

Split Button Success

Split Button Info

Split Button Warning

Split Button Danger

Split Button Secondary

Split Button Primary

Also works with small and large button classes!

Split Button Small

Split Button Large

Link

Primary link Link

Checked

Active Radio Radio

Button group

Cards

Default Card Example

This card uses Bootstrap's default styling with no utility classes added. Global styles are the only things modifying the look and feel of this default card example.

Basic Card Example

The styling for this basic card example is created by using default Bootstrap utility classes. By using utility classes, the style of the card component can be easily modified with no need for any custom CSS!

Dropdown Card Example

Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.

Collapsable Card Example

This is a collapsable card example using Bootstrap's built in collapse functionality. Click on the card header to see the card body collapse and expand!

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card title

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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Collapse

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Dropdowns

Forms

Welcome Back!

Remember Me

Login

Login with Google Login with Facebook

Forgot Password?

Create an Account!

Email address

Example select

Example multiple select

Example textarea

Default checkbox

Disabled checkbox

Default radio

Second default radio

Disabled radio

1

2

3 (disabled)

1

2

3 (disabled)

Email

Password

Address

Address 2

City

State

Zip

Check me out

Email

Password

Radios

First radio

Second radio

Third disabled radio

Checkbox

Example checkbox

@

Remember me

@

Remember me

Preference

Remember my preference

Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Disabled input

Disabled select menu

Can't check this

First name

Looks good!

Last name

Looks good!

Username

@

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

First name

Looks good!

Last name

Looks good!

Username

@

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Textarea

Please enter a message in the textarea.

Check this custom checkbox

Example invalid feedback text

Toggle this custom radio

Or toggle this other custom radio

More example invalid feedback text

Example invalid custom select feedback

Choose file...

Example invalid custom file feedback

First name

Last name

Username

@

City

State

Zip

First name

Last name

Username

@

City

State

Zip

Check this custom checkbox

Toggle this custom radio

Or toggle this other custom radio

Toggle this custom radio

Or toggle this other custom radio

Check this custom checkbox

Toggle this custom radio

Toggle this switch element

Disabled switch element

Example range

Choose file

Seleccionar Archivo

Voeg je document toe

Input group

@

@example.com

Your vanity URL

https://example.com/users/

$

.00

With textarea

@

Small

Default

Large

First and last name

$ 0.00

Upload

Choose file

Upload

Choose file

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Modal

List group

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Home Profile Messages Settings

...

Navs

...

Home Profile Messages Settings

...

Navbar

Pagination

1
2
3

Previous
1
2 (current)
3
Next

Progress

25%

Components

Custom Text Color Utilities

Custom Font Size Utilities

Custom Background Gradient Utilities

Custom Grayscale Background Utilities

Grow In Animation Utilty

Fade In Animation Utilty

Overflow Hidden Utilty

Progress Small Utility

Dropdown - No Arrow

Rotation Utilities

Projects

Server Migration 20%

Sales Tracking 40%

Customer Database 60%

Payout Details 80%

Account Setup Complete!

Alerts

Well done!

Badges

Example heading New