Build a website with Bootstrap 4 Beta

How to build a website with Bootstrap 4 Beta 

 REALLY SIMPLE TUTORIAL ON HOW YOU CAN BUILD YOUR OWN WEBSITE IN NO TIME.

Having a website is like opening a door and inviting potential customers into your business.

This tutorial is good for you if you are:

  1. a beginner web designer looking to tackle freelance projects
  2. a non-tech entrepreneur who wants to test fast his idea

 

For this tutorial, we are going to build a coming soon landing page. Let’s say that you have a new app, a prototype or a new web site idea that you want to launch and you want to build some buzz before. That’s why it’s a good idea to start promoting your site and social profiles as soon as possible.

More importantly, you want to start collecting emails so you can start to build a customer base before your idea is launched.

What we are going to build

How to build a website with Bootstrap 4 Beta 

Instead of creating a basic under-construction page, we are are going to develop from scratch a responsive landing page. One that incorporates:

  1. countdown clock
  2. interactive social media buttons
  3. Integration with MailChimp

We will accomplish all of this within Bootstrap. Bootstrap is one of the most popular front-end frameworks for developing responsive websites and landing pages.

By the end of this tutorial, you will have the skills to develop professional looking pages with HTML and CSS. So let’s begin!

“The secret to getting ahead is getting started.”
Mark Twain

A. Setting Up

In order for us to start coding in the bootstrap framework, we first need to download the relevant files so we can link all the default bootstrap styles.

1. Download the Compiled CSS and JS

If you go to the Bootstrap site, you should see the large download button and download the Compiled CSS and JS version.

2. Extract the file in an accessible location

How to build a website with Bootstrap 4 Beta

3. Create the file structure

We have some files from Bootstrap but we are missing the index file and also our stylesheet.

4. Download the Atom Text Editor

You can download it from here: https://atom.io/. Although you can use any text editor you like. It’s just important that you find an editor you are comfortable using.

So when you have your chosen editor open, go to the next step.

5. Create a CSS file

Create a new blank file and save it as style.css in the CSS folder.

Create a CSS file Bootstrap 4 Beta

6. Create the Index File

Create a new blank page. Before we save it as our index file we just need to add a little bit of code to ensure we are plugged into the bootstrap framework.

To do that, we need to go back to the Bootstrap website to the documentation tab.

Starter Template Bootstrap 4 Beta

We are going to use the starter template. We have to copy this section of the code and then we can jump back over to HTML editor and paste that into our index file.

7. Get rid of the Hello World h1.

Atom Starter Template Bootstrap 4 Beta

8. Link the index file with the stylesheet we created earlier

The style will be reflected in the index page when we view it in the browser.

In the head section, just put the default bootstrap stylesheet here.

<link rel=”stylesheet” href=”css/style.css”>

CSS Template Bootstrap 4 Beta

9. Save the index file as index.html in the countdown folder.

Save Index for Bootstrap

10. Take a Break. You Deserve it

Relaxing cat while you code a website in bootstrap 4 beta
Studio Katze

11. Install Font Awesome

This will give us access to nice vector icons to use in our page.

Bootstrap 4 comes with a large amount of icons you can start with that are called glyph icons but they are fairly basic and don’t really get updated. Also Bootstrap 4 decided to drop support for that glyph icons.

Font Awesome is great because instead creating a image and have to be tied down by its final design, with FA you can easily size out a border, change colors and even animate so they offer a lot more flexibility and freedom.

Head to Font Awesome homepage here: http://fontawesome.io/

The first thing we have to do is installing the stylesheet into our page before we can use them.

Click download

Font Awesome CSS for Website

Unzip the archive into your countdown folder and remove the numbers which are just the version.

Font Awesome

12. Go Back to the Index File and Install the New Stylesheet

Add to your index file the following line:

<link rel=”stylesheet” href=”font-awesome/css/font-awesome.css”>

Atom Bootstrap 4 Beta

Soon we will add the icons on our page where we need them.

13. Add the Project Image to Your Folder

In order to reproduce exactly the coming soon page, here is the photo we are going to use.

Background Image for Website
Background Image
Image Assets

If you want to use your own images, that is fine. Just remember to link to those images in the code instead of the ones I’m using throughout the tutorial.

We are actually all set up now and we can finally get start with the designing our page

B. Creating our Page

We have all our files in place and now we can start coding on the countdown page.

14. Add the Background Image

Because we are creating a launching page this will contain all our elements in an single page. There is no scrolling, no menus, we can apply that background image in a HTML tag.

Go to the stylesheet and add the following line:

You can go and open your index page and see the background image on your browser.

Now we can add content to our page and it will simply place out on the top of the background image we added in the stylesheet.

15. Adding our Logo in Index.html

