HTML Complete UI  / 
Base

Typography

Headings

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

Display headings

Display 1

Display 2

Display 3

Display 4

Paragraph

Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.

Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

rendered as bold text

rendered as italicized text

Abbreviations

An abbreviation of the word attribute is attr.

HTML is the best thing since sliced bread.

Addresses

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

Blockquotes

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.

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

Lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Code

For example, <section> should be wrapped as inline.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

<p>Sample text here...</p>

y = mx + b

This text is meant to be treated as sample output from a computer program.

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

Figures

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Utilities

See more: https://getbootstrap.com/docs/4.0/utilities

Border color

Text color

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Dark link

Body link

Muted link

Light link

Lighter link

Lightest link

Background color

Opacity

.opacity-25
.opacity-50
.opacity-75
.opacity-100

Text sizing

.text-tiny - Tiny text.

.text-big - Big text.

.text-large - Large text.

.text-xlarge - Extra large.

Font weight

.font-weight-semibold - Semibold text.

Font family

.text-sans-serif - Sans Serif font.

.text-serif - Serif font.

.text-monospace - Monospaced font.

Line height

.line-height-1 - line-height: 1
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.line-height-condenced - line-height: 1.3
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.line-height-inherit - line-height: inherit
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

Text decoration and transform

.text-decoration-none - Text decoration - none

.text-transform-none - Text transform - none

Expanded text

.text-expanded - Encrease letter-spacing property.

Shadows

.shadow-none - box-shadow: none

Overflow

.overflow-hidden - overflow: hidden
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.overflow-scroll - overflow: scroll
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.overflow-auto - overflow: auto
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.overflow-visible - overflow: visible

Cursor

.cursor-pointer - cursor: pointer

.cursor-move - cursor: move / cursor: grab

Sizing

Responsive variations for .w-100 and .w-auto:

Layout container spacing

.container-p-x
.container-p-y

Negative:

.container-m-nx
.container-m-ny

Negative horizontal margins

Top block
Collapse horizontal spacing on large screens
Bottom block

The classes are named using the format m{sides}--{size} for xs and m{sides}--{breakpoint}-{size} for sm, md, lg, and xl.

Where sides is one of:

Where size is one of:

Flex

.flex-basis-100 - flex-basis: 100%

.flex-basis-auto - flex-basis: auto

Responsive variations also exist for .flex-basis-100 and .flex-basis-auto.

Bordered rows

.row-bordered class defines overflow: hidden on the parent container and position: relative on immediate children .col and .col-* blocks.
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

Table cell

Add .cell-fit class to a td or th element to reduce column width to its content:

# Full Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat

Transforms

.rotate-90 - ROTATE

.rotate-180 - ROTATE

.rotate-270 - ROTATE

.rotate--90 - ROTATE

.rotate--180 - ROTATE

.rotate--270 - ROTATE

.rotate-0 - ROTATE

.scaleX--1 - SCALE

.scaleY--1 - SCALE

The next classes will have effect only in RTL mode:

.scaleX--1-rtl - SCALE

.scaleY--1-rtl - SCALE

Fixes

.flex-truncate - Fix for truncated text within flexbox container

.ie-mh-1 - Fix IE parent container height bug when containing image with fluid width

Style-dependent classes

These classes change their color depending on the current active style. For example, an element with .theme-bg-dark class will have a dark background for the light/material style, but a white background for the dark style.

.theme-text-white - White (light or material style) / dark (dark style) text.

.theme-text-dark - Dark (light or material style) / white (dark style) text.

.theme-bg-white - White (light or material style) / dark (dark style) background.

.theme-bg-dark - Dark (light or material style) / white (dark style) background.

.theme-border-white - White (light or material style) / dark (dark style) border.

.theme-border-dark - Dark (light or material style) / white (dark style) border.

Buttons

Variations

Outline

Flat (Material only)

Round

Extra-large

Large

Small

Extra-small

With icon

Icon-buttons

Borderless icon-buttons

Disabled

Single toggle

Checkbox and radio


Badges

Within headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Variations

Default Primary Secondary Success Info Warning Danger Dark

Pills

Default Primary Secondary Success Info Warning Danger Dark

Outline

Default Primary Secondary Success Info Warning Danger Dark

Button badges

Dot badges

Default   Primary   Success   Info   Warning   Danger

Indicators

Button groups

Sizes





Button toolbars

Nesting

