Portal Customization, Part 1: Introduction to Bootstrap and Common Components

Today’s end user expects that your website will be usable from a phone, tablet, or PC. Creating and maintaining multiple sites is slow and cumbersome. Enter Bootstrap. Bootstrap is a responsive design framework that provides a suite of functionality to render content based on the size of the browser’s view port (rendering area). By leveraging this framework, you can rapidly create content with a polished look and uniform user experience.

Bootstrap is a framework built on HTML, CSS and JavaScript. Bootstrap uses CSS and JavaScript to transform plain HTML elements into rich web controls. You can find the full list of components at http://getbootstrap.com/components/.

Bootstrap defines the view port using a series of columns (by default 12). When a component spills past the final column, it automatically moves down, providing a responsive user experience. To change the number of columns used in page layout, you specify the @grid-columns variable when making a custom build of bootstrap. Look for more on that in the next post.

For the purpose of this post, we will focus on a handful of components:

• Glyphicons
• Jumbotron
• Panels
• Tabs
• Labels

Reference: http://getbootstrap.com/components/#jumbotron

Glyphicons (glyphicons.com) is a font comprised of vector-based images that are commonly used in websites. Content creators add human-readable CSS classes to HTML elements to render the image. This type of implementation has the added benefit of accurately scaling per the user’s zoom level, and per the font-size CSS property.

Output

Reference: http://getbootstrap.com/components/#jumbotron

A Jumbotron is a large container that is intended to draw attention to a region of the page.

Output

Reference:

If you want to visually box some page content to provide a clear separation, a panel is the perfect component. It has optional header and footer regions as well.

Output

Reference: http://getbootstrap.com/components/#nav-tabs

Tabs are useful for collapsing large areas of a page into smaller.

Output

Reference: http://getbootstrap.com/components/#labels

Labels provide a clean highlighted appearance and work well to help end users visually correlate content.

Output