<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 ----------> <!--col gap 40px --> <div class="mb-20 text-center"><h3>Space between columns 50px</h3></div> <div class="container col-gap-50"> <div class="row text-center"> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> </div> </div> <!--col gap 10px --> <div class="mb-20 text-center"><h3>Space between columns 10px</h3></div> <div class="container col-gap-10 "> <div class="row text-center"> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> </div> </div> <!--col gap 80px --> <div class="mb-20 text-center"><h3>Space between columns 80px</h3></div> <div class="container col-gap-80"> <div class="row text-center"> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> <div class="col-md-4"> <div class="wrap"> <h2>Hallo wereld.</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <a href="#">Button</a> </div> </div> </div> </div>

/*####################### gap css ####################*/ /*col gap 5px */ .col-gap-5.container div[class*="col"] { padding-left: 2.5px !important; padding-right: 2.5px !important; } .col-gap-5.container > .row { margin-left: -17.px !important; margin-right: -17.5px !important; } /*col gap 10px */ .col-gap-10.container div[class*="col"] { padding-left: 5px !important; padding-right: 5px !important; } .col-gap-10.container > .row { margin-left: -20px !important; margin-right: -20px !important; } /*col gap 15px */ .col-gap-15.container div[class*="col"] { padding-left: 7.5px !important; padding-right: 7.5px !important; } .col-gap-15.container > .row { margin-left: -22.5px !important; margin-right: -22.5px !important; } /*col gap 20px */ .col-gap-20.container div[class*="col"] { padding-left: 10px !important; padding-right: 10px !important; } .col-gap-20.container > .row { margin-left: -25px !important; margin-right: -25px !important; } /*col gap 25px */ .col-gap-25.container div[class*="col"] { padding-left: 12.5px !important; padding-right: 12.5px !important; } .col-gap-25.container > .row { margin-left: -27.5px !important; margin-right: -27.5px !important; } /*col gap 30px */ .col-gap-30.container div[class*="col"] { padding-left: 15px !important; padding-right: 15px !important; } .col-gap-30.container > .row { margin-left: -30px !important; margin-right: -30px !important; } /*col gap 35px */ .col-gap-35.container div[class*="col"] { padding-left: 17.5px !important; padding-right: 17.5px !important; } .col-gap-35.container > .row { margin-left: -32.5px !important; margin-right: -32.5px !important; } /*col gap 40px */ .col-gap-40.container div[class*="col"] { padding-left: 20px !important; padding-right: 20px !important; } .col-gap-40.container > .row { margin-left: -35px !important; margin-right: -35px !important; } /*col gap 45px */ .col-gap-45.container div[class*="col"]{ padding-left: 22.5px !important; padding-right: 22.5px !important; } .col-gap-45.container > .row { margin-left: -37.5px !important; margin-right: -37.5px !important; } /*col gap 50px */ .col-gap-50.container div[class*="col"]{ padding-left: 25px !important; padding-right: 25px !important; } .col-gap-50.container > .row { margin-left: -40px !important; margin-right: -40px !important; } /*col gap 60px */ .col-gap-60.container div[class*="col"]{ padding-left: 30px !important; padding-right: 30px !important; } .col-gap-60.container > .row { margin-left: -45px !important; margin-right: -45px !important; } /*col gap 70px */ .col-gap-70.container div[class*="col"]{ padding-left: 35px !important; padding-right: 35px !important; } .col-gap-70.container > .row { margin-left: -50px !important; margin-right: -50px !important; } /*col gap 80px */ .col-gap-80.container div[class*="col"]{ padding-left: 40px !important; padding-right: 40px !important; } .col-gap-80.container > .row { margin-left: -55px !important; margin-right: -55px !important; } /*col gap 90px */ .col-gap-90.container div[class*="col"]{ padding-left: 45px !important; padding-right: 45px !important; } .col-gap-90.container > .row { margin-left: -60px !important; margin-right: -60px !important; } /*col gap 100px */ .col-gap-100.container div[class*="col"]{ padding-left: 50px !important; padding-right: 50px !important; } .col-gap-100.container > .row { margin-left: -65px !important; margin-right: -65px !important; } /*################ Optional Style ##################*/ body{background:#f9f9f9;} .row .col-md-4 .wrap{color:#555;padding:20px 15px;} .row .col-md-4 .wrap h2{margin:0px 0px 5px} .row .col-md-4 .wrap a{background:#fff;padding:7px 30px;display:inline-block; margin:0px 0px 10px;} .container{margin-bottom:50px;} .mb-20{margin-bottom:20px;} img{max-width:100%;} .row .col-md-4 .wrap{border-bottom: 1px solid #CFCFCF; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 3px; border-color: rgb(119, 119, 119) rgb(119, 119, 119) #03A8F4 rgb(119, 119, 119); border-style: none none solid none; border-width: 0 0 5px 0; background:#fff; } .row .col-md-4 .wrap a{padding: 7px 20px; border-radius: 2px;background-color: #03a9f4; color: #ffffff;line-height:1.3;}