<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 ----------> <style> .row{ width: 600px; height: 300px; } .row .col-6:first-child { border: 1px dashed rgb(166, 191, 236); border-radius: 5px; height: 300px } .row .col-6:nth-child(2){ padding: 40px 0; } .row:nth-child(2n + 1) .col-6:first-child{ border-right: none; border-bottom: none; border-top-right-radius: 0; } .row:nth-child(2n) .col-6:first-child{ border-left: none; border-bottom: none; border-top-left-radius: 0; margin-left: 5px; padding: 30px } .row:nth-child(2n + 1) .col-6:first-child:after{ content: ""; width: 20px; height: 20px; position: absolute; background: #e27d39; left: -10px; top: 40px; border-radius: 50%; } .row:nth-child(2n + 1) .col-6:first-child:before{ content: ""; width: 40px; height: 40px; position: absolute; background: #eb9; top: 30px; left: -20px; border-radius: 50%; opacity: 0.6 } .row:nth-child(2n + 3) .col-6:first-child:after{ top: 140px; } .row:nth-child(2n + 3) .col-6:first-child:before{ top: 130px; } .row:nth-child(2n) .col-6:first-child:after{ content: ""; width: 20px; height: 20px; position: absolute; background: #e27d39; right: -10px; top: 140px; border-radius: 50%; } .row:nth-child(2n) .col-6:first-child:before{ content: ""; width: 40px; height: 40px; position: absolute; background: #eb9; top: 130px; right: -20px; border-radius: 50%; opacity: 0.6 } .row:nth-child(2n + 4) .col-6:first-child:after{ top: 40px; } .row:nth-child(2n + 4) .col-6:first-child:before{ top: 30px; } .x{ border-radius: 20px } </style> <div style=" width: 100vw; display: flex; justify-content: center; align-items: center; "> <div style="width: 600px; margin: 50px"><div class="row"> <div class="col-6"></div> <div class="col-6"> <div class="x" style="width: 100%; height: 100%; background: #cecece"></div> </div> </div> <div class="row"> <div class="col-6"> <div class="x" style="width: 100%; height: 100%; background: #cecece"></div> </div> <div class="col-6"></div> </div> <div class="row"> <div class="col-6"></div> <div class="col-6"> <div class="x" style="width: 100%; height: 100%; background: #cecece"></div> </div> </div> <div class="row"> <div class="col-6"> <div class="x" style="width: 100%; height: 100%; background: #cecece"></div> </div> <div class="col-6"></div> </div> </div> </div>