Vertical

Button dropdowns

Variations

Hidden arrow

Split

Sizes




Dropdowns

Example

Hover dropdowns

<script src="assets/vendor/js/dropdown-hover.js"></script>

Nested

Spinners

Border

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Growing

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Small

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Within buttons

Navs

Base

Vertical

Tabs & pills

Sizes

Fill & justify

Using dropdowns

Light navs (Material only)

Top tabs

Left tabs

Right tabs

Bottom tabs

Responsive navs

Try to resize window.

Pagination

Example

Sizes

Progress bars

Basic

Height

With label

30%

Variations

Striped

Animated

20% Complete

List groups

Example

Linked items

Contextual classes

Custom content

JavaScript behavior

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

Alerts

Light 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 an info alert — check it out!
This is a dark alert — check it out!

Dark 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 an info alert — check it out!
This is a dark alert — check it out!

Callouts

Examples

Lorem ipsum dolor sit amet

This is a secondary callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is a secondary callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is a success callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is a danger callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is a warning callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is an info callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is a dark callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Sizes

Lorem ipsum dolor sit amet

This is a secondary callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Lorem ipsum dolor sit amet

This is a secondary callout with a link.


Vivamus eleifend sit amet orci eget ullamcorper.

Bootstrap 4 toasts

$('.bs4-toast').toast();

Default

Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.

Translucent

Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Bootstrap
11 mins ago
Hello, world! This is a toast message.

Tooltips

Position

Variations

Popovers

Position

Variations

Modals

Default modals

Top modals

Slide modals

Fill-In modals

Breadcrumbs

Example

Form controls

Inputs

Textarea

Checkboxes and radios

Inline checkboxes and radios

Checkboxes and radios without label text

Selects

Inverted

Disabled

Read only

Sizes

Custom checkboxes and radios

Example

Disabled

Validations states

Stacked

Custom select

Example

Sizes

Inverted

Disabled

Validations states

File browser

Example

Disabled

Validations states

Custom range input

Example

Disabled

Forms

Example

Example block-level help text here.

Form row

Horizontal

Inline

@

Help text

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

Static controls

example.email.com
example.email.com

States

A block of help text that breaks onto a new line and may extend beyond one line.
A block of help text that breaks onto a new line and may extend beyond one line.
Please provide a valid state.

Sizes

Input groups

Example

@
@example.com
https://example.com/users/
$
.00
$
0.00

Sizing

@
@
@

Checkbox and radio addons

Custom select

Multiple addons

$
$
0.00

Button addons

Buttons with dropdowns

Segmented buttons

Switchers

Example

With icon

Square

Sizes


Variations

Disabled

Validation states

Stacked

App brand

Examples

Within navbar

Within sidenav

Brand image

Navbar

Example

Elements

Styling

Layouts

Mega dropdown

<script src="assets/vendor/js/mega-dropdown.js"></script>

Navbar search

Side Nav

<script src="assets/vendor/js/sidenav.js"></script>

Vertical

Horizontal

Horizontal (show dropdown on hover)

Horizontal within container

No animation

No accordion

Elements

Colors (vertical)

Colors (horizontal)

With background

Usage

<script src="assets/vendor/js/sidenav.js"></script> <div class="sidenav sidenav-vertical" id="vertical-sidenav-id"> ... </div> <div class="sidenav sidenav-horizontal" id="horizontal-sidenav-id"> ... </div> <script> var sidenav1 = new SideNav(document.getElementById('vertical-sidenav-id'), { ...options }); var sidenav2 = new SideNav(document.getElementById('horizontal-sidenav-id'), { orientation: 'horizontal', ...options }); // SideNav instance also can be accessed using element attribute: document.getElementById('sidenav-id').sidenavInstance </script>
OPTIONS
Option Default Description
orientation 'vertical' Sidenav orientation.
Values:   'vertical', 'horizontal'
accordion true Enable/disable accordion behaviour.
Values:   true, false
animate true Enable/disable animations.
Values:   true, false
closeChildren false Close all children menus when the parent menu closes.
Values:   true, false
showDropdownOnHover false Open dropdown on hover (horizontal mode only).
Values:   true, false
onOpen Called immediately after toggle link clicked.
  • Return false to prevent menu opening.
  • Return Promise and call reject() to prevent menu opening or call resolve() to continue.
