Coding All-in-One For Dummies
Book image
Explore Book Buy On Amazon
In addition to pure layouts, Bootstrap can also create web page components found on almost every website. The idea here is the same as when working with layouts — instead of re-creating the wheel every time by designing your own button or toolbar, it would be better to use prebuilt code, which has already been tested across multiple browsers and devices.

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.
Bootstrap Code for Creating Buttons
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
To create a button, write the following HTML:
  1. Begin with the button HTML element.
  2. In the opening <button> tag include type="button".
  3. Include the class attribute with the btn class attribute value, and add additional class prefixes based on the effect you want.
  4. To add additional styles, continue adding the class prefix name into the HTML class attribute.
The following code combines both button type and button size:

bootstrap buttons
 Bootstrap button types and sizes.

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.
Bootstrap Code for Creating Navigation Toolbars
Attribute Class Prefix Description
Toolbar type nav-tabs

nav-pills

 Tabbed navigation toolbar

Pill, or solid button navigation toolbar
Toolbar button type dropdown

caret dropdown-menu

 Button or tab as drop-down menu

Down-arrow drop-down menu icon

Drop-down menu items
To create a pill or solid button navigation toolbar, write the following HTML:
  1. Begin an unordered list using the ul element.
  2. In the opening
      tag, include class="nav nav-pills".
    • 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.

The following code creates a toolbar using Bootstrap:

bootstrap toolbar
 Bootstrap toolbar with drop-down menus.

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.

Bootstrap button with icons
 Bootstrap buttons with icons.

Check here for the names of all the Bootstrap glyphs.

About This Article

This article is from the book:

About the book author:

Nikhil Abraham is the CFO of Udacity, an education company that teaches technology skills that help launch or advance a career. Prior to joining Udacity, Nik worked at Codecademy where he taught beginning coders across a variety of professions. He is also author of Coding For Dummies and Getting a Coding Job For Dummies.

This article can be found in the category: