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

So in Part one of this tutorial we created a bare bones html file which is the basis of our landing page.

The code should look something like this, so far. (I will provide download links at the end of the tutorial for all the files)

Lets drag that into a browser and see how it looks.

Yep, pretty blank so far, but this is the base, which includes all the elements from bootstrap, so dont worry. Now we will go and add some pre-built elements from bootstrap.

Let’s start at the top with the header.

Header

Lets add a nav bar to the top using this element:

https://getbootstrap.com/docs/4.4/components/navbar/

Now we can reload the browser and see that we have a nice header added to our landing page.

Since we are just doing a “Simple” landing page, we will just leave the nav simple as well, and change the title to our landing page title.

Hero Image

Now to add a nice Hero image, underneath our Header. This breaks up the page a bit, and makes it more “visually appealing” or something. Better than all just white anyway.

Head over to a nice stock image site and pick an image, a few of my favourites are pexels.com or unsplash.com.

Save the selected image into our working directory, under a new directory called images.

Create a new div element called home-hero. Like so:

And add some styles for this div element, up in the header in a new style tag. I add them into the header for now, as we shouldn’t have too many additional styles. If you start adding heaps then it might be better to add them to an external style sheet. But we won’t worry about that for this tutorial.

Now we have a div element and a style tag that is attached to it. We can set our new image to be the background of this element.

I cropped out the last bit of this which should be center no-repeat; and also add the line, background-size: cover; which will make the background image cover the size of the home-hero div element.

Save (CTRL+S) the changes and let’s have a look and see if that worked…

Yep looking good so far.

Snazzy…

Ok should we add the hero text in the middle of the hero image? I guess so, or could add below it. We will go in the middle for now.

We will just use the built in bootstrap font for now and see how it looks.

Add some hero text and a new element for the title.

And add a class so we can style it.

This will probably be aligned to the top as well so will need to pad it up a bit.

Yeah i cant type font-size in that one for some reason.

Reload and have a look again.

Not too bad, just need to change the text a bit. You can do this using chrome dev tools, or just change the values in the css, depending on how interactive you want to be.

Here is an example using chrome dev tools, in chrome you can access this using F12 and then click on the inspect arrow to select your element.

Make sure you copy the new rule and paste it back into your style sheet index.html file, or it will not work…

Also i noticed the JS error here, as bootstrap does still require jquery to work. Not that we will actually be using any of the JS for the moment its good not to have any console errors.

So back to cdnjs.com and find the js link for JQuery, add that above the bootstrap js down the bottom of our file.

This should get rid of the jquery requirement error in the console.

Ok now onto the next part. Three Boxes with icons and all that stuff…

Actually, man i’m tired after that last part i might go get a snack or something. And i will add the Three boxes to Part 3 of this tutorial!

Yay! :P

Download

You can download this article as a PDF here. Click to Download How to do a simple bootstrap landing page from Scratch - Part 2 as PDF