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

Lead Image © 3quarks, 123RF.com

Interface

As the Raspberry Pi finds its way onto more and more workbenches, new opportunities arise not only to transfer data from electronic projects to a local network or the Internet but also to provide options for feedback and control.

Presenting data, controls, and tools via a web interface makes your Raspberry Pi project accessible on just about any phone, tablet, or computer without special apps or software. However, once you enter the World Wide Web, you'll find so many packages, toolkits, and frameworks that creating a user interface becomes almost a larger task than the original project. Here, Bootstrap [1] comes into the picture. Bootstrap is an easy-to-use set of widgets and position aids written and maintained by Twitter. By writing standard HTML and applying Bootstrap elements on top, your Rasp Pi project immediately gains a polished look with minimal effort.

Bootstrap is compiled CSS and JavaScript that provides the basis for a sleek and modern web GUI. Its widgets convert standard HTML controls into stylized components that easily integrate into controls, forms, menus, and customized pages. Because it's all built into the CSS, dynamic changes via Ajax or WebSockets inherit the same appearance.

Getting Bootstrap

You can download Bootstrap from its Getting Started page [2] or use the links provided there to get the latest source code. You also can clone or fork the project on GitHub or install via the Bower package manager. Once the package is downloaded, unpack it into a test directory on your Rasp Pi web server (see the "Installing a Web Server" box).

Installing a Web Server

Although installing a web server is generally outside of the scope of this article, it's rather difficult to use Bootstrap without one. In Raspbian or any other Debian-based flavor of Linux, open a terminal and enter:

sudo apt-get install apache2

After prompting for your password, the Apache web server should be installed. Place example code from this article in the web directory /var/www by default, then, open a browser of your choice. If you're on the same machine as the server, the address is http://localhost/<yourFile>.html. If you're reaching the machine over a network, then visit http://<Server_IP>/<yourFile>.html.

Listing 1 shows a Bootstrap template [3]. You'll need to modify lines 7, 11, 12, and 21 to reflect the location of Bootstrap on your particular server. All of the examples in this article assume they are running within this template (or another page with Bootstrap loaded).

Listing 1

Bootstrap Template (courtesy of www.getbootstrap.com)

01 <!DOCTYPE html>
02 <html>
03   <head>
04     <title>Bootstrap 101 Template</title>
05     <meta name="viewport" content="width=device-width, initial-scale=1.0">
06     <!-- Bootstrap -->
07     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
08
09     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
10     <!--[if lt IE 9]>
11       <script src="../../assets/js/html5shiv.js"></script>
12       <script src="../../assets/js/respond.min.js"></script>
13     <![endif]-->
14   </head>
15   <body>
16     <h1>Hello, world!</h1>
17
18     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
19     <script src="//code.jquery.com/jquery.js"></script>
20     <!-- Include all compiled plugins (below), or include individual files as needed -->
21     <script src="js/bootstrap.min.js"></script>
22   </body>
23 </html>

Nature of Bootstrap

Bootstrap defines CSS classes for different looks, sizes, colors, and elements. You can apply and stack these classes to get the look you want. For example, say you have an HTML button:

<input type='button' value='DO NOT PRESS'>

Start working with Bootstrap by adding the bootstrap class btn to your class attributes:

<input type='button' class='btn' value='DO NOT PRESS'>

If you want an extra large button, so it can't be missed, add btn-lg to your class attributes:

<input type='button' class='btn btn-lg' value='DO NOT PRESS'>

To make it red, so it will stand out even more, add btn-danger:

<input type='button' class='btn btn-lg btn-danger'value='DO NOT PRESS'>

Now you have a nice, big, red button, and because Bootstrap affects only the visual appearance, all of your JavaScript (or any other scripting) works just as it always has. Figure 1 shows how the button changed as the different classes were applied.

Figure 1: Buttons as rendered by Chromium: (top to bottom) unformatted button, bootstrap button, large button, and large danger button.

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