<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm bg-info navbar-light border fixed-top"> <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> <div class="mt-5 pt-5"></div> <!------------ ONE COLUMN --------------> <div class="row"> <div class="col-md-12"> replacetexthere </div> </div> <!------------ ONE COLUMN CENTER--------------> <div class="row text-center"> <div class="col-md-12"> replacetexthere </div> </div> <!------------ TWO COLUMN --------------> <div class="row"> <div class="col-md-6"> replacetexthere </div> <div class="col-md-6"> replacetexthere </div> </div> <!------------ THREE COLUMN --------------> <div class="row"> <div class="col-md-4"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> </div> <!------------ FOUR COLUMN --------------> <div class="row"> <div class="col-md-3"> replacetexthere </div> <div class="col-md-3"> replacetexthere </div> <div class="col-md-3"> replacetexthere </div> <div class="col-md-3"> replacetexthere </div> </div> <!------------ SIX COLUMN --------------> <div class="row"> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> </div> <!------------ 4-8 COLUMN --------------> <div class="row"> <div class="col-md-4"> replacetexthere </div> <div class="col-md-8"> replacetexthere </div> </div> <!------------ 8-4 COLUMN --------------> <div class="row"> <div class="col-md-8"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> </div> <!------------ 3-9 COLUMN --------------> <div class="row"> <div class="col-md-3"> replacetexthere </div> <div class="col-md-9"> replacetexthere </div> </div> <!------------ 9-3 COLUMN --------------> <div class="row"> <div class="col-md-9"> replacetexthere </div> <div class="col-md-3"> replacetexthere </div> </div> <!------------ 3-3- 6 COLUMN --------------> <div class="row"> <div class="col-md-3"> replacetexthere </div> <div class="col-md-3"> replacetexthere </div> <div class="col-md-6"> replacetexthere </div> </div> <!------------ 3-6- 3 COLUMN --------------> <div class="row"> <div class="col-md-3"> replacetexthere </div> <div class="col-md-6"> replacetexthere </div> <div class="col-md-3"> replacetexthere </div> </div> <!------------ 2-2-2-6 COLUMN --------------> <div class="row"> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> <div class="col-md-2"> replacetexthere </div> <div class="col-md-6"> replacetexthere </div> </div> <!---*************------ NESTED COLUMNS --------------> <!------------ 6-6(Inside 6-6) --------------> <div class="row"> <div class="col-md-6"> replacetexthere </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> replacetexthere </div> </div> <div class="row"> <div class="col-md-6"> replacetexthere </div> <div class="col-md-6"> replacetexthere </div> </div> </div> </div> <!------------ 6(Inside 6-6)- 6 --------------> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> replacetexthere </div> </div> <div class="row"> <div class="col-md-6"> replacetexthere </div> <div class="col-md-6"> replacetexthere </div> </div> </div> <div class="col-md-6"> replacetexthere </div> </div> <!------------ 6-6(Inside 4-4-4) --------------> <div class="row"> <div class="col-md-6"> replacetexthere </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> replacetexthere </div> </div> <div class="row"> <div class="col-md-4"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> </div> </div> </div> <!------------ 6(Inside 4-4-4)- 6 --------------> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> replacetexthere </div> </div> <div class="row"> <div class="col-md-4"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> <div class="col-md-4"> replacetexthere </div> </div> </div> <div class="col-md-6"> replacetexthere </div> </div> <!------------ CARD COLUMN WITH IMAGE --------------> <div class="row"> <div class="col-md-4"> <div class="card"> <img class="card-img-top" src="#" alt=" "> <div class="card-body"> replacetexthere </div> </div> </div> </div> <!---------- SECTION WITH CONTAINER -----------------> <section class="aboutus py-5" id="aboutus"> <div class="container"> </div> </section> <section class="services py-5" id="services"> <div class="container"> </div> </section> <section class="testimonial py-5" id="testimonial"> <div class="container"> </div> </section> <section class="slider py-5" id="slider"> <div class="container"> </div> </section> <section class="features py-5" id="features"> <div class="container"> </div> </section> <section class="team py-5" id="team"> <div class="container"> </div> </section> <section class="blog py-5" id="blog"> <div class="container"> </div> </section> <section class="pricing py-5" id="pricing"> <div class="container"> </div> </section> <section class="counter py-5" id="counter"> <div class="container"> </div> </section> <section class="cta py-5" id="cta"> <div class="container"> </div> </section> <section class="map py-5" id="map"> <div class="container"> </div> </section> <section class="brands py-5" id="brands"> <div class="container"> </div> </section> <section class="contactus py-5" id="contactus"> <div class="container"> </div> </section> <section class="footer py-5" id="footer"> <div class="container"> </div> </section> <section class="copyright py-2" id="copyright"> <div class="container"> </div> </section> <!---------- FORM SECTION ----------------> <form> <div class="form-row"> <div class="form-group col-md-6"> type input group here </div> <div class="form-group col-md-6"> type input group here </div> </div> </form>

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

Home Aboutus Services testimonial slider features team blog pricing counter cta map brands contactus footer copyright