Jun 192015

In order to create our first html page, Hello World!, using Bootstrap, we will go to the official Bootstrap website at http://getbootstrap.com/ and download the lastest 3.x.x version. Then will extract the archive and copy the following folders: css, fonts and js. Our project will have these folders and all of the main html archive at the same level that these folder.

In this post, we are using the index.html for our Hello World! in Bootstrap. Our project directory should looks like:

Next we link boostrap css into index.html, placing the following inside the <head> tag

Bootstrap requires jQuery for its JavaScript components to work. Go to jquery.com and download jQuery version 1.11.0. Bootstrap supports Internet Explorer 8 and above. If you download jQuery version 2, IE8+ will fail to function properly because jQuery has officially opted out of support for IE8 in versions 2 and above. Hence,
jQuery 1.11.0 is needed, the latest version of jQuery 1. After you have downloaded the jquery.js file, paste it into the /js folder of your project directory. Next, weʼll link it into our index.html using the following code:

Next we include Bootstarp’s JavaScript file with the following code:

Both javascript code are recommended to be inserted just inside the <body> tag instead of the <head>, because the page’s loading time is reduced.

We need to include some meta tags:

For Unicode character set:

For forcing IE to use the lastest rendering engine to render our webseite:

For consuming all the space available inside the browser windows, whether it is a tablet or a mobile or a desktop screen:

Finally, we have to take into account that Bootstrap 3 uses many HTML5 elements and CSS3 properties that won’t work in Internet Explorer 8. We need to add some scripts that bring support for HTML5 and CSS3 when website is opened in IE8.

Our final index.html with Hello World! is:

Related Posts
Bootstrap grid system

Sorry, the comment form is closed at this time.