Set of standard components from popular library.

Icons

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

See the Pen Bootstrap Components: Icons Examples by qetr1ck-op (@qetr1ck-op) on CodePen.

Dropdowns

Wrap the dropdown’s trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu’s HTML:

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu.

Call the dropdowns via JavaScript: $('.dropdown-toggle').dropdown() or use data-toggle="dropdown".

Full list Dropdown methods

See the Pen yoehq by qetr1ck-op (@qetr1ck-op) on CodePen.

Buttons group

Group a series of buttons together on a single line with the button group. Control via JavaScript: $('.btn').button()

Full list methods

See the Pen Bootstrap Components: Buttons Group by qetr1ck-op (@qetr1ck-op) on CodePen.

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

See the Pen Bootstrap: Components - Input groups by qetr1ck-op (@qetr1ck-op) on CodePen.

Navs

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Navs via JavaScript: $('#myTab a').tab()

Full list methods

See the Pen Bootstrap: Copmonents - Navs by qetr1ck-op (@qetr1ck-op) on CodePen.

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

See the Pen Bootstrap: Components - Pagination by qetr1ck-op (@qetr1ck-op) on CodePen.

Labels and Badges

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

See the Pen Bootstrap: Components - Labels and Badges by qetr1ck-op (@qetr1ck-op) on CodePen.

Thumbnails

With a bit of extra markup, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

See the Pen Bootstrap: Components - Thumbnail by qetr1ck-op (@qetr1ck-op) on CodePen.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Full list methods

See the Pen Bootstrap: Components - Alerts by qetr1ck-op (@qetr1ck-op) on CodePen.

Progress Bars

Provide up-to-date feedback on the progress of a work-flow or action with simple yet flexible progress bars.

See the Pen Bootstrap: Components - Progress Bar by qetr1ck-op (@qetr1ck-op) on CodePen.