HTML and CSS – Twitter Bootstrap (Tasks)

Create a page that matches the following criteria:

– Contains a navbar (bootstrap navbar)
– Two rows.
– Each row contains three columns.
– Each column can contain any component.

Use the starter template available in prepwork.

Task 2

You have been using the preset bootstrap style sheet. You are now going to create your own css rules that will change the appearance of your website.

You are going to change the following elements:

– Headings
– Links

There is a exemplar to help you get started.

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.