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
buttonHTML element. - In the opening <
button>tag includetype="button". - Include the class attribute with the
btnclass attribute value, and add additional class prefixes based on the effect you want. - To add additional styles, continue adding the
classprefix name into the HTMLclassattribute.
<p>
<button type="button" class="btn btn-primary btn-lg">Large primary button
</button>
<button type="button" class="btn btn-default btn-lg">Large default button
</button>
</p>
<p>
<button type="button" class="btn btn-success">Default Success button</button>
<button type="button" class="btn btn-default">Default default button</button>
</p>
<p>
<button type="button" class="btn btn-danger btn-sm">Small danger button
</button>
<button type="button" class="btn btn-default btn-sm">Small default button
</button>
</p>
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
ulelement. - In the opening
<ul>tag, includeclass="nav nav-pills". - Create buttons using the
<li>tag. Includeclass="active"in one opening<li>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
<a>tag.
<ul class="nav nav-pills">
<li class="active"><a href="timeline.html">Timeline</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="friends.html">Friends</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="places.html">Places</a></li>
<li><a href="sports.html">Sports</a></li>
<li><a href="music.html">Music</a></li>
</ul>
</li>
</ul>
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 <span> tag. The following example code creates three buttons with a star, paperclip, and trash can glyph.
<button type="button" class="btn btn-default">Star
<span class="glyphicon glyphicon-star"></star>
</button>
<button type="button" class="btn btn-default">Attach
<span class="glyphicon glyphicon-paperclip"></star>
</button>
<button type="button" class="btn btn-default">Trash
<span class="glyphicon glyphicon-trash"></star>
</button>
Check here for the names of all the Bootstrap glyphs.