<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 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 ----------> <div class="container section"> <div class="row"> <div class="col-md-6"> <h3> Lorem ipsum, or lipsum </h3> <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p> </div> <div class="col-md-6"> <img src="https://preview.ibb.co/erdq8p/Employee-1.jpg" alt=""/> </div> </div> <div class="row"> <div class="col-md-6"> <img src="https://preview.ibb.co/cu76g9/Employee-2.jpg" alt=""/> </div> <div class="col-md-6"> <h3> Lorem ipsum, or lipsum </h3> <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p> </div> </div> </div>

.section .row{ margin-top: 7%; margin-bottom: 10%; } .section .row .col-md-6{ background: #f5f5f5; margin-right: -2%; padding: 5%; } .section h3{ color: #004085; } .section p{ margin-top: 10%; color: #545b62; } .section img { width: 100%; }