Buttons

Default buttons

Default Rounded buttons

Default Rounded buttons

Default Rounded buttons

Default Rounded buttons

Buttons with outline

Buttons with outline

Buttons with outline

Buttons with outline

Buttons sizes





Disabled button

The 'a' Element

Checkbox buttons

Radio buttons

Brand color

Theme colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Gradient of grey

.swatch-100
.swatch-200
.swatch-300
.swatch-400
.swatch-500
.swatch-600
.swatch-700
.swatch-800
.swatch-900

Links

Default Link

Exemple link

Link inside an alert

Grid

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-7
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12

Fonts

h1

h2

h3

h4

h5
h6

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading

Display 1

Display 2

Display 3

Display 4


This is the article lead — it stands out at the start of the article.

This is normal text at the normal size etc...

Sample marked text.


The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.

Forms

Default form group

Inline form

Aligned form

Fruit

Form with help text

Your account ID is located at the top of your invoice.

Checkbox and radio

@
@example.com
https://example.com/users/
$
.00
With textarea
Action Another action Something else here Separated link
Action Another action Something else here Separated link
Upload
Upload

Dropdown

Default dropdown

Action Another action Something else here
Separated link

Dropdown with menu

Company Information
Our Story Our Team
Contact Us
Call Center Store Locations

Dropdown with divider

Our Story Our Team
Contact Us
Dropdown link Dropdown link

btn toolbar

Navs

Default nav

Horizontal menu

Nav with tabs

Nav with pills

Horizontal nav with pills

Its Home
It's Profile
It's Messages
It's Settings

Nav with tabs and dropdown

Welcome home! Click on the tabs to see the content change.

A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons, religious reasons, safety, or as a fashion accessory.

Accordion

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.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Navbar

Tables

Default table

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table inverse

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table striped

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with border

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with hover

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with Head with default color

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with inverse Head color

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Pagination

Jumbotron

Container size jumboton

Think BIG with a Bootstrap Jumbotron!

Container fluid size jumbotron

Think BIG with a Bootstrap Jumbotron!

BreadCrumbs

Cards

Boot Polish

Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes or boots to extend the footwear's life, and restore, maintain and improve their appearance.

More

Sun Gone

Here are the top resources for all things related to the Sun.

Sun Gone Still Gone

Sun Gone

Sun disappears!
Photo of sunset

The sun disappeared behind the horizon today. Experts claim it could be gone for good!

Full Report
Sponsored Content

Ugg Boots

Best ugg boots on the planet. Free shipping, 24/7 customer service.

By boots.com
Sun Gone

The top resources for all things related to the Sun.

Sun Gone Still Gone
Sun Up

Looks like the Sun has returned. Here's why.

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

Tooltip

Inline tooltip

Check out my Grid tutorial, as you never know when you might need it!

All position tooltip

Popovers

All popover position

Badges

Badge heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Button with inline badge

Default badges

Primary Secondary Success Danger Warning Info Light Dark

Badges pill

Primary Secondary Success Danger Warning Info Light Dark

Badges with link

Primary Secondary Success Danger Warning Info Light Dark

Modals

Alerts

Default alert

Dismissible alert

Dismissible alert with fade

Progress bars

Default Progress bar






Striped Progress bar







Animated Progress bar

List group

Default list group

  • These Boots Are Made For Walking
  • Eleanor, Put Your Boots On
  • Puss 'n' Boots
  • Die With Your Boots On
  • Fairies Wear Boots

List group with pills

  • These Boots Are Made For Walking 15
  • Eleanor, Put Your Boots On 38
  • Puss 'n' Boots 76
  • Die With Your Boots On 112
  • Fairies Wear Boots 181
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Link List group

These Boots Are Made For Walking Eleanor, Put Your Boots On Puss 'n' Boots Die With Your Boots On Fairies Wear Boots

Button List group

List group with colors

These Boots Are Made For Walking Eleanor, Put Your Boots On Puss 'n' Boots Die With Your Boots On Fairies Wear Boots Head Over Boots Boot Scootin' Boogie

media

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


...
Bottom-aligned media

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Image thumbnails

Sample image Sample image Sample image Sample image

Figures

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

Loadings

Tooltips

Carousel

Close

Code

Default code

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

Code with pre tag

        
          <p>Sample text here...</p>
          <p>And another line of sample text here...</p>

Var tag

y = m x + b

Kbd tag

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

Samp tag

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