<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-6"> <div class="box"> <div class="row"> </div> </div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="box"></div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="box"></div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="box"></div> </div> <div class="col-lg-4 col-md-4 col-6"> <div class="box"></div> </div> <div class="col-lg-4 col-md-3 col-6"> <div class="box"></div> </div> </div></div>

body{ background:#a5b5c5; background:lightblue !important; } .box { background: #fff; padding-bottom: 100%; } .col-lg-4 { margin-top: 30px !important; } .main_image{ height:100px; width:100px; border-radius:50%; }