15,773 reads

How to build a website with Bootstrap 4 Beta

by Pavel MalosSeptember 6th, 2017

Too Long; Didn't Read

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

Companies Mentioned

Coin Mentioned

featured image - 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:

a beginner web designer looking to tackle freelance projects
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

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

countdown clock
interactive social media buttons
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

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.

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.

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.

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”>

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

10. Take a Break. You Deserve it

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

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

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”>

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

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:

html, body {background:url('../img/bg.jpg') center center no-repeat;height: 100%;background-size:cover;}

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:

            <div class="col-md-12 text-center">  
                <img src="img/my-logo.png" class="img-fluid"/>  
            </div>

16. Adjust the Logo in CSS to Center it

Add in your stylesheet:

#logo img {margin:0 auto !important;padding-top:20px;}

17. Add the Intro Text in the Index File

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

            <div class="col-md-12">  
                <p>we're working hard, we'll be ready to launch in...</p>  
            </div>  
              
        </div>    
    </div>  
  </section>

18. Change the Intro Text in CSS

#intro p {color: white;text-align:center;font-family: 'Just Another Hand', cursive;font-size:1.8em;}

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.

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

#intro p {color: white;text-align:center;font-family: 'Just Another Hand', cursive;font-size:1.8em;}

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

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.

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 :

24. Initialize the Plugin

Add a script below

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

            <div class="col-md-12">  
                <div class="countdown"></div>  
            </div>  
              
        </div>    
    </div>  
  </section>

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.

Copy the code from Embed section to the index page.

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

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

#counter .countdown {text-align:center;color:white;font-family: 'Amatic SC', cursive;font-size:3em;margin:-15px 0 0;}

Now Your Page Should Look Like This

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.

            <div class="col-md-12">  
                <ul class="list-inline">  
                    <a href="[http://www.twitter.com](http://www.twitter.com)" target="blank"><li class="list-inline-item"><i class="fa twitter fa-twitter-square fa-3x" aria-hidden="true"></i></li></a>  
                    <a href="[http://www.facebook.com](http://www.facebook.com)" target="blank"><li class="list-inline-item"><i class="fa facebook fa-facebook-square fa-3x" aria-hidden="true"></i></li></a>  
                    <a href="[http://www.google.com](http://www.google.com)" target="blank"><li class="list-inline-item"><i class="fa google fa-google-plus-square fa-3x" aria-hidden="true"></i></li></a>  
                    <a href="[http://www.instagram.com](http://www.instagram.com)" target="blank"><li class="list-inline-item"><i class="fa instagram fa-instagram fa-3x" aria-hidden="true"></i></li></a>  
                </ul>  
            </div>  
              
        </div>    
    </div>  
  </section>

27. Let’s Add Some Style for Them

We have to align the icons and change their colors

#icons .twitter:hover {color:#6cadde;bottom:5px;}

#icons .facebook:hover {color:#3b5998;bottom:5px;}

It should look like this:

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.

#icons .twitter:hover {color:#6cadde;bottom:5px;}

#icons .facebook:hover {color:#3b5998;bottom:5px;}

#icons .google:hover {color:#ea4335;bottom:5px;}

#icons .instagram:hover {color:#517fa6;bottom:5px;}

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

            <div class="col-md-12">  

                  
            </div>  
              
        </div>    
    </div>  
  </section>

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

            <div class="col-md-12">  
                <form class="form-inline" role="form" method="post" action="#signup">  
                    <input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">  
                    <button type="submit" class="btn btn-signup btn-sm" name="submit" value="send">find out more</button>  
                </form>  
                  
            </div>  
              
        </div>    
    </div>  
  </section>

31. Style the Form Section

In order to center the form

#signup {text-align: center;}

#signup .form-inline {display: block;}

32. More Styling for the Form & Form Button

#signup {text-align: center;}

#signup .form-inline {display: block;}

#signup .btn {background-color: rgba(161,186,226,0.5);color: white;}

#signup .btn:hover {background-color:rgba(37,165,82,1);}

E. Email Collecting

Here we have two ways:

Use PHP markup
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

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head><body>

            <div class="col-md-12 text-center">  
                <img src="img/my-logo.png" class="img-fluid"/>  
            </div>  
              
        </div>  
    </div>  
  </section>  
    
  <section id="intro">  
    <div class="container">  
        <div class="row">  
          
            <div class="col-md-12">  
                <p>we're working hard, we'll be ready to launch in...</p>  
            </div>  
              
        </div>    
    </div>  
  </section>  
    
    
  <section id="counter">  
    <div class="container">  
        <div class="row">  
          
            <div class="col-md-12">  
                <div class="countdown"></div>  
            </div>  
              
        </div>    
    </div>  
  </section>  
    
  <section id="icons">  
    <div class="container">  
        <div class="row">  
          
            <div class="col-md-12">  
                <ul class="list-inline">  
                    <a href="[http://www.twitter.com](http://www.twitter.com)" target="blank"><li class="list-inline-item"><i class="fa twitter fa-twitter-square fa-3x" aria-hidden="true"></i></li></a>  
                    <a href="[http://www.facebook.com](http://www.facebook.com)" target="blank"><li class="list-inline-item"><i class="fa facebook fa-facebook-square fa-3x" aria-hidden="true"></i></li></a>  
                    <a href="[http://www.google.com](http://www.google.com)" target="blank"><li class="list-inline-item"><i class="fa google fa-google-plus-square fa-3x" aria-hidden="true"></i></li></a>  
                    <a href="[http://www.instagram.com](http://www.instagram.com)" target="blank"><li class="list-inline-item"><i class="fa instagram fa-instagram fa-3x" aria-hidden="true"></i></li></a>  
                </ul>  
            </div>  
              
        </div>    
    </div>  
  </section>  
    
  <section id="signup">  
    <div class="container">  
        <div class="row">  
          
            <div class="col-md-12">  
                <form class="form-inline" role="form" method="post" action="#signup">  
                    <input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">  
                    <button type="submit" class="btn btn-signup btn-sm" name="submit" value="send">find out more</button>  
                </form>  
                  
            </div>  
              
        </div>    
    </div>  
  </section>  
    
    
    
    
<!-- jQuery first, then Tether, then Bootstrap JS. -->

  <script type="text/javascript" src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js)"></script>  
  <script type="text/javascript" src="js/jquery.countdown.js"></script>  
    
  <script>  
  $(function() {  
$('.countdown').countdown({  
    date: "June 7, 2087 15:03:26"  
});

});</script>

</body></html>