Example Pages

Take a look at one of these example pages or scroll down to see tons of component examples

Checkout demo

A recreation of Bootstrap's Checkout example page demonstrating form elements and validation.

Pricing demo

A recreation of Bootstrap's Pricing example page.

Sidebar demo

Custom sidebar layout using utility classes.

Alert

All types

Sign up for premium to see the full list Your order has been received! A confirmation email was sent to john@example.com Your flight has been canceled. You do not have permission to delete records.

Not dismissible

You can't get rid of me.

Container

Small container

Log in

Forgot password
Not a member? Sign up

Medium container

Log in

Forgot password
Not a member? Sign up

Default container

Log in

Forgot password
Not a member? Sign up

maxwidth=none container

Log in

Forgot password
Not a member? Sign up

Grids

Auto-span

One column in one row. Two columns... in another row. Three columns... in... yet another row.

Span size and auto-span

One column with span="3"... and a second column fills remaining space. One column with span="3"... another with span="4"... and a third column fills remaining space. One column with span="7" and no other columns. One column with span="7"... another with span="5" to make 12. One column with span="7"... and another with span="6", which exceeds the 12 column grid. Avoid!

Centering columns

One auto-span column inside a centered row. One column with span="3"... and one with the default auto-span inside a centered row.

Responsive columns

This column spans 3 on lg screens, 5 on md, and 12 on sm. This column spans 9 on lg screens, 7 on md, and 12 on sm.

Boxes

Default

Regular text on the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular text in a Box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Regular text in a secondary Box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Three in a row

Regular text on the page
 Regular text in a Box Regular text in a secondary Box

Nesting a secondary Box

Create an account

Must have a number and be 6 or more characters

Dialogs

Title

Body lorem ipsum

Regular text on the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular text in a Box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body lorem ipsum

Regular text on the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular text in a Box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body lorem ipsum

Regular text on the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular text in a Box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body lorem ipsum

Regular text on the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular text in a Box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text

Log in

Forgot password
Not a member? Sign up

Tip: This content retains its state after the Dialog is closed. Try filling in the form then close the Dialog and and re-open. See how the state of the DOM was not changed by Dialog?

Modeless

This Dialog is opened with the show() method, which makes it "modeless". This means the user can still interact with other elements on the page (try it, you can't do that with the other Dialog examples), which could result in the user triggering actions unintentionally, so be judicious when using this method.

Forms

Everything form

Details

This is a short bit of info about elephants.

Learn more

Details about this thing.

And more details about this thing.

Loader

Basic loaders

Loader on its own:

Loader without loading:

Loader with text: Searching...

Loader used in button

The Loader in this button is hidden waiting for the user to click...
When clicked, the app removes hidden from the Loader and adds disabled to the button and updates its label:

Loader and links

This Loader has its own text and is inside a link. The app, for example, could toggle its loading attribute and text based on the state of the process: Pause / Resume

This Loader has its own text, is medium text size, and sits above a link. They've both been centered:

Downloading... Stop

Loader size

Explicit font-size of 70px:

Inherited size:

Inside heading 1

Inside heading 2

Inside heading 3

Inside heading 4

Inside heading 5
Inside heading 6

Inside paragraph

Inside small

Menu

Basic Menu with links

Link A Link B Link C

Menu with custom content and min-width: 300px

Text Here
Some more text with a link

Switch

Checked, unchecked, and disabled

Standalone in a custom layout

Alarm 7:00AM

In a Box as a form of options

Notification preferences

Currently unavailable

Tables

Basic table

Column heading Column heading
Cell Cell
Cell Cell

Tabs

Basic tabs

With icons

Scrollable