The following examples show how to quickly create common web components.
Designing buttons
Buttons are a basic element on many web pages, but usually can be difficult to set up and style. As shown here, buttons can have various types and sizes.Attribute | Class Prefix | Description |
Button type | btn-defaultbtn-primarybtn-successbtn-danger |
Standard button type with hover effect Blue button with hover effect Green button with hover effect Red button with hover effect |
Button size | btn-lgbtn-defaultbtn-sm |
Large button size Default button size Small button size |
- Begin with the
button
HTML element. - In the opening <
button>
tag includetype="button"
. - Include the class attribute with the
btn
class attribute value, and add additional class prefixes based on the effect you want. - To add additional styles, continue adding the
class
prefix name into the HTMLclass
attribute.
Check out additional button type, button size, and other button options.
Navigating with toolbars
web pages with multiple pages or views usually have one or more toolbars to help users with navigation. Here are some toolbar options.Attribute | Class Prefix | Description |
Toolbar type | nav-tabs
|
Tabbed navigation toolbar Pill, or solid button navigation toolbar |
Toolbar button type | dropdown
|
Button or tab as drop-down menu Down-arrow drop-down menu icon Drop-down menu items |
- Begin an unordered list using the
ul
element. - In the opening
- Create buttons using the
- tag. Include
class="active"
in one opening - tag to designate which tab on the main toolbar should appear as visually highlighted when the mouse hovers over the button.
- To create a drop-down menu, nest an unordered list. See the code next to “More” with class prefixes
"dropdown"
,"caret"
, and"dropdown-menu"
.You can link to other web pages in your drop-down menu by using the
tag, include
class="nav nav-pills"
. - Create buttons using the
The dropdown-toggle
class and the data-toggle="dropdown"
attribute and value work together to add drop-down menus to elements such as links. Check out additional toolbar options.
Adding icons
Icons are frequently used with buttons to help convey some type of action. For example, your email program likely uses a button with a trash can icon to delete emails. Icons quickly communicate a suggested action to users without much explanation.These icons are called glyphs, and Glyph Icons provides the glyphs used in Bootstrap.
Bootstrap supports more than 200 glyphs, which you can add to buttons or toolbars using the tag. The following example code creates three buttons with a star, paperclip, and trash can glyph.
Check here for the names of all the Bootstrap glyphs.