Snow Bootstrap

Experience The Snow Bootstrap Theme

Alerts

View Source Code

Badge

Basic Badges

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark
View Source Code

Badges with .btn class


View Source Code

Breadcrumb

View Source Code

Buttons

Basic Buttons

View Source Code

Rounded Buttons

View Source Code

Circle Buttons

View Source Code

Drop (Down, Up, Right, Left, Right-aligned, Spilt)

View Source Code

Block Level Button

View Source Code

Large & Small Button

View Source Code

Checkbox and radio buttons

View Source Code

Button group

View Source Code

Button group (Vertical)

View Source Code

Disable Button

View Source Code

Cards

Default Cards and with Background & color

Header
Default card title

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

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

View Source Code

Simple and Bordered Cards

Simple card title
Card subtitle

Some quick example text to build on the card title.

Card link Another link
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.

View Source Code

Cards with icons

The title

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

Got it!

The title

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

Got it!

The title

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

Got it!
View Source Code

Cards with Image overlay, Image cap & List group

Card image
Card title

This is a wider card with supporting text below as a natural lead-in content.

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 image cap
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Dapibus ac facilisis in
View Source Code

Cards with Icon + Footer, Navs & Carousel

Card image cap

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi consectetur minima ipsam, temporibus doloremque ea nobis natus?

Go somewhere
Card image cap
Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt ut adipisicing elit, sed do eiusmod tempor incididunt ut sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam. This is a wider card with supporting text below as a natural lead-in to additional content.
This is a wider card with supporting text below as a natural lead-in to additional content. Sed do eiusmod tempor incididunt ut sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam. This is a wider card with supporting text below as a natural lead-in to additional content.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quia voluptates architecto libero nulla culpa consectetur cupiditate rerum, tenetur numquam maiores repellendus eius mollitia a porro veritatis, qui autem dolore?

Go somewhere
View Source Code

Testimonial cards

Card image cap

Zinna Helen


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

Card image cap

Glenda H. Stjohn

@glenda

This is a wider card with supporting text below as a natural lead-in to additional.


Post

768

Friends

1280

Follow

392
Card image cap

founder & ceo

Sara A. Moran

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

Follow
View Source Code

Carousel

Basic Carousel

View Source Code

Testimonial Carousel

View Source Code

Forms

View Source Code
Looks good!
Please provide a valid info.
View Source Code
$
.00
View Source Code

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
View Source Code

List group

Basic list groups

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
View Source Code

With contextual classes

View Source Code

Custom content

View Source Code

Modals

Basic modal

Vertically centered

View Source Code

Modal with card

View Source Code

Large modal

Small modal

View Source Code

Top modal

Bottom modal

Right modal

Left modal

View Source Code

Navs

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

Navbar

View Source Code View Source Code View Source Code

Pagination

Basic pagination

Borderless pagination

View Source Code

Circle pagination

Circle borderless pagination

View Source Code

Large pagination

Small pagination

View Source Code

Popover

View Source Code

Tooltip

View Source Code

Progress

Basic bars

View Source Code

Multiple bars

View Source Code

Stripes

View Source Code

Animated stripes

View Source Code

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
View Source Code

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 is meant to be treated as an addition to the document.

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

View Source Code

Colors & abbreviation

This is a primary text. Like it or love it?

This is a secondary text. Like it or love it?

This is a success text. Like it or love it?

This is a danger text. Like it or love it?

This is a warning text. Like it or love it?

This is a info text. Like it or love it?

This is a light text. Like it or love it?

This is a dark text. Like it or love it?

This is a muted text. Like it or love it?

This is a text with default color and attr.

View Source Code

Background

This is a primary background. Like it or love it?

This is a secondary background. Like it or love it?

This is a success background. Like it or love it?

This is a danger background. Like it or love it?

This is a warning background. Like it or love it?

This is a info background. Like it or love it?

This is a light background. Like it or love it?

This is a dark background. Like it or love it?

This is a muted background. Like it or love it?

View Source Code

List

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
View Source Code

Blockquote

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

Someone famous in Source Title
View Source Code

Tables

Type Heading Heading 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
Light Column content Column content Column content
Dark Column content Column content Column content
View Source Code
Type Column heading Column heading
Primary Column content Column content
Column content Column content Column content
Secondary Column content Column content
Column content Column content Column content
Success Column content Column content
Column content Column content Column content
Danger Column content Column content
Column content Column content Column content
Warning Column content Column content
Column content Column content Column content
Info Column content Column content
View Source Code