<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-light fixed-top navbar-light border"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> </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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> New </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Find New Cars</a> <a class="dropdown-item" href="#">Latest Cars</a> <a class="dropdown-item" href="#">Popular Cars</a> <a class="dropdown-item" href="#">Upcoming Cars</a> <a class="dropdown-item" href="#">Offers & Discounts</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Used </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Find Used Cars</a> <a class="dropdown-item" href="#">Find by Brand</a> <a class="dropdown-item" href="#">Find by Location</a> <a class="dropdown-item" href="#">Upcoming Cars</a> <a class="dropdown-item" href="#">Offers & Discounts</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Sell</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Compare</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> News & Reviews </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Car News</a> <a class="dropdown-item" href="#">Car Reviews</a> <a class="dropdown-item" href="#">Car Videos</a> <a class="dropdown-item" href="#">Write Review</a> </div> </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="#">Car Loan</a> <a class="dropdown-item" href="#">EMI Calculator</a> <a class="dropdown-item" href="#">Car Insurance</a> <a class="dropdown-item" href="#">Ask Question</a> </div> </li> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search Cars"> <button class="btn btn-success" type="submit"><i class="fa fa-search"></i> Search</button> </form> </ul> </div> </div> </nav> <section class="top-nav" id="top-nav"> <div class="container"> </div> </section> <section class="banner py-5" id="banner"> <div class="container"> </div> </section> <section class="latest py-5" id="latest"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2>Latest Properties</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </section> <section class="citywise py-5" id="citywise"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2>Property By City</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </section> <section class="testimonial py-5" id="testimonial"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2>Testimonials</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </section> <section class="blogs py-5" id="blogs"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2>Blogs We Wrote For You</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 "> <div class="card"> <img class="card-img-top" src="https://askbootstrap.com/preview/osahan-property/img/blog/1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div> </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> </div> </section> <section class="cta border py-5" id="cta"> <div class="container"> <div class="row text-center"> <div class="col-md-6 offset-md-3"> <h2>Join our professional team & agents to start selling your house</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <button type="button" class="btn btn-primary">Contact Us</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> </div> </div> </div> </section> <section class="footer py-5 border" id="footer"> <div class="container py-3"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 "> <img class="pb-4"src="https://askbootstrap.com/preview/osahan-property/img/logo.png"> <p class="">86 Petersham town, New South wales Waedll Steet, Australia PA 6550</p> <ul class="list-unstyled"> <li>+61 525 240 310</li> <li>iamosahan@gmail.com</li> <li>www.askbootstrap.com</li> </ul> </div> <div class="col-md-9 col-sm-6 col-xs-12 "> <div class="row"> <div class="col-md-3"> <h6 class="pb-2">OUR PROPERTIES </h6> <ul class="list-unstyled"> <a href="#"><li> Single Story</li></a> <a href="#"><li> Double Story</li></a> <a href="#"><li> Triple Story</li></a> <a href="#"><li> Resort </li></a> <a href="#"><li> Homes in Hawai</li></a> <a href="#"><li> Palace</li></a> </ul> </div> <div class="col-md-3"> <h6 class="pb-2">QUICK LINKS </h6> <ul class="list-unstyled"> <a href="#"><li> Single Story</li></a> <a href="#"><li> Double Story</li></a> <a href="#"><li> Triple Story</li></a> <a href="#"><li> Resort </li></a> <a href="#"><li> Homes in Hawai</li></a> <a href="#"><li> Palace</li></a> </ul> </div> <div class="col-md-3"> <h6 class="pb-2">ABOUT OP </h6> <ul class="list-unstyled"> <a href="#"><li> Single Story</li></a> <a href="#"><li> Double Story</li></a> <a href="#"><li> Triple Story</li></a> <a href="#"><li> Resort </li></a> <a href="#"><li> Homes in Hawai</li></a> <a href="#"><li> Palace</li></a> </ul> </div> <div class="col-md-3"> <h6 class="pb-2">NEWSLETTER </h6> <small> Get the most recent updates from our site and be updated your self...GET IN TOUCH</small> <div class="social-icons pt-3"> <ul class="list-inline list-unstyled"> <a href="#"><li class="list-inline-item"><i class="fa fa-facebook-square fa-2x text-primary"></i></li> </a> <a href="#"><li class="list-inline-item"><i class="fa fa-twitter-square fa-2x text-info"></i></li> </a> <a href="#"><li class="list-inline-item"><i class="fa fa-youtube-play fa-2x text-danger"></i></i></li> </a> <a href="#"><li class="list-inline-item"><i class="fa fa-google-plus-square fa-2x text-danger"></i></li> </a> </ul> </div> </div> </div> </div> </div> </div> </section> <section class="copyright bg-light py-2" id="copyright"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <small>© Copyright 2018 Osahan Property. All Rights Reserved</small></br> <small> Made with by Ask Bootstrap </small> </div> </div> </div> </section>

.footer a {line-height:28px; color:#696969;font-size:15px;} <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> ,____ main content structure layout _________ <section class="main-content py-5 mb-5" id="main-content"> <div class="container"> <div class="row"> <div class="col-md-8 "> <div class="card-body bg-light border"> column8 </div> </div> <div class="col-md-4 "> <div class="card bg-light"> <div class="card-body"> column4 </div> </div> </div> </div> </div> </section>

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