How to Code Basic Web Page Elements with Bootstrap

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

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

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.