<div id="main"class="container-fluid">
  
  <div id="fir"class="row">
    <div class=" col-md-5"><div class="row"><p id="qwo" class="center-block"><span class="btn btn-success btn-sm">LIVE RESUME</span></p> <span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-success btn-sm">VIEW<br> & <br>APPLY PROJECTS</span> </span></p><span id="ert"class="icon">&#8600</span></div>
  </div>
    <div class=" col-md-5"><div id="in"class="row"><p id="qwt"class="center-block"><span class="btn btn-success btn-sm">WORK ON <br>PROJECTS</span></p><span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-success btn-sm">FINISH<br> PROJECT</span></p>
        <span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-success btn-sm">IMPROVE LIVE<br> RESUME</span></p><span class="icon">&#8594</span>
      
      </div>
        
      
      
      </div>
    <div class="col-md-2">
      <div id="inr"class="row"><p id="qwt" class="center-block"><span class="btn btn-success btn-sm">APPLY FOR <br>POSITIONS</span></p> </div>
      
      
      
    </div>
    
    
  </div>
  <div id="sec"class="row">
    <div class="col-md-6"><div class="row"><p id="qw" class="center-block"><span class="btn btn-info btn-sm">LIVE RESUME</span></p> <span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-info btn-sm">VIEW<br> & <br>APPLY PROJECTS</span> </p><span class="icon">&#8594</span>
    <p id="qwt"class="center-block"><span class="btn btn-info btn-sm">SELECT<br>PROJECTS</span></p><span class="icon">&#8594</span>
      <p id="qwt"class="center-block"><span class="btn btn-info btn-sm">PROJECT<br> TEAM</span></p>
      <span id ="tyu"class="icon">&#8599</span>
      <span id="jkl"class="icon">&#8594</span>
      <span id="fgh"class="icon"> &#8600</span>
        
      </div>
      
  </div>
    <div class=" col-md-4"><div class="row"><p id="qwt"class="center-block"><span class="btn btn-info btn-sm">SUPPORT THE<br>PROJECTS</span></p><span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-info btn-sm">REVIEW<br> PROJECT</span></p>
        <span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-info btn-sm">IMPROVE LIVE<br> RESUME</span></p><span class="icon">&#8594</span>
      
      </div>
        
      
      
      </div>
    <div class="col-md-2">
      <div class="row"><p id="qwt" class="center-block"><span class="btn btn-info btn-sm">APPLY FOR <br>POSITIONS</span></p> </div>
      
      
      
    </div>
    
    
  </div>
<div id="third"class="row">
    <div class="col-md-5"><div class="row" id="inthree"><p id="qwo" class="center-block"><span class="btn btn-danger btn-sm">POST PROJECT</span></p> <span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-danger btn-sm">SELECT<br>PROFESSOR</span> </span></p><span id="hy"class="icon">&#8599</span></div>
  </div>
    <div class="col-md-5"><div id="inv"class="row"><p id="qwt"class="center-block"><span class="btn btn-danger btn-sm">SUPERVISE <br>PROJECTS</span></p><span class="icon">&#8594</span>
      
      <p id="qwt"class="center-block"><span class="btn btn-danger btn-sm">REVIEW<br> PROJECTS</span></p>
       
      
      </div>
        
      
      
      </div>
    
    
  </div>
  <div id="four"class="row">
    <div class=" col-md-5">
  </div>
    <div class=" col-md-7"><div id="in4"class="row"><p id="qwt"class="center-block"><span class="btn btn-warning btn-sm">POST <br>POSITIONS</span></p><span id="f1"class="icon"> &#11171</span><span id="f2"class="icon">&#11169</span>
      
      
      <p id="bt"class="center-block"><span class="btn btn-warning btn-sm">SEEK<br> CANDIDATES</span></p><span id="f3"class="icon"> &#11112</span>
      <p id="by1"class="center-block"><span class="btn btn-warning btn-sm">SELECT<br> APPLICANTS</span></p><span id="f4"class="icon"> &#11111</span>
      <p id="f5"class="center-block"><span class="btn btn-warning btn-sm">SCHEDULE<br>INTERVIEW </span></p>
       
      
      </div>
        
      
      
      </div>
    
    
  </div>
  

</div>
#main{
 
  width:100%;
  vertical-align:middle;
  margin-top:200px;
  
}


#fir{
  margin-top:100px;
  background:linear-gradient(to right, #5cb85c 1%, #f2f2f2 1%);
}
#four{
  
  background:linear-gradient(to right, #f0ad4e 1%, #f2f2f2 1%);
}
#sec{
  
  background:linear-gradient(to right, #5BC0DE 1%, #f2f2f2 1%);
}
#third{
  
  background:linear-gradient(to right, #d9534f 1%, #f2f2f2 1%);
}

.btn{
  margin-left:10px;
  margin-right:10px;
}

.icon{
  padding-top:15px;
  font-weight:bold;
  font-size:40px;
}
#qw{
  margin-top:35px;
}
#tyu{
  margin-top:-30px;
  margin-left:30px;
}

#fgh{
  margin-top:40px;
  margin-left:-60px;
}
#jkl{
  margin-top:2px;
}
#qwo{
  margin-top:35px;
  margin-left:28%;
}

#qwt{
  margin-top:25px;
  
}
#ert{
  margin-left:20px;
  margin-top:60px;
}
#bt{
  margin-top:-15px;
  margin-left:5px;
}
#by1{
  margin-top:60px;
  margin-left:-145px;
}
#f3{
  margin-top:-15px;
}
#f4{
  margin-top:15px;
}
#f5{
  padding-top:20px;
}
#in{
  
  margin-left:10%;
  padding-top:10%;
}
#inthree{
  padding-top:20px;
  padding-left:5%;
}
#hy{
  margin-top:-35px;
}
#inr{
  padding-top:26%;
}
#inv{
  padding-left:10%
}

#inp{
  margin-left:20%;
}
#in4{
  padding-top:40px;
  height:150px;
  margin-left:20%;
}

#f1{
  margin-top:-45px;
  margin-left:-20px;
}
#f2{
  margin-top:45px;
  margin-left:-35px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js