Brand color
+ +Theme colors
+Gradient of grey
+Links
+ +Default Link
+ Exemple link +Link 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.
+ More +Sun Gone
+Here are the top resources for all things related to the Sun.
+ Sun Gone + Still Gone +Sun Gone
+Sun disappears!
+The sun disappeared behind the horizon today. Experts claim it + could be gone for good!
+ Full Report +Ugg 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 + Dark +Badges pill
+ 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 + +
Link List group
+ +Button List group
+List group with colors
+ +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 + + 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. +Alerts
+ + +Well done!
+ You successfully read this important alert message. + It contains a link and heading. +Buttons
+ +Dropdowns
+Grouping them
+Checkboxes and Radios
+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 somewhere +++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.
+ +
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 somewhere +Carousel
+ +Forms
+ +Start with a small group form
+ +Or with an inline form
+ +Even more form controls
+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 +
++ Lists +
+ +-
+
- Cras justo odio +
- Dapibus ac facilisis in +
- Porta ac consectetur ac +
- + Cras justo odio + 14 + +
- Vestibulum at eros +
- Dapibus ac facilisis in +
Progress
+ +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.
++ Learn more +
+List groups
+-
+
- + Cras justo odio + 14 + +
- + Dapibus ac facilisis in + 2 + +
- + Morbi leo risus + 1 + +
List group item heading
+ 3 days ago +Donec 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 ago +Donec 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
+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 +