Bootstrap UI Documentation

Matt Minnick

November 14, 2014

Abstract

Bootstrap is a set of CSS styles that allows for the rapid creation of webpages with a clean, unifed user interface (UI). Bootstrap is combined withjQuery, a set of scripts designed to make certain UI elements more dynamic,in order to provide items like navigation bars, drop-down menus, collapsiblecontent wells, and more.

Our project uses Bootstrap for most of the main UI elements. The mainelements from Bootstrap that we use most frequently are alerts, buttons,glyphicons, the Jumbotron, navigation bars, and content wells. jQuery func-tions mostly through the navigation bar and drop-down menus, and is inte-grated into Bootstrap so learning jQuery is not required (though includingthe jQuery script is).

Through this, we are able to apply a unified and professional styling toour website. This styling does not interfere with the website’s functionalityand allows us to rapidly modify pages with new pieces of Bootstrap-basedcontent.

1

How to Use

Installing

To install Bootstrap, two files need to be included in the head tag of a website.One file is optional, and contains different themeing for Bootstrap’s features.These files can be downloaded from our demo page. jQuery is required fordrop-down menus to function correctly.

Where we Include

Since our webpages use a standardized header/footer included with PHP,Bootstrap and jQuery are included in our ’header.html’ file. The demonstra-tion pages use versions of Bootstrap and jQuery that have been ’minified’with extraneous information removed, and hosted on MaxCDN for speed.

Our actual website uses ’development versions’ of these files. While thismay imply that they are significantly different, all this means is that the filesare easily readable and are editable by people, as opposed to being minified.This allows us to change styling rules easily to change the look of the wholewebsite.

Components we Use

Alert Boxes

Visual DemonstrationAlert boxes may be inserted by using the following code in a web page:

<div class="alert [style]" role="alert">

Alert Content

</div>

[style] is a specific style ’tag’. Each tag has a different styling associatedwith it, as seen in the visual demo page. alert-success creates a greenalert box, which is intended to indicate success. alert-info creates a bluealert box, which is intended for informational alerts. alert-warning createsa yellow alert box, which is intended for warnings or non-critical errors.alert-error creates a red box, which is intended for critical errors.

2

Button Types & Styles

Visual DemonstrationButtons may be inserted using the following code in a web page:

<button type="button" class="btn [size] [style]">Button Content</button>

[size] is a specific tag which specifies the size of the button, as seen in thedemo. There are four sizes of buttons, but only three tags: btn-xs, btn-sm,and btn-lg. The sizes change the text size and padding around the button’scontent. Excluding the [size] tag will create a default-sized button.

[style] is a specific tag which specifies the style of the button, as seenin the demo. There are seven styles of buttons. You must specify astyle. Unlike the size, a style tag is always required. These tagsare: btn-default, btn-primary, btn-success, btn-info, btn-warning,btn-danger, and btn-link. These styles can be seen on the demo page.

Note that btn-link still functions as a button, despite having a style dis-guising it as a simple link.

Glyphicons

Visual DemonstrationGlyphicons are a set of icons provided free of charge by Bootstrap, as nor-mally these icons cost a significant amount of money to use. The specific setis called the ’Halflings’ set, and a full list can be found here.

Glyphicons can be used anywhere that a <span> tag can be placed. Thecode below will insert a glyphicon:

<span class="glyphicon [type]"></span>

The <span> MUST be closed, and it cannot contain any content. The classmust also not contain anything but the glyphicon [type] class. [type]

specifies a specific glyphicon, the code for which can be found on the pagelinked above.

3

The Jumbotron

Visual DemonstrationJumbotrons are used to convey information in a large scale. These areususally used for website headers and other important information. Othertags can be enclosed in this, as seen in the demo page. We use this forour home page, as well as on our login/logout pages, in order to convey theneed to login, or the success of logging out. The code below will insert ajumbotron:

<div class="jumbotron">

Jumbotron Content. This can include any other Bootstrap or HTML.

</div>

Navigation Bars

Visual DemonstrationNavigation bars are a way to organize input into a nicely formatted bar.These are usually used in page headers, though they may be inserted any-where. The code for inserting a navbar is too complex to include here, but itis available in the demo page. Navbars can include many different types ofinputs, including dropdown menus, buttons, links, search boxes, and more.The navbar is designed to collapse into a mobile-friendly version, using CSSmedia rules. Please see the official Bootstrap documentation for more in-formation on these rules. jQuery is required to make dropdown menus innavbars work.

Content Wells

Visual DemonstrationContent wells are used to contain content in a separate container from therest of the web page. All content wells have the same basic text size, withdifferent styles specifying the roundness of its corners, and the amount ofpadding. The code below will insert a content well:

<div class="well [size]">

Well Content

</div>

The [size] tag will specify either well-sm or well-lg. Omitting this tag ispermitted, and will create a default-sized well. well-sm specifies a well withvery little padding around the content, as well as squared corners. well-lg

specifies a well with a large amount of padding, and rounded corners.

4