Bootstrap

To create a basic progress bar −

☛ Add a <div> with a class of .progress.

☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

The Contextual classes allow you to change the background color of your table rows or individual cells.

Class Description

.active Applies the hover color to a particular row or cell

.success Indicates a successful or positive action

.warning Indicates a warning that might need attention

.danger Indicates a dangerous or potentially negative action

For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.

it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Follow the steps below −

☛ Change the <a> tag that has a class of .thumbnail to a <div>.

☛ Inside of that <div>, you can add anything you need. As this is a <div>, we can use the default span-based naming convention for sizing.

☛ If you want to group multiple images, place them in an unordered list, and each list item will be floated to the left.

Modal Plugin is a child window that is layered over its parent window

The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it's pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hits a certain mark, the <div> will be locked in place and will stop scrolling with the rest of the page.

These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content. The goal of the media object is to make the code for developing these blocks of information drastically shorter.

The goal of media objects (light markup, easy extendability) is achieved by applying classes to some of the simple markup.

To create a pills navigation menu −

Start with a basic unordered list with the base class of .nav.

Add class .nav-pills.

Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more spacing, for example. The .col-xs = * classes don't support offsets, but they are easily replicated by using an empty cell.

This code will generate a link with an inline badge that provides important notifications to the user, such as number received or unread messages or number of friend requests. Badges are most commonly used in message applications and social networking sites.

To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.

.btn-group-lg, .btn-group-sm, .btn-group-xs classes can be applied to button group instead of resizing each button.

You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.

The steps for creating basic or vertical forms are

☛ Add a role form to the parent <form> element

☛ Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed

☛ Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements

For more specialized layouts offsets are a useful feature. For more spacing they can be used by pushing column over.

For example, .col-xs=* classes do not support offset but they are easily replicated using an empty cell

The transition plugin provides simple transition effects such as Sliding or fading in modals.

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.

you can use following tags

<code></code>