Setting up a Dashboard using Bootstrap

Bootstrap dashboard

I have a number of web-based tools to monitor and maintain the various devices and applications on my network. It would be very convenient to integrate the tools with an administration console hosted on a secured web server that will let me in from the outside but keep the script kiddies out. 

I decided to use Bootstrap to build a dashboard to do that. It is a front-end web development framework that was written by Mark Otto and Jacob Thornton at Twitter to standardize their development environment and share common design patterns and code. 

Why Bootstrap and not some other web framework?

• It was released under the MIT open source licence in August 2011 on GitHub, so you are free to download and use the code, modify it, and distribute it, as long as you respect the license terms; 
• It uses HTML 5 which makes the site design very responsive irrespective of the form factor of the device, whether desktop or mobile;
• There are many free templates to get you going, and there is a market of premium templates if you want to pay for upscale designs;
• It is simple, elegant, and easy to get up and running.

Install Bootstrap 3.1.1

Download Bootstrap

Use your favourite browser to go to the very minimalist Bootstrap home page and click on Download Bootstrap:

You will be given a choice of download options. Choose Download Bootstrap to download the precompiled and minified versions of Bootstrap's CSS, JavaScript, and fonts:

This download will not include documentation or the original source code files, so you don't have to bother compiling other files. Later, you can use the other download options to get the source code and play around with the Less compiler.

Install Bootstrap

Installation is simple: copy the download to your working directory, unzip it and rename it.

Create the index page

This Bootstrap download does not include a sample default index page, so using a text editor create a text file called index.html under the parent directory, "Bootstrap" in this example, and include this HTML code from the Bootstrap basic template:

Open index.html with your browser and you should see "Hello, World!".

Now try these examples on the Bootstrap site to get you fired up while I play around with templates for Admin themes.

Yes, Another Blog About Technical Things

Another blog?

"A blog? Aren't there too many blogs?"

Absolutely. As of today, there are 188.7 million blogs on Tumblr, more than 70 million on WordPress.com, and nobody knows how many are on Blogger because Google keeps that a secret.

"Then why are you blogging?  Who is going to read yet another blog?"

Well, I never update my FaceBook page because I am not very sociable. I do have an account on Google Plus even though my son thinks it consists of tumbleweed and the lost souls of Linux administrators, and I occasionally post there, but the format does not lend itself to long technical posts.

I decided to blog for two reasons. Firstly, the notes I make while I wait for the kettle to boil get archived in the universal bit bucket of digital entropy on a regular basis, so a blog on a server owned by Google is a fine off-site disaster recovery site.

Secondly, the hundreds of millions of blogs out there host a rich seam of thought nuggets that help enormously when faced with some seemingly intractable technical problem. By posting here I may save someone else from an afternoon of banging their head on a keyboard or rocking to and fro in despair.

Thirdly, it is important to know that off-by-one errors are a common source of software defects and neckbeard humour.

Who am I?

"But who are you? Why do you think you have something interesting to say?"

For many years I worked in a senior position in government and am now consulting in the more general field of Open Government. Working in the public service demanded a certain level of decorum and restraint so I was not able to swear freely or make pointed observations that some may feel to be controversial, but as a consultant I am at now at liberty to blog as I see fit.

But I will not go so far as to hurl invective at vendors like Linus Torvalds did, although his rant did spur NVIDIA to contribute more support to the Nouveau open source driver for their cards.

What is this blog about?

"Okay, so you are determined to blog, even though there are probably more than 300 million other blogs out there. What are you going to blog about?"

Getting your teeth into something new in the I.T. world involves extensive googling for prior art, but that search will return all sorts of flotsam and jetsam that you have to assemble into something that works.

Since I keep detailed notes as I work through a problem because the chances are good that I will face the same problem again sooner or later, I decided to write up my notes and post them here as a record of various stages of a journey to nowhere in particular.