With this tutorial, we will build from scratch social network website using Bootstrap 4. There are 7 sections for this template:

Part 1: Setup Website Structure
Part 2: Create Navbar section
Part 3: Create Home section
Part 4: Create Connect Section
Part 5: Create Post Section
Part 6: Create Share Section
Part 7: Create Footer Section

Let’s start

Part 1: Setup Website Structure

Go to Desktop or any folder in your computer, create project folder name “CocaSocial”

Now, you can use Bracket Text Editor (Free), or Sublime (Trial), or Atom  (Free), or Visual Studio (Free), … but I will use Bracket Text Editor.

Then, open Bracket, go to File -> Open Folder -> select CocaSocial and hit Select Folder. After that you will see CocaSocial on the left panel

  1. Right click on left panel select New Folder, and name it “css“, open css and right click select New File and name it “style.css
  2. Right click again in CocaSocial folder, create second folder called “js“, open js and right click select New File and name it “script.js
  3. Right click in CocaSocial, create third folder called “images“, this folder will store all images for our social network website.
  4. Under CocaSocial, right click and select New File, name it “index.html

Now, you will see all the folders and files in order as following:

CocaSocial

  • css
    • style.css
  • js
    • script.js
  • images
  • index.html

Now, click on index.html and typing the following code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Campatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CocaSocial Network</title>
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon/favicon.ico">
</head>
<body>
<h1>Welcome to CocaSocial Network<h1>
</body>
</html>

Now save it, then click on the Live Server icon to view the beginning part of website that we have created so far

live server
Add Bootstrap Framework into our website

Because we build this website using Bootstrap so we will call Bootstrap Library by visiting Bootstrap website getbootstrap.com and scroll down to CSS section, click on Copy to Clipboard.

Go back to our index.html file, and and paste it <head> section below meta tag.

Continue copy jquery on Bootstrap website, below the CSS section, we click to copy JS files.

Go back to index.html and paste above the closing </body> tag

Add Font Awesome into website

We will also add font awesome CDN into our website visiting font awesome and click on How to Use menu tab, scroll down and click on copy icon.

Again, go back to index.html and paste the copied link above Bootstrap CSS link

Add our custom jquery and  css files

Since we need to add some custom css and jquery codes into website, so we need to link our custom jquery and css files in index.html

Put this css link below all Bootstrap CSS link in the head section

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

Then put this link below all jquery Bootstrap links

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

Our index.html will look like this

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Campatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CocaSocial Network</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Welcome to CocaSocial Network</h1><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Part 2: Create Navbar Section

This section, we will create Navbar menu for our Social website. Let type below code right under <body> tag

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" id="outer-nav">
<div class="container">
<a href="index.html"class="navbar-brand">CocaSocial</a>
<button class="navbar-toggler"data-toggle="collapse"data-target="#navbarDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDrop">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#home"class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#explore-head-section"class="nav-link">Explore</a>
</li>
<li class="nav-item">
<a href="#create-head-section"class="nav-link">Create</a>
</li>
<li class="nav-item">
<a href="#share-head-section"class="nav-link">Share</a>
</li>
</ul>
</div>
</div>
</nav>
So, what do classes mean?

navbar: we call class name navbar from Bootstrap
navbar-expand-sm: the menu will expand in mobile device
bg-dark: set dark color for background
navbar-brand: define logo class
navbar-toggler: this will toggle to hamburger menu in mobile device
collapse: will expand in mobile device
#navbarDrop: we define this id ourself, you can define any name you want, it will call the div that container all menu item when it is triggered

Now, click to open style.css

Define the body and custom navbar a little bit by typing the code

body {
background: #616161;
color: #fff;
}
.navbar {
border-bottom: #5bc0de 2px solid;
opacity: 0.8;
}

Click on Live Server and refresh the browser, this is how our Social website look so far

site with navbar
site with navbar mobile

Part 3: Create Home Section

Now, we keep building up the template by creating the Home section which has Text on the left and Registration form on the right. Let typing this code below the <nav> section

<!-- Home -->
  <header id="home-section">
    <div class="home-overlay">
      <div class="home-inner"> 
       <div class="container">
        <div class="row">
         <div class="col-lg-8 d-none d-lg-block">

         <!-- Left side text content -->

         </div>
         <div class="col-lg-4">

         <!-- Right side form content -->

         </div>
        </div>
       </div>
      </div>
    </div>
  </header>

How the code above work?

home-section: this id is defined for the whole section which we will use it to called background image, this background will cover the whole Home section.
home-overlay: this class is used for adding semi-transparent background on top of background image so that we can make the image background darker and make the text on Home section display clearer and standout from the background.
home-inner: this class will will be the container for the content of Home section which are text on the left and form on the right.
container: this class is defined by Bootstrap which uses to wrap all the content
col-lg-8: this class will reserve 8 columns for the left text
d-none: this class is used for hiding text in all small screen
d-lg-block: this class will show this text section in large screen

Define CSS for this Home wrapper: let click back to style.css and type the following code below navbar class.

