HTML and CSS – Twitter Bootstrap

The Bootstrap framework allows us to create responsive websites or web apps. Furthermore, Bootstrap comes with many components and widgets, and we are provided with sample code at getbootstrap.com.

Below is a starter template:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <title>Bootstrap - DHS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- This line tells the web page to resize according to the size of the device -->
    <!-- Bootstrap -->
   <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" 
media="screen">
     <!-- loads the style sheet for bootstrap -->
  </head>
 
  <body>
    <h1>Hello, world!</h1>
 
   <script src="http:http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <!-- loads the javascript file that is used by many of the bootstrap components -->
  </body>
</html>

Bootstrap uses a grid layout to organise the appearance of the web page or web app. You can view diiferent examples of using the grid layout at getbootstrap

Have a look at an example below:

1
2
3
4
5
6
7
<div class="container">
  	<div class="row">
                 <div class="col-md-4">
                 <!-- place your components here or any html code -->
                 </div>
        </div>
<div>

The grid system works by providing twelve columns per row. For example, if you want three equal columns you would use the class ‘col-md-4’ three times. Furthermore, you can split the columns into unequal amounts such as ‘col-md-8’, col-md-2 and col-md-2.

Playing around with the different column sizes and positions is recommended.