<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"> <section class="aboutus bg-dark text-white py-5" id="aboutus"> <div class="container py-5 my-5"> <div class="row"> <div class="col-md-8 col-sm-6 col-xs-12 "> <div class="pb-3"></div> <h2>Create amazing landing page with globing template</h2> <div class="py-2"></div> <p>It is a long established fact that a reader will be of a page when established fact looking at its layout. Maecenas class semper class semper sollicitudin lectus lorem iaculis imperdiet aliquam.</p> <div class="py-2"></div> <button type="button" class="btn btn-outline-light">Get More Details</button> </div> <div class="clearfix visible-sm"></div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="card bg-danger"> <div class="card-body"> <form action="/action_page.php"> <div class="form-group"> <div class="input-group-addon"> <i class="fa fa-address-card"></i> </div> <input type="email" class="form-control" id="email" placeholder="User ID"> </div> <div class="form-group"> <input type="password" class="form-control" id="pwd" placeholder="Password"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </div> </section> <section class="aboutus py-5" id="aboutus"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="http://themesbrand.com/globing/images/mockup2.png"> </div> <div class="col-md-6"> <div class="pb-5"></div> <h2>This is Improve Your Marketing business</h2> <div class="py-2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud .</p> <div class="py-2"></div> <button type="button" class="btn btn-primary">Get More Details</button> </div> </div> </div> </section> <section class="aboutus2 bg-light py-5" id="aboutus2"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="pb-5 mt-5"></div> <h2>This is Improve Your Marketing business</h2> <div class="py-2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud .</p> <div class="py-2"></div> <button type="button" class="btn btn-primary">Get More Details</button> </div> <div class="col-md-6"> <img src="http://themesbrand.com/globing/images/mockup1.png"> </div> </div> </div> </section>

img {width:100%;} <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> <section class="aboutus py-5" id="aboutus"> <div class="container"> </div> </section>

<button type="button" class="btn btn-primary">Get More Details</button> <button type="button" class="btn btn-outline-success">Success</button> <div class="col-md-6 offset-md-3">