<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="navbar-top bg-dark text-white d-none d-md-block "> <div class="container"> <div class="row py-1 "> <div class="col-md-4 col-sm-6 col-xs-12 "> <p class="no-mp"> Welcome To <strong>Osahan</strong> Property! </p> </div> <div class="col-md-8 col-sm-6 col-xs-12 text-right"> <ul class="list-inline no-mp"> <a href="#" class="text-light"><li class="list-inline-item pl-4 pr-3 "> info@oproperty.com </li></a> <a href="#" class="text-light"><li class="list-inline-item border-left pl-2 pr-2 "> +1-123-456-7890 </li></a> <a href="#" class="text-light"><li class="list-inline-item border-left pl-2 pr-2"> Contact Us </li></a> <a href="#" class="text-light"><li class="list-inline-item border-left pl-2 ">DOWNLOAD APP </li></a> </ul> </div> </div> </div> </div> <nav class="navbar navbar-expand-sm border "> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:70px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">How it works</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reference</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Employer</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> More </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Company</a> <a class="dropdown-item" href="#">Latest </a> <a class="dropdown-item" href="#">Popular </a> <a class="dropdown-item" href="#">Upcoming </a> <a class="dropdown-item" href="#">Offers </a> </div> </li> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search "> <button class="btn btn-success" type="submit"><i class="fa fa-search"></i> Search</button> </form> <button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal">Login</button> <button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal">Refer Me</button> </ul> </div> </div> </nav>

.no-mp {margin:0px;padding:0px;} .navbar { background-color: #ea3e00; } .navbar .navbar-brand { color: #ecf0f1; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: #eaeaea; } .navbar .navbar-text { color: #ecf0f1; } .navbar .navbar-text a { color: #eaeaea; } .navbar .navbar-text a:hover, .navbar .navbar-text a:focus { color: #eaeaea; } .navbar .navbar-nav .nav-link { color: #ecf0f1; border-radius: .25rem; margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { color: #eaeaea; } .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus { color: #eaeaea; background-color: #d93a00; } .navbar .navbar-toggle { border-color: #d93a00; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color: #d93a00; } .navbar .navbar-toggle .navbar-toggler-icon { color: #ecf0f1; } .navbar .navbar-collapse, .navbar .navbar-form { border-color: #ecf0f1; } .navbar .navbar-link { color: #ecf0f1; } .navbar .navbar-link:hover { color: #eaeaea; } @media (max-width: 575px) { .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #eaeaea; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #eaeaea; background-color: #d93a00; } } @media (max-width: 767px) { .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #eaeaea; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #eaeaea; background-color: #d93a00; } } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #eaeaea; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #eaeaea; background-color: #d93a00; } } @media (max-width: 1199px) { .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #eaeaea; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #eaeaea; background-color: #d93a00; } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #eaeaea; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #eaeaea; background-color: #d93a00; } <section class="aboutus py-5" id="aboutus"> <div class="container"> </div> </section> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 ">Col 1</div> <div class="col-md-3 col-sm-6 col-xs-12">Col 2</div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12 ">Col 3</div> <div class="col-md-3 col-sm-6 col-xs-12">Col 4</div> </div>

https://www.codeply.com/go/JVP2nxfv0p/bootstrap-4-forms https://bootstrapformbuilder.com/ https://www.w3schools.com/bootstrap4/default.asp https://getbootstrap.com/docs/4.0/components/alerts/ ----- Navigation ----- https://bootsnipp.com/user/snippets/O5dKl <button type="button" class="btn btn-primary">Get More Details</button> <div class="col-md-6 offset-md-3">