5.2: Stylin’ with bootstrap

Wouldn’t it be nice if there was a way to instantly make your site look… styling?  That is the premise behind Twitter Bootsrap, a set of css and javascript libraries that allow you to style different elements on your site to look polished and professional… with minimal coding.  This tutorial will guide you on how to set up bootstrap and apply some of their design elements to your maproom.

First, review the bootstrap website:

http://twitter.github.com/bootstrap/

For this tutorial example, we will modify the previous geocoding tutorial.  Download bootstrap, unzip it, and use FTP to upload the 3 folders to the same location of your geocoding tutorial file:

  1. css
  2. img
  3. js

Add the following “calls” to the bootstrap css and js files (just below the call to jQuery):

IMPORTANT!

There is a well documented “bug” report that happens when you use Bootsrap in conjunction with Google Maps.  Certain parts of the Maps environement get distorted like so:

Fortunately, there is an easy fix, but we need to make sure that this fix gets included. Add the following css styles to the header area of your HTML code:

Now let’s get stylin’!

This is what we currently have:

 

For starters, we can change the design for the search button. How about making it a nice cool blue, as specified here. All that needs to be done is to add a “class” value for the supported values given by bootstrap. Simply add class=”btn btn-primary” to the input tag:

Nice!  But things aren’t quite aligning correctly.  Let’s also change the box that contains the search elements. Get rid of all the “style” elements in the container div, and instead, use pre-defined bootstrap classes (class=”well form-search”)

Building a “tabbable” nav bar

Bootstrap also gives you many options to create navigation bars.  One of them is the tabbable nav bar.  Simply add the following set of DIV and UL elements under the search bar:

Finally, let’s move the search box to within one of the tabbed areas and rename the tab header accordingly.  Optionally, you can also modify the look and feel (as demonstrated below) according to various form options detailed here.

You can change the elements within the appropriate DIVs and Ps to match your content.  You can also add more tabs as necessary.

(sample site)

Leave a Reply