A short taster session into the fundamental technologies powering the world wide web.

More Bootstrap

We'll now use bootstrap to create our website, so we'll first need to include bootstrap on our site.

Twitter Bootstrap <link rel="stylesheet" href="dist/css/bootstrap.css"> Verify that the fonts have changed - indicating that Bootstrap is loaded correctly.

Bootstrap layout

Bootstrap gives you several options on how to layout your page. To find out more take a look at the Grid system docs on the Bootstrap site. Some of these options will work out-of-the-box with responsive design - so that you can create a single html page which will look good whether viewed on a laptop, tablet or phone.

We’ll just look at a few of the most important layout options here:

Page margins

Bootstrap makes it easy to center content on your page and provide sensible page margins. To do this make use of the container class:

<body>
  <div class="container">

    <!-- page content goes here -->

  </div>
</body>

Columns

Bootstrap works on a grid layout, with 12 columns (by default). You can create a column layout with the row and span classes:

<div class='row'>
    <div class='col-sm-4'>
        <!-- First column content -->
    </div>
    <div class='col-sm-4'>
        <!-- Second column content -->
    </div>
    <div class='col-sm-4'>
        <!-- Third column content -->
    </div>
</div>

The number after the col-sm- determines how many of the 12 grid columns that page column takes up. The sm bit determines the width at which the columns will collapse on top of each other (which is useful when viewing your site on a phone). For more information see the Grid system docs.

We don't need it/nor do we need the old style tag Close it above your </div> that closes your jumbotron

The navigation bar

If you haven't already looked at the navigaion bars that bootstrap provides us with, have a look now

The navigation bar that we will use looks like this:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">My Little Coding Shop</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="index.html">Shop</a></li>
          <li><a href="basket.html">Basket  £<span id="total"></span></a></li>
        </ul>
      </div>
    </div>

You're on your own now

Your site should be almost complete now - apart from the JavaScript that we'll build in the later session. There are a few things that aren't quite right.

Remember the developer tools? Your task now is to use the developer tools inspecting the final site to finalize your site.

You'll need to make an external stylesheet and link it to your site. Then add the CSS rules from the final site.