Bootstrap: Building an Interactive Tourism Web Page

A well designed, interactive Web page offers satisfaction to the client, user and, above all, to the developer. The authors of this tutorial present an interactive tourism Web page that was created using Bootstrap. The whole process is explained lucidly

B ootstrap is a free and open source HTML5, JS and CSS framework for building well designed, responsive, mobile first websites and Web applications, at very short notice. Besides, the Twitter Bootstrap framework provides a standard and consistent way to render Web pages across browsers and devices (from phones and tablets to desktops). In this article, we explore the fundamentals of this very handy tool, and demonstrate how to create a simple yet interactive tourism Web page using Bootstrap as one of the templates.

Get started with Bootstrap

To get started, one can download the latest Bootstrap version from http://get boot strap. com, copy it in a folder of your choice or include it from CDN. For the example below, we are going to use CDN, as many users have already downloaded Bootstrap from Max CDN when visiting other websites. It will be loaded from the cache when they visit our website, resulting in faster website access.

Designing the first page using Bootstrap

The first thing any Web developer needs to do is to create a design for the Web page. Bootstrap provides some predefined website templates, which can be extended, or websites can be built from scratch. The templates or examples can be found in http:// get bootstrap.com/getting-started/#examples. Our Web page is divided into four sections using the marketing template provided by Bootstrap: 1. Navigation bar 2. Navigation tab and slide show 3. Content section 4. Footer