<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!--Top Head Bar--> <div class="container-fluid"> <div class="row"> <div class="col-md-4 social-icon"> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> <i class="fab fa-youtube"></i> </div> <div class="col-md-4"> </div> <div class="col-md-4 mt-1 mb-1"> <button type="button" class="btn btn-warning btn-sm text-white" style="width: 100px;">Login<i class="fas fa-arrow-alt-circle-right"></i></button> <button type="button" class="btn btn-warning btn-sm text-white" style="width: 100px;">Register<i class="fas fa-arrow-alt-circle-right"></i></button> <button type="button" class="btn btn-warning btn-sm text-white" style="width: 120px;">Online Apply<i class="fas fa-arrow-alt-circle-right"></i></button> </div> </div> </div> <!--Top Head Bar--> <!--Responsive Navigation Bar Example--> <nav class="navbar navbar-expand-md bg-primary navbar-dark"> <!--you can put your logo here--> <a class="navbar-brand" href="#">Navbar Logo</a> <!--you can put your logo here--> <!--Toggler Section For The Mobile View--> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcollapse"> <span class="navbar-toggler-icon"></span> </button> <!--Toggler Section For The Mobile View--> <!--Navbar item list for the menu--> <div class="collapse navbar-collapse justify-content-center" id="navbarcollapse"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link">Home 1</a> </li> <li class="nav-item"> <a class="nav-link">Home 2</a> </li> <li class="nav-item"> <a class="nav-link">Home 3</a> </li> <li class="nav-item"> <a class="nav-link">Home 4</a> </li> <li class="nav-item"> <a class="nav-link">Home 5</a> </li> <li class="nav-item"> <a class="nav-link">Home 6</a> </li> <li class="nav-item"> <a class="nav-link">Home 7</a> </li> <li class="nav-item"> <a class="nav-link">Home 8</a> </li> </ul> </div> <!--Navbar item list for the menu--> </nav> <!--Responsive Navigation Bar Example-->

.navbar-nav>li { padding-left: 30px;} .fab { font-size: 16px; padding: 10px; color: #676767;} .fa-arrow-alt-circle-right { padding-left: 8px;} @media)(max-width:640px){ .social-icon { text-align: center;}}