How to Code Basic Web Page Elements with Bootstrap

By Nikhil Abraham

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:

<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>

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 <ul> tag, include class="nav nav-pills".
  3. Create buttons using the <li> tag. Include class="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.
  4. 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.

The following code creates a toolbar using Bootstrap:

<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>

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 <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>

Bootstrap button with icons
Bootstrap buttons with icons.

Check here for the names of all the Bootstrap glyphs.