A Bare Bones HTML Document. (index.html)



<!DOCTYPE html>


<title> the title </title>

<link rel="stylesheet" type="text/css" href'=''css/style.css">



<div class = "header"> Header Content </div>

<div class ="main">Main Content</div>

<div class="footer">footer content</div>



The HTML doccument consists of elements such as <head>...</head> , <body>...</body>, and <div>. Elements cna be nested indside each other. The elements content (if it has any) is what is between the opening (eg <div>) and closing (</div>) tags. Each element can have one or more attributes. For instacne the <div> elements in our bare bones HTML each have a class attribute. The class attributes value is header, main and footer respectively. These divs can be styled by using a class selector in the documents style sheet.

A Bare Bones Style Sheet (style.css)

.header{background-color: red;}

.main {background-color: blue;}

.footer {background-color: green;}

 Adding Bootstrap

Bootstrap is a collection of CSS and Javascript files that add layout, styling and browser and screen size compatibility features. Without Bootstrap, or a similar library, adding styling features that will appear consistent across a range of browsers and screen sizes is difficult. 

In our demonstration site Bootstrap loads via two files, jquery.js and bootstrap.js  

The Bootstrap CSS file is loaded from the head.

<link rel="stylesheet" type="text/css" href="/introwd/css/bootstrap.css">

Bootstrap also requires two java script files. these are loaded from the bottom of the body element.

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

Placing Elements on the Page

Bootstrap has a number of built in classes that allow you to place elemets in a grid. The Bootstrap grid has 12 columns and these columns can be seperately divided into rows. In our demonstration this is the code for the header in the index.html file:


<div class="row">
     <div class="col-12 text-center header">
            <p>HTML CSS, Bootstrap, Demonstration</p>

This is creating a div of the bootstrap class 'row'. The div nested inside the row div has three classes: col-12, text-center and header. The first two are bootstrap classes telling the browser to use all 12 collumns (ie the full browser width) of the enclosing row and to center the text. The third is a class that is defined in the style.css file. The <h3> tag denotes header 3 and by default is styled in a larger font Tthe <p> tag denotes paragraph.

The following code places a main content area and a sidebar into a row. The main class takes up 8 columns of the row and the sidebar 4.


<div class="row ">
     <div class="col-md-8  main">
             <h3>Main Content</h3>
      <div class="col-md-4 sidebar">


Common HTML tags

Heading tags  

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading 3</h3>

Anchor tag indicates a link

<a href="http://www.somelink.com"> A Link </a>

Lists and list items


<li>listitem 1</li>

<li>List item 2</li>



<img src=''path to image">