Building web GUIs for your Rasp Pi project with the Bootstrap toolkit

Bootstrap Grid

The Bootstrap grid is a positioning system that supports up to 12 fluid columns that adapt to displays of different sizes, from smartphones to 60-inch LCD monitors. Bootstrap defines four size categories:

  • Extra-small – for displays <768 pixels wide.
  • Small – for displays between 768 and 992 pixels wide.
  • Medium – for displays between 992 and 1200 pixels wide.
  • Large – for displays >=1200 pixels wide.

As you define your page layout, you can customize the grid for each size of display. I will work with a small screen. Each row is defined by a <div> with the row class attribute.

<div class='row'>

Inside this div you can define columns of different sizes. If I assume for now that I am developing a page primarily for a tablet, I can define columns specifically for a small display:

<div class='row'>
   <div class='col-sm-6'>Column 1</div>
   <div class='col-sm-6'>Column 2</div>
</div>

to create two equal-sized columns on the tablet (Figure 2). Medium and large screens will use this layout as well. If someone views the page on a smartphone, though, the two columns will stack vertically (Figure 3). If you want to preserve the layout even on tiny screens, you can add an extra-small class attribute as well.

Figure 2: The two-column layout defined for a small (tablet-sized screen). Note how the columns are maintained.
Figure 3: On the smartphone, the layout switches to a vertical presentation so all content is displayed, although not in the column layout specified.
<div class='row'>
 <div class='col-sm-6 col-xs-4'>Column 1</div>
 <div class='col-sm-6 col-xs-8'>Column 2</div>
</div>

By adding col-xs-4 and col-xs-8, extra small screens also display two columns (Figure 4); in this case, however, the left column will be slightly smaller, emphasizing the right column (perhaps to make text more legible on such a small screen). Because the iPad is a small display instead of extra-small, it uses the equally spaced columns as before.

Figure 4: Once you define a column layout for extra small displays, the smartphone follows it.

Bootstrap's screen size selectors allow you to customize your page across multiple device types with minimal effort. This feature alone allows you to emphasize the most important elements first and then show supplemental information as larger displays allow. To offset columns, leave a blank space where a column would be and add an offset class, still referencing the screen size that you're defining (Listing 2). Doing so moves the column two slots to the right and creates a div occupying three grid slots (Figure 5).

Listing 2

Offsetting Columns

<div class='row'>
  <div class='col-sm-6' style='border:1px black solid;'>Column 1</div>
  <div class='col-sm-6' style='border:1px black solid;'>Column 2</div>
</div>
<div class='row'>
   <div class='col-sm-3 col-sm-offset-2' style='border:1px black solid;'>Offset column</div>
</div>
Figure 5: An offset column added to the layout.

Depending on your page layout, it might make sense to exclude some content completely on smaller screens or to include it only on larger displays. Bootstrap provides the visible and hidden utility classes to include or exclude content specifically for each screen size. Although this approach only works for a block element and entire tables, it can still be quite useful. Line 1 of Listing 3 will show up only on extra small screens, whereas line 2 will show up only on the largest of displays.

Listing 3

Including and Excluding Content

01 <div class='visible-xs'>This screen is tiny, check everything before submitting!</div>
02 <div class='hidden-xs hidden-sm hidden-md'>Since I have some room, here's the alphabet in morse code ...</div>

Bootstrap Styles

Bootstrap defines a complementary style for every HTML element. Headings are defined in descending point sizes, body text and paragraphs are defined in 14-point font, and add-on classes are available to add emphasis as needed. For example, a paragraph with the lead class has larger text (Figure 6):

Figure 6: An H1 heading, a lead paragraph, and a standard paragraph. Note the differences in font size as well as in the leading applied to each element.
<h1>Today's news</h1>
<p class='lead'>This breaking news just in...</p>
<p>Today in the news...</p>

The label and badge styles call attention to selected text and display a small amount of supplemental information.

Labels have rounded corners and can use color classes (Listing 4, lines 1-4; Figure 7), whereas badges are more oval in shape and have a grey background (Listing 4, lines 6-9; Figure 8). See Table 1 for the Bootstrap color naming convention.

Tabelle 1

Color Naming Convention

Element Colors

Color

Name

Text

Button

Label

Grey

Default

text-default

btn-default

label-default

Blue

Primary

text-primary

btn-primary

label-primary

Green

Success

text-success

btn-success

label-success

Cyan

Info

text-info

btn-info

label-info

Orange

Warning

text-warning

btn-warning

label-warning

Red

Danger

text-danger

btn-danger

label-danger

None

Link

NA

btn-link

NA

Emphasis Colors

Color

Name

Table Row or Cell

Text Alerts

Progress Bars

Control Groups

Blue

active

active

alert-info

progress-bar-info

NA

Green

success

success

alert-success

progress-bar-success

has-success

Yellow

warning

warning

alert-warning

progress-bar-warning

has-warning

Red

danger

danger

alert-danger

progress-bar-danger

has-error

NA, not applicable.

Listing 4

Labels and Badges

01 <h3>Who has paid for new shirts</h3>
02 <div>ScottPAID</div>
03 <div>JoeCONTEST WINNER</div>
04 <div>AmyNOT PAID</div>
05
06 <h3>How many shirts did each person order</h3>
07 <div>Scott2</div>
08 <div>Joe1</div>
09 <div>Amy2</div>
Figure 7: Bootstrap labels are used to show payment status. The colored background shows status at a glance.
Abbildung 8: The badge class showing the number of shirts ordered stands out nicely.

Bootstrap provides formatting for tables as well. Classes alternate background colors, add borders, create a mouseover effect, or highlight rows on the basis of status. To get the selected color, add the class attributes listed in Table 1 to your element. As an example, I'll combine all of the shirt information in Figures 7 and 8 into a table that also includes pickup status (Listing 5; Figure 9).

Listing 5

Colors in Tables

01 <table class='table table-striped table-hover table-bordered'>
02    <tr><th>Name</th><th>Shirts Ordered</th><th>Pay Status</th><th>Notes</th></tr>
03    <tr class='success'><td>Scott</td><td>2</td><td>PAID</td><td>Picked up on Monday</td></tr>
04    <tr class='warning'><td>Joe</td><td>1</td><td>CONTEST WINNER</td><td>Very excited when he found out he won!</td></tr>
05    <tr class='danger'><td>Amy</td><td>2</td><td>NOT PAID</td><td>Promises to pay tomorrow</td></tr>
06 </table>
Figure 9: All of the shirt information combined into a single table. The bottom row is highlighted red because the mouse is hovering over it (the mouse pointer does not show in this screenshot).

Progress bars are a quick and easy way to give visual feedback of process completion. Bootstrap uses CSS animations to change the size of the bar as values are updated. Additionally, progress bar classes allow you to select a striped or an animated striped bar (Listing 6; Figure 10).

Listing 6

Progress Bar (courtesy of www.getbootstrap.com)

01 <div class="progress progress-striped active">
02   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
03     20% Complete
04   </div>
05 </div>
Figure 10: A progress bar (courtesy of www.getbootstrap.com).

Buy this article as PDF

Express-Checkout as PDF

Pages: 6

Price $2.95
(incl. VAT)

Buy Raspberry Pi Geek

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content