Navbar

Buttons

Normal Button

Default Primary Success Info Warning Danger Link

Button with icon

Default Primary Success

Info Warning Danger

Inverted Button

Default Primary Success Info Warning Danger

Inverted Button Bold

Default Primary Success Info Warning Danger

White Inverted Button (Default Bold)

Disabled Button

Default Primary Success Info Warning Danger Link

Circular Button

Button Group

Large Button

Large button Default button Small button Mini button

Block level button

Left Middle Right
1 2 3 4
5 6 7
8
Dropdown
Button Button Button Button

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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 snippet of text is rendered as bold text.

The following snippet of text 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.

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.

Someone famous in Source Title

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

Someone famous in Source Title

Tables

# 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

Forms

Legend
A longer block of help text that breaks onto a new line and may extend beyond one line.

$

Navs

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.

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.


  • Home

Pagination

Pager

Indicators

Alerts

Happy

Here is the great bootstrap color theme created base on semantic UI, hope you guys like it, it is designed by cbl-web.

Warning!

Best check yo self, you're not looking too good. Nulla vitae, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Happy

Here is the great bootstrap color theme created base on semantic UI, hope you guys like it, it developed by cbl-web.

Warning!

Best check yo self, you're not looking too good. Nulla vitae, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Labels

Default Primary Success Warning Danger Info

Badges

Progress bars

Basic

Contextual alternatives

Striped

Animated

Stacked

Containers

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

List groups

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

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panels

Basic panel
Panel heading
Panel content
Panel content
Panel footer

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!

collapse

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

Dialogs

Modals

Modal title

One fine body…

Popovers

Tooltips

Semantic UI Elements

Reveal

Move left

Move right

Move up

Move down

Rotate left

Rotate right, Circular

Fade

Dim (blur)

Add Friend

Label (Extended from bootstrap's label)

Label a user

Stevie Jenny Developer Veronika Co-worker elliot

Label as a tag

jQuery Bootstrap Sematic UI PHP MySQL angularJS

Label as a ribbon

Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo. Excellent Donec vel libero nec risus gravida luctus non eu nunc. Mauris ut urna lacus. Sed consequat, sem vel fringilla rutrum, lacus neque luctus urna, id lobortis erat orci ac nisl. GreatQuisque lectus tellus, tincidunt a turpis et, placerat feugiat orci. Nam posuere egestas lacus nec sagittis. Fusce sed blandit elit, non consequat neque. ExcellentAliquam erat volutpat. Aliquam ac quam consectetur, vulputate eros nec, egestas erat. Cras scelerisque nunc mollis mattis sodales.

Ribbon label can add on cards

Great
Excellent

Label attached

Excellent Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo.

Great Excellent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo.

Cards

Card

Elliot Fu
Joined at 2013
Elliot is a great game player.
22 Friends
14h
Steve
17 likes 3 comments
Elliot Fu
Famous Singer
How do you think about the performance of Elliot on today's show?
Great Good Bad

Card Link

Matt Giampietro
Cofounder
Matthew is an interior designer living in New York.
Joined at 2013 75 Friends
Molly
Coworker
Molly is a personal assistant living in Paris.
Joined at 2011 35 Friends
Elyse
Coworker
Elyse is a copywriter working in New York.
Joined at 2014 151 Friends

Card Reveal (Rotate)

Team Fu & Hess
Formed at 2014
2 Members

Card Dim

Add Friend
Elliot
Joined at 2014
2 Friends

Card Dim (white)

Add Friend
Elliot
Joined at 2014
2 Friends

Checkbox / Radio / Switch

Radio

Checkbox

Switch

Radio Group

Checkbox Group

Divider

Divider can act as a heading
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.
And

Divider can divide group button

Great General Bad
Allow Disable

Sign up Form

Sign Up with Twitter
Or

Sign Up

Divider

Body Sidebar

Body Left Sidebar Body Right Sidebar

Inner Sidebar

Semantic UI Bootstrap
Semantic UI Bootstrap