Bootstrap – Jump-start with a Bootstrap Template

In the tutorials before this one we started from scratch. This time we make a jump-start. The Bootstrap site contains examples of Bootstrap(ped) web pages. We’ll use one of these – with a carousel – and turn this into a front page for a website.

The Bootstrap template

Visit the Bootstrap site and click on ‘Examples’ (just below the blue download button). Currently there are 8 examples. Because we want a carousel on our front page we’ll use the last one ‘Carousel jumbotron’.

  • Right-click on the image of the template and choose ‘Save link as ..’.
  • Save the ‘carousel.html’ file on your PC.
  • Place the ‘carousel.html’ file in your project folder (as explained in the tutorial Bootstrap: Up and Running

If you now open the ‘carousel’ file in your browser you will not see what you want to see. It will probably look like this:
template only showing hyperlinks

There are 3 simple things that we need to do to correct this:

  1. Correct the hyperlinks in the template file because those in the template are based on a different folder structure.
  2. Replace the existing script lines with the right ones for our project set up.
  3. Add the missing images for the carousel.

As an added measure we will also delete some unwanted content and its corresponding styling rules.

Correcting the hyperlinks

Open the file ‘carousel.html’ inside your projectfolder with your HTML-editor.
In the head section you will find hyperlinks for the stylesheets. But these links are based on stylesheets located in a CSS subfolder that were nested inside an ‘assets’ folder. However the project structure that we’re using is different and looks like this:

Project File Structure extended

We therefor need to change these links into:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

The same goes for the hyperlinks for the favicon and the apple-touch-icons. As you can see these reside directly in the main folder and not inside an ‘ico’ subfolder inside an ‘assets’ folder.  The hyperlinks for the favicon and the apple-touch-icons can be found at the end of the head section and should look like this after you have made the necessary changes:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="favicon.png">

Replacing script lines

At the end of the template your will find quite a few script lines. You can delete all of them and replace them with:

<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>

Images for the carousel

The images shown in the example were not included when you save the ‘carousel.html’ file. So you need to add images yourself to be used in the carousel.
The 3 images in the carousel had the following dimensions: width of 1500px and height of 550px. Find or create some images of your own and place them inside the ‘img’ subfolder of your project.
Look for the markup for the old images. They look like this:

<img src="../assets/img/examples/slide-01.jpg" alt="">

When you have found one of these change ‘../assests/img/’ into ‘img/’ and change the name of the image file into that of your image file.

Deleting some unwanted content and styling rules

In the body section we will not use the Featurettes and Footer section. So you can delete all of these lines.
In the body section look for this comment:

<!-- START THE FEATURETTES -->

Delete all of the lines starting with this comment until the closing footer tag. Take care not to delete the closing div tag for the container.

In the head section there are quite a few extra styling rules. Look for this line in the head section:

/* Featurettes
    ------------------------- */

And delete the style rules underneath. Do not delete the CSS rules for the responsive layout that can be found just below the featurettes lines.

Adding ‘holder.js’ for the image placeholders

In the body section use was made of 3 image placeholders. But these placeholder require a link to the holder javascript.
You need to download that script from the Holder Github project. Unzip the downloaded file and copy the ‘holder.js’ file. Paste this file into your project’s ‘js’ folder.

Then change the script line just before the closing body tag into this:

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

Our Frontpage

Save the file and open it in your browser. You should now see a front page looking (almost) like this:

Front page with carousel new

As you can see a jump-start with a Bootstrap template can quickly result in a working web page. But starting with an existing template can have the disadvantage that the page contains markup that you do not really need. Making your web page unnecessarily heavy to load. As your website and its number of web pages grows this can become a real disadvantage. Especially if people visit your website with their mobile.

These are the Bootstrap tutorials in this series: