Brand color
Theme colors
Gradient of grey
Links
Default Link
Exemple linkLink inside an alert
Grid
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.
Buttons
Default buttons
Buttons with outline
Buttons sizes
Checkbox buttons
Radio buttons
Forms
Default form group
Inline form
Aligned form
Form with help text
Checkbox and radio
Dropdown
Default dropdown
Dropdown with menu
Dropdown with divider
Navs
Default nav
Horizontal menu
Nav with tabs
Nav with pills
Horizontal nav with pills
Nav with tabs and dropdown
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!
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.
MoreSun Gone
Sun disappears!
The sun disappeared behind the horizon today. Experts claim it could be gone for good!
Full ReportUgg Boots
Best ugg boots on the planet. Free shipping, 24/7 customer service.
Looks like the Sun has returned. Here's why.
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 DarkBadges pill
Primary Secondary Success Danger Warning Info Light DarkModals
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
Link List group
Button List group
Image thumbnails
Figures
Breadcrumbs
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 + bKbd 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.Alerts
Well done!
You successfully read this important alert message. It contains a link and heading.Cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Integer posuere erat a ante.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereLorem 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.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereJumbotron
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.
Lists
- Cras justo odio
- Dapibus ac facilisis in
- Porta ac consectetur ac
- Cras justo odio 14
- Vestibulum at eros
- Dapibus ac facilisis in
Tables
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Contextual | Row | @hackerthemes |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Contextual Row | @hackerthemes | |
Typography
Display 1
Display 2
Display 3
Display 4
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Lead Text - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, cumque delectus deleniti dolor esse ex fugiat, id in ipsum modi molestiae mollitia, nulla numquam provident quasi soluta sunt tempora vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aspernatur consequuntur cumque dolor ducimus earum eos, expedita, fuga harum incidunt maxime modi mollitia numquam praesentium sapiente suscipit temporibus ut vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet nam nostrum pariatur praesentium tempore. Ad architecto at aut dicta enim, eveniet expedita libero magnam minus, nihil, non sequi sunt voluptates!
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.
Buttons
Navbars
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading with muted text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Tables
| 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 |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
Forms
Navs
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Pills
Indicators
Alerts
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Badges
Progress
Basic
Contextual alternatives
Multiple bars
Striped
Animated
Containers
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.
List groups
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
List group item heading
3 days agoDonec 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 agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Cards
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.
Light 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.
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.
Light 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.
Card header
Special title treatment
Support card subtitle
%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
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 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