new SideNav(document.getElementById('sidenav-id'), { onOpen: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });
onOpened Called after menu/dropdown open animation ends. new SideNav(document.getElementById('sidenav-id'), { onOpened: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });
onClose Called immediately after toggle link clicked.
  • Return false to prevent menu closing.
  • Return Promise and call reject() to prevent menu closing or call resolve() to continue.
Note: autoClosed is true when the menu is in accordion mode and the action is triggered by SideNav plugin itself.
new SideNav(document.getElementById('sidenav-id'), { onClose: function(sidenavInstance, itemEl, toggleLinkEl, menuEl, autoClosed) { ... } });
onClosed Called after menu/dropdown close animation ends. new SideNav(document.getElementById('sidenav-id'), { onClosed: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });
METHODS
sidenavInstance.method(...arguments);
Method Arguments Description
open(el[, closeChildren=options.closeChildren])
  • el - .sidenav-item or .sidenav-toggle element
  • closeChildren - Close all children menus when the parent menu closes. (optional)
Open menu/dropdown
close(el[, closeChildren=options.closeChildren])
  • el - .sidenav-item or .sidenav-toggle element
  • closeChildren - Close all children menus when the parent menu closes. (optional)
Close menu/dropdown
toggle(el[, closeChildren=options.closeChildren])
  • el - .sidenav-item or .sidenav-toggle element
  • closeChildren - Close all children menus when the parent menu closes. (optional)
Toggle menu/dropdown
closeAll([closeChildren=options.closeChildren])
  • closeChildren - Close all children menus when the parent menu closes. (optional)
Close all menus/dropdowns
setActive(el, active[, openTree=true[, deactivateOthers=true]])
  • el - .sidenav-item or .sidenav-link element
  • active - Set to true to activate; false to deactivate
  • openTree - Open parent menu tree
  • deactivateOthers - Deactivate currently active items
Activate/deactivate item
setDisabled(el, disabled)
  • el - .sidenav-item or .sidenav-link element
  • disabled - Set to true to disable; false to enable
Disable/enable item
isActive(el)
  • el - .sidenav-item or .sidenav-link element
Returns true if item is active
isOpened(el)
  • el - .sidenav-item or .sidenav-link element
Returns true if menu item is opened
isDisabled(el)
  • el - .sidenav-item or .sidenav-link element
Returns true if item is disabled
update() Update scrollbar(vertical mode) / scrollable area(horizontal mode)
destroy() Destroy SideNav instance

Footer

Colors

Tables

Basic

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head options

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Bordereless table

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Hoverable rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual classes

Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Dark Column content Column content Column content
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
10 Column content Column content Column content
11 Column content Column content Column content

Within card

Table within card
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive tables

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Media

Example

Mike Greene commented on Article Name

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2 hours ago

Leon Wilson commented on Article Name

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2 hours ago

Allie Rodriguez commented on Article Name

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2 hours ago

Nesting

Kenneth Frazier 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

     ·   Reply
Nelle Maxwell 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

     ·   Reply
Nelle Maxwell 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

     ·   Reply
Alice Hampton 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

     ·   Reply

Thumbnails

Example

With overlay

With overlay and content

Shadow on hover

Zoom In animation on hover

Cards

Example

Card image cap

Card title

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

Go somewhere

Content types

This is some text within a card block.

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
Card image cap

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

Mixed

Card image cap

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

Header and footer

Featured

Special title treatment

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

Go somewhere

Featured

Special title treatment

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

Go somewhere
Quote

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

Someone famous in Source Title
Featured

Special title treatment

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

Go somewhere

Text alignment

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

Navigation

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

Light navigation (Material only)

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

Images

Card image cap

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 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 image cap
Card image

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

Condenced

Card header
Card image cap

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

Style variations

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

Dark card title

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

Primary card title

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

Secondary card title

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

Success card title

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

Danger card title

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

Warning card title

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

Info card title

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

Dark card title

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

Hover cards

Card title

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

Primary card title

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

Primary card title

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

With elements

Card header
20 12
20 12

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title
20 12
20 12

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header
Some TEXT
Some TEXT

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title
Some TEXT
Some TEXT

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card groups

Card image cap

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.

Card image cap

Card title

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

Card image cap

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.

Card decks

Card image cap

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.

Card image cap

Card title

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

Card image cap

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.

Card columns

Card image cap

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 image cap

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

Card image

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

Accordion

Default

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

With icon

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

Carousel

Example