bootstrap four box layout with margin


I want bootstrap reponsive layout with four center aligned box with image and text in each. Refer to the attached image

I tried the following but the boxes do not have space in between and its not showing properly.

<div class="row  justify-content-center">
                        <div class="col-4 colMenu">
                             <h3>SAMPLE TEXT</h3>
                            <img src="./assets/img/sample.png"
class="menuImg">
                        </div>
                        <div class="col-4 colMenu ">
                                <h3 >SAMPLE TEXT</h3>
                               <img src="./assets/img/sample.png" class="menuImg">
                           </div>

                        <div class="w-100"></div>

                        <div class="col-4 colMenu ">
                        <h3>SAMPLE TEXT</h3>
                        <img src="./assets/img/sample.png" class="menuImg">
                           </div>
                           <div class="col-4 colMenu">
                                <h3 >SAMPLE TEXT</h3>
                               <img src="./assets/img/sample.png" class="menuImg">
                           </div>
                      </div>



.colMenu{
      border-style: solid;
      border-width: 3px;
      border-color: #000000;
  }

  .menuImg{
    height: 40%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

enter image description here


Answers:


You need to add margin each box, since border ignores padding.

.colMenu {
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  margin: 0 0 10px 10px;
}