Setting up a Dashboard using Bootstrap

Jun 12, 2014 · 2 min read · Bootstrap  ·
Share on:

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 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.