How to do a simple bootstrap landing page from Scratch - Part 1 [ how to ]

how to

How to do a simple bootstrap landing page from Scratch - Part 1

Posted in how to

1:22 am, January 21, 2020

How to do a simple bootstrap landing page from Scratch - Part 1

How to do a simple bootstrap landing page from Scratch - Part 1 How to do a simple bootstrap landing page from Scratch - Part 2 How to do a simple bootstrap landing page from Scratch - Part 3

How to do a simple bootstrap landing page from Scratch - Part 1

This post follows on from my previous one How to do a simple landing page from scratch, where I detailed how to create the basic elements of a landing page.

This Howto or Tutorial on how to do a landing page using bootstrap simplifies the landing page even more, by using the popular bootstrap framework.

What do we want on our landing page?

For this tutorial we will be focusing on 5 main elements.

Header
Hero Image
Hero Text
Three boxes, with icons and call to action buttons
Footer

HTML Page Setup

Here we will be setting up the basics for our landing page, we will just be creating a flat html file and link to external css to get the nice styles happening.

Lets create a directory where we will save the main landing page file. I like to save things to google drive, so that I can access them on all my devices, but you can just save locally to your PC if you prefer.

Now lets add an index.html file, we call it index as most webservers will be setup to view the index.html or htm file first, so if you browse to that directory it will show that file rather than listing the directory contents.

Usually to add the file in windows you can just add a text file and then rename it to html, but you can also do this through an editor if you prefer.

Now to edit this file you can just use notepad, but it’s pretty ugly and makes editing the code a non-pleasant experience. So you can download one of my favourite code editors, Sublime Text, or Atom.io. I have been using Atom for a while now, it has some great plugins, but sublime is still a good goto text editor which is great and simple for editing local files.

Download Atom.io Here: https://atom.io/

Download Sublime Text Here: https://www.sublimetext.com/

Ok once you have picked your editor, load the index.html file into it.

Using sublime you can just type html and press tab to auto fill a very basic html template.

Now we can link to the bootstrap cdn files to add the bootstrap framework.

I usually use the cdnjs cdn to link these as they host most of the frameworks and javascript.

Link to cdnjs version of bootstrap: https://cdnjs.com/libraries/twitter-bootstrap

Now we need to copy the CDN Links for the min versions of bootstrap. Using the min versions of this will increase page load times as they are minified, and we won’t need to modify them anyway so may as well save file load size.

Here are the links that we need to copy and add to the header. Find the files and mouse over to the right of them and you get this menu where you can copy the full stylesheet or js import tag. Paste these into your header.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js

Now lets paste them in below the title here:

With the javascript we usually add these just before the end body tag, like this:

Now we can save this file and we have the bare bones file ready to add our bootstrap template elements.

At this stage all our landing page has is “body content here…” or whatever page text you added. But this is the basis for a boot strap landing page. You can test it out by dragging the file into your browser window, and it should show something like this.

We will be adding some more exciting elements to the page in Part 2.

This is the end of part one to this post How to do a simple bootstrap landing page from Scratch, in Part 2 we will be adding some elements to the page so it looks a bit more interesting than just the text. body content here…