#home-section {
  background: url(../img/home.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 700px;
}

#home-section .home-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 700px;
  background: rgba(0, 0, 0, 0.7);
}

#home-section .home-inner {
  padding-top: 150px;
}

Now, if you visit your website, you will not see anything difference because we haven’t add content in Home Section.

Let add the code into index.html file for the left side text first below this line of code

<div class=”col-lg-8 d-none d-lg-block”>

<h1 class="display-4">Create profile, connect, and follow</h1>
<div class="d-flex">
    <div class="p-4 align-self-start">
        <i class="fas fa-check fa-2x"></i>
    </div>
    <div class="p-4 align-self-end">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, tempore iusto in minima facere dolorem!
    </div>
</div>

<div class="d-flex">
    <div class="p-4 align-self-start">
        <i class="fas fa-check fa-2x"></i>
    </div>
    <div class="p-4 align-self-end">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, tempore iusto in minima facere dolorem!
    </div>
</div>

<div class="d-flex">
    <div class="p-4 align-self-start">
        <i class="fas fa-check fa-2x"></i>
    </div>
    <div class="p-4 align-self-end">
    </div>
</div>

How the code above work?

display-4: this class is for heading with lighter font weight
d-flex: this class will allow two div side by side in the same row
p-4: this class set all padding to 1.5rem (Ex: 24px if font size is 16px)
align-self-start: this class align flex item from the start of flex container, in this case it will start content from the left
align-self-end: this class align flex item at the end of flex container, in this case it will start at the end of the left part
fas fa-check fa-2x: these classes is called font-awesome check symbol with double size

Continue to add following code into right side below this line of code

<div class=”col-lg-4″>

<div class="card bg-info text-center card-form">
 <div class="card-body">
  <h3>Sign Up Today</h3>
  <p>Please fill out this form to register</p>
   <form>
    <div class="form-group">
     <input type="text" class="form-control form-control-lg" placeholder="Username">
    </div>
    <div class="form-group">
     <input type="email" class="form-control form-control-lg" placeholder="Email">
    </div>
    <div class="form-group">
     <input type="password" class="form-control form-control-lg" placeholder="Password">
    </div>
    <div class="form-group">
     <input type="password" class="form-control form-control-lg" placeholder="Confirm Password">
    </div>
    <input type="submit" value="Submit" class="btn btn-outline-light btn-block">
  </form>
 </div>
</div>

How the code above work?

card: this form we use Card class
text-center: set elements in the card to center which include h3, p tag and form
form-control-lg: all input fields are using form control large size
btn-outline-light: submit button is transparent with outline border

Now let see the full code for index.html file so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <title>CocaSocial Network</title>
</head>
<body data-spy="scroll" data-target="#outer-nav" id="home">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" id="outer-nav">
    <div class="container">
      <a href="index.html" class="navbar-brand">CocaSocial</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarDrop">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarDrop">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a href="#home" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#explore-head-section" class="nav-link">Connect</a>
          </li>
          <li class="nav-item">
            <a href="#create-head-section" class="nav-link">Post</a>
          </li>
          <li class="nav-item">
            <a href="#share-head-section" class="nav-link">Share</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Home -->
  <header id="home-section">
    <div class="dark-overlay">
      <div class="home-inner container">
        <div class="row">
          <div class="col-lg-8 d-none d-lg-block">
            <h1 class="display-4">Create profile, connect, and follow
            </h1>
            <div class="d-flex">
              <div class="p-4 align-self-start">
                <i class="fas fa-check fa-2x"></i>
              </div>
              <div class="p-4 align-self-end">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, tempore iusto in minima facere dolorem!
              </div>
            </div>

            <div class="d-flex">
              <div class="p-4 align-self-start">
                <i class="fas fa-check fa-2x"></i>
              </div>
              <div class="p-4 align-self-end">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, tempore iusto in minima facere dolorem!
              </div>
            </div>

            <div class="d-flex">
              <div class="p-4 align-self-start">
                <i class="fas fa-check fa-2x"></i>
              </div>
              <div class="p-4 align-self-end">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, tempore iusto in minima facere dolorem!
              </div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="card bg-info text-center card-form">
              <div class="card-body">
                <h3>Sign Up Today</h3>
                <p>Please fill out this form to register</p>
                <form>
                  <div class="form-group">
                    <input type="text" class="form-control form-control-lg" placeholder="Username">
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control form-control-lg" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control form-control-lg" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control form-control-lg" placeholder="Confirm Password">
                  </div>
                  <input type="submit" value="Submit" class="btn btn-outline-light btn-block">
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>

And here is full code for style.css file

body {
  background: #616161;
  color: #fff;
}

.navbar {
  border-bottom: #5bc0de 2px solid;
  opacity: 0.8;
}

#home-section {
  background: url(../img/home.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 700px;
}

#home-section .home-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 700px;
  background: rgba(0, 0, 0, 0.7);
}

#home-section .home-inner {
  padding-top: 150px;
}

Leave a Reply