General Elements

Common Bootstrap UI Features & Elements ...
Warning Better check yourself, you're not looking too good.
Success You successfully read this important alert message.
Error! Change a few things up and try submitting again.
Info! This alert needs your attention, but it's not super important.

Progress Bars

HTML / HTML5 60%
ASP.Net 40%
Java 20%
JavaScript / jQuery 60%
CSS / CSS3 80%
To define size of progress bar you should use .progress-xs & .progress-sm and to define title of progress bar .progress-type and percent of progress .progress-completed

Basic

Stacked

Carousel Slide Show

Default sliding carousel with base class of .carousel .slide


Note:
Transition animations not supported in Internet Explorer 8 & 9

Success!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Info!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Warning!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Error!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Available labels & badges

Add any of the below mentioned modifier classes to change the appearance of a label & badges.
Labels Class
Default label label-default
Success label label-success
Warning label label-warning;
Danger label label-danger
Info label label-info
Example Class
1 badge badge-default
2 badge badge-success
4 badge badge-warning
6 badge badge-danger
8 badge badge-info

Bootstrap Modals

Static Example

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.


Dynamically Modals (Bootbox.js & ngBootbox)

To learn more about ngBootbox action refer to generalelementsCtrl.js

Tooltips and Popovers

Four options are available: top, right, bottom, and left aligned.

Popover on left Popover on top Popover on bottom Popover on right

Four options are available: top, right, bottom, and left aligned.

Bootstarp Wells

Large well
.well .well-lg
Default well
.well
Small well .well .well-sm

Pagination

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Media

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

    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.

    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.

    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.