The first thing we are going to add to our page is the brand logo.

Go to index page and add in the body tags:

16. Adjust the Logo in CSS to Center it

Add in your stylesheet:

Bootstrap 4 Beta

17. Add the Intro Text in the Index File

Go back to your index file and add a section under the logo.

Bootstrap 4 Beta

18. Change the Intro Text in CSS

19. Get a Custom Google Font

In order to do that we have to add a new stylesheet via Google Fonts.

Go here: https://fonts.google.com/

Feel free to take a look and choose what you like. I’m going to look for Just Another Hand — https://fonts.google.com/?query=just+another&selection.family=Just+Another+Hand

Copy the link from their page:

<link href=”https://fonts.googleapis.com/css?family=Just+Another+Hand” rel=”stylesheet”>

And paste it to the index page, in the stylesheets section.

CSS linked to Atom

Copy the CSS rules:

font-family: ‘Just Another Hand’, cursive;

And paste them to your custom stylesheet within the paragraph style. Also you can adjust your font size so the text is more readable.

20. Final CSS Style for the Custom Text

21. Now Go Get Some Snack. You’ve Earned It.

Fresh Avocado Toast good for break when you code a website
Avocado toast sounds good

C. Adding the Countdown Clock

Ok, so we made some good progress. Now it’s time to add our countdown clock to our page.

To speed up things, simply copy the first text section and duplicate it underneath.

Change the section id from “text intro” to “counter”.

Now we need some pieces of JavaScript.

22. Get Rendro Countdown

You can get this library from the link here: https://github.com/rendro/countdown

Download the zip file, extract it and get the file jquery.countdown copied in your js folder.

custom JQ plugin countdown

23. Uber Simple Setup

To use the countdown plugin you need to load the current version of jQuery (tested with 1.7.2) and the javascript file of the plugin. Just add the following lines :

setup the JQ plugin

24. Initialize the Plugin

Add a script below

and include the div with a class in the section below the text

Bootstrap 4 Beta

25. Add a Custom Google Font to the Countdown Text

Repeat the same procedure, go to Google fonts and get Amatic SC and add the Bold option to the font.

Google Fonts for website

Copy the code from Embed section to the index page.

<link href=”https://fonts.googleapis.com/css?family=Amatic+SC:400,700” rel=”stylesheet”>

Bootstrap 4 Beta

Grab the CSS code “font-family: ‘Amatic SC’, cursive; ” and include it in your style.

Bootstrap 4 Beta

Now Your Page Should Look Like This

Bootstrap 4 Beta

26. Let’s Add Some Social Media Buttons in our Index

For our social media buttons, we are going to use the Font Awesome icons.

We have covered installation in the setup section and now we are ready to use them. You can see all their icons here: http://fontawesome.io/icons/

We are going to use the Twitter, Facebook, Google+ and Instagram square icons in a container.

Bootstrap 4 Beta

27. Let’s Add Some Style for Them

We have to align the icons and change their colors

CSS for Bootstrap 4 Beta

It should look like this:

Bootstrap 4 Beta Background Social Icons

28. Let’s Add Some Awesome Hover Effect

We can make a great hover effect from CSS. We have added in our index page a class for each icon: Facebook, Google, Instagram and Twitter. We can design the transition effect from our stylesheet.

Bootstrap 4 Beta Gif for presenting the landing page
Hover Effect

D. The Sign Up Form

This is great guys. We are at more than 50% of our process. We have to add our final section of the page which is the sign up form.

29. Have a Motivational Pill

“Hustle isn’t just working on the things you like. It means doing the things you don’t enjoy so you can do the things you love.” Unknown

30. Create the Form Section

Add the classic <div> container

Go to the Bootstrap 4 documentation and check the inline form code for more form options: https://getbootstrap.com/docs/4.0/components/forms/

We are going to collect only emails for the moment.

The HTML code is

31. Style the Form Section

In order to center the form

Bootstrap 4 Beta Sign up Form

32. More Styling for the Form & Form Button

E. Email Collecting

Here we have two ways:

  1. Use PHP markup
  2. Use an email marketing tool (recommended)

33. Collect Emails with Mailchimp

You can embed a MailChimp list signup form on any page of your website. Customize the form to support your brand, or combine it with special offers to attract new subscribers and boost engagement.

Read the official documentation here: https://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website

F. Final Site

34. HTML Code

35. CSS Code

36. Congratulations

“Think Big And Don’t Listen To People Who Tell You It Can’t Be Done. Life’s Too Short To Think Small.”- Tim Ferriss


Thanks for reading. I hope this helps. If you have any feedback or suggestions, I would be glad to talk to you in the comments.

Pavel Malos

Creating Digital Experiences @ BootstrapBay