Bootstrap: Hello World!

Design

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:

<script src="js/jquery.js">

1	<script src="js/jquery.js">

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

<script src="js/bootstrap.js"></script>

1	<script src="js/bootstrap.js"></script>

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:

<meta charset="utf-8">

1	<meta charset="utf-8">

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">

1	<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<meta name="viewport" content="width=device-width, initial-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1">

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.

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

Our final index.html with Hello World! is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap: Hello World!</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <h1>Hello World!</h1>
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap: Hello World!</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Related Posts
Bootstrap grid system

Sorry, the comment form is closed at this time.