1. Home
  2. UI Elements
  3. General Elements

UI Elements > General Elements

  • My Income $47,171
  • Site Traffic  45%
  • Site Orders  2447
Warning Your monthly traffic is reaching limit.
Success The page has been added.
Info! You have 198 unread messages.
Error! The daily cronjob has failed.

Standard Progress Bars

All progress bars contain a base class of .progress . Control the size of the progress bar with .progress-xs , .progress-sm , .progress-lg or leave as is for the default size.

Transitional Progress Bars

JS required This nifty animated progress bars run on CSS combined with javascript

You will simply need to add in the value data-transitiongoal="25" after the .progress-bar class

For right alignment add class .progress .right

The default is left aligned.

Transitional Progress Bars continued...

Add an overlapping div to progress-bar with the base css of .progress .vertical

Add an overlapping div to progress-bar with the base css of .progress .vertical .bottom

Add an overlapping div to progress-bar with the base css of .progress .vertical .wide-bar

Add an overlapping div to progress-bar with the base css of .bottom .wide-bar

Default Progress Bars

Micro progress bar .progress-micro with .progress-bar-primary

Extra small progress bar .progress-xs with .bg-color-blue

Small progress bar .progress-sm with .bg-color-greenLight

Default progress bar with .bg-color-redLight

Large progress bars .progress-lg with .bg-color-blueLight

Stripped Progress Bars

Sriped Progress bars made with CSS3 gradients, by adding the .progress-striped class to the base class

Info! Please be aware that this will not work in archaic browsers such as IE9 80% Complete

Activate and animate a progress bar by adding the class .progress-striped .active

Dark progress bar with class .bg-color-darken

Stacking Progress Bars

Stack one progressbar on top of another by including all in one div.progress 35,20,10,35

Customized Tabs

Default Tabs with border

Tabs inside .jarviswidget .well (Bordered Tabs)

I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.

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.

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.

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.

Tabs left

Dear Math, please grow up and solve your own problems, I'm tired of solving them for you.

They say that love is more important than money, but have you ever tried to pay your bills with a hug?

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.

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.

The broccoli says 'I look like a small tree', the mushroom says 'I look like an umbrella', the walnut says 'I look like a brain', and the banana says 'Can we please change the subject?'

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.

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.

Three monkeys escaped from the zoo, one was caught watching TV, the other playing hockey, and the third one was caught reading this quote!

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.

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.

My Data

Tabs inside well and pulled right .tabs-pull-right (Bordered Tabs)

My therapist told me the way to achieve true inner peace is to finish what I start. So far I’ve finished two bags of M&Ms and a chocolate cake. I feel better already.

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.

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.

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.

Tabs right

TEAM WORK: Having somebody else you can blame it on.
HARDWARE: The part of a computer you can kick when there are software problems.
IMPATIENT: Somebody who is waiting in a hurry.

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. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

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. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Header Tabs Right

When I stare at the sky, I see you. When I stare out into the ocean, I see you. When I'm looking at the moon, I see you. Geez! Would you move aside, you're constantly getting in my way!

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.

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.

I love everyone! I love to be around some people, I love to stay away from others, and some I'd just love to punch right in the face!

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.

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.

Accordions

Accordions

Collapsible Group Item #1

Column name Column name Column name Column name
Row 1 Row 2 Row 3 Row 4
Row 1 Row 2 Row 3 Row 4
Row 1 Row 2 Row 3 Row 4

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.

Inside a widget

Collapsible Group Item #1

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.

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.

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.

Default Nav Bars

Brand
Brand


Labels and Badges

Did you know you can add more than just the basic colors to customize your badge? Learn more about color options modifiers on the Typography page!

Add any of the below mentioned modifier classes to change the appearance of a label.

Classes Labels
.label-default Default
.label-primary Primary
.label-success Success
.label-info Info
.label-warning Warning
.label-danger Danger

Add any of the below mentioned modifier classes to change the appearance of a badge.

Classes Badges
No modifiers 42
.bg-color-darken 1
.bg-color-greenLight 22
.bg-color-blueLight 30
.bg-color-orange 412
.bg-color-red 999

Block Messages

×

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

Success!

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

Info!

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

Error!

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.


Action Button

Carousel Slide / Fade

Carousel .slide

Default sliding carousel with base class of .carousel .slide

Carousel .fade

To make the carasoul fade, you can use the class .carousel .fade

Alerts and Notifications

Bootstrap Modal

Static Example

A rendered modal with header, body, and set of actions in the footer.

Modal title

One fine body…

Live Demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Options

Name type default description
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.
remote path false

If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below: 

				<a data-toggle="modal" href="remote.html" data-target="#modal">
				Click me</a>

Smart Notifications with sound

Big box (Static Example)

Clutter free dynamic alert box, easy to configure and setup!

Sound Enabled

demo
Live Demo

INFO! Messages are tabbale and does not overpopulate the user screen. Sounds can also be disabled if not needed

Small box alert

Easily customize the alerts to any colors of your choice, and add any icons from the theme library with animation!

Extra Small Box

Go even tinier with smaller attention messages!

Smart Alert with sound

With Callback and Buttons (Dynamic Example)
With Input and Select
Log me in example

Tooltips and Popovers

Tooltips

Tip your users with a small tooltip. Nifty helpful information can be disaplayed using this very simple and yet effictive component. Display pure HTML Content, Images and Icons


Popovers

Popovers are a cool way to express compressed information to the user, neatly and quickly. You can generate all kinds of content within the popover component. Including Forms, Tabs, Images and even Google map!


Containers, Media and Pagination

Jumbotron Gets your user attention!

Hello, world!

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

Learn more

Wells Notice the well sizes

Large well
.well .well-lg
Default well
.well
Small well with light background
.well .well-sm .well-light
Well with background
.bg-color-darken
Well with background
.bg-color-teal
Well with background
.bg-color-pinkDark

Learn more about other colors that you can use for .well by going to typography page

Media

  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pagination two different styles