UI elements

  • You are here:
  • UI elements

Regular tabs

Raw denim you probably haven't heard of them jean shorts Austin.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

Tabs on the Bottom

Raw denim you probably haven't heard of them jean shorts Austin.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.

With gradient

Raw denim you probably haven't heard of them jean shorts Austin.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

Tabs on the left

Raw denim you probably haven't heard of them jean shorts Austin, accusamus mcsweeney's marfa nulla single-origin coffee, ethical wes anderson tofu before they sold out

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid,lomo retro fanny pack lo-fi farm-to-table readymade.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.

Buttons with notification

Tabs on the right

Raw denim you probably haven't heard of them jean shorts Austin, accusamus mcsweeney's marfa nulla single-origin coffee, ethical wes anderson tofu before they sold out

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid,lomo retro fanny pack lo-fi farm-to-table readymade.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.

Accordion

Collapsible Group Item #1
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.
Collapsible Group Item #2
Curabitur pulvinar magna a risus pulvinar mollis. Duis a est odio. Vivamus dui dui, consectetur vitae cursus dignissim, facilisis nec nulla. Sed laoreet fermentum sem, ut aliquam dui imperdiet nec. Suspendisse vitae erat enim. Morbi congue aliquam lectus, at commodo purus dapibus nec. Nullam sodales fermentum aliquet. Nunc quis ligula enim. Maecenas metus risus, egestas ut commodo eget, bibendum nec nisi
Collapsible Group Item #3
Donec libero nisi, volutpat eu egestas vel, molestie vitae ante. Nam tortor risus, tincidunt et accumsan ac, vehicula eget metus. Aenean nec nibh ac nibh dignissim feugiat ac eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis auctor neque, vel varius nulla faucibus nec. Sed quam elit, mattis blandit suscipit at, lacinia sed urna. Suspendisse facilisis turpis vitae nisl rutrum at commodo ante euismod.

Toggle

Collapsible Group Item #1
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.
Collapsible Group Item #2
Curabitur pulvinar magna a risus pulvinar mollis. Duis a est odio. Vivamus dui dui, consectetur vitae cursus dignissim, facilisis nec nulla. Sed laoreet fermentum sem, ut aliquam dui imperdiet nec. Suspendisse vitae erat enim. Morbi congue aliquam lectus, at commodo purus dapibus nec. Nullam sodales fermentum aliquet. Nunc quis ligula enim. Maecenas metus risus, egestas ut commodo eget, bibendum nec nisi.
Collapsible Group Item #3
Donec libero nisi, volutpat eu egestas vel, molestie vitae ante. Nam tortor risus, tincidunt et accumsan ac, vehicula eget metus. Aenean nec nibh ac nibh dignissim feugiat ac eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis auctor neque, vel varius nulla faucibus nec. Sed quam elit, mattis blandit suscipit at, lacinia sed urna. Suspendisse facilisis turpis vitae nisl rutrum at commodo ante euismod.

With pattern and open 3 section

Collapsible Group Item #1
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.
Collapsible Group Item #2
Curabitur pulvinar magna a risus pulvinar mollis. Duis a est odio. Vivamus dui dui, consectetur vitae cursus dignissim, facilisis nec nulla. Sed laoreet fermentum sem, ut aliquam dui imperdiet nec. Suspendisse vitae erat enim. Morbi congue aliquam lectus, at commodo purus dapibus nec. Nullam sodales fermentum aliquet. Nunc quis ligula enim. Maecenas metus risus, egestas ut commodo eget, bibendum nec nisi.
Collapsible Group Item #3
Donec libero nisi, volutpat eu egestas vel, molestie vitae ante. Nam tortor risus, tincidunt et accumsan ac, vehicula eget metus. Aenean nec nibh ac nibh dignissim feugiat ac eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis auctor neque, vel varius nulla faucibus nec. Sed quam elit, mattis blandit suscipit at, lacinia sed urna. Suspendisse facilisis turpis vitae nisl rutrum at commodo ante euismod.

Sliders

88 77 55 33 40 45 70

Ajax loaders and tabs in box

Progress bars

.progress
.progress .progress-mini
.progress .progress-striped
.progress .progress-striped
.progress .progress-info
.progress .progress-success
.progress .progress-danger
.progress .progress-warning

Tooltips and popovers

QTip tooltip plugin

Top tooltip Right tooltip Bottom tooltip Left tooltip

Boostrap tooltip

Top tooltip Right tooltip Bottom tooltip Left tooltip

Popovers click for action

Top popover Left popover Right popover Bottom popover

Dialogs

Show dialog Show Modal dialog Launch Boostrap Modal

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.

Pines Notify

Regular notice Sticky notice Regular info Sticky info Regular Success Sticky Success Regular Error Sticky Error

Images style

  1. <img src="..." class="img-rounded">
  2. <img src="..." class="img-circle">
  3. <img src="..." class="img-polaroid">

Hero unit

Hello, world!

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

Learn more

Basic pills

Stacked pills

Just Well

Look, I'm in a well!

Large Well

Look, I'm in a large well!

Small Well

Look, I'm in a small well!

Pagination

Pager

Pager with aligned links