How can I add a padding/gap between my cards in responsive bootstrap rows on smaller screens?-CodePudding

I am new to this so even the dumbest thing would be welcome.

Here there is ample padding as defined in bootstrap as padding-right and padding-left

When I make my display smaller one card goes below and there is no space between the two cards.

           <div >
              <div >
                <div >
                  <img
                    src="..." alt="...">
                  <div >
                    <p >We got some text here</p>
                  </div>
                </div>
              </div>
              <div >
                <div >
                  <img
                    src="..."
                     alt="...">
                  <div >
                    <p >We have text here</p>
                  </div>
                </div>
              </div>
              <div >
                <div >
                  <img
                    src="..."
                     alt="...">
                  <div >
                    <p >We have text here</p>
                  </div>
                </div>
              </div>
            </div>

The HTML is pretty basic. The CSS code

.illustration-img{
padding: 0 5px 0;
}

CodePudding user response：

You can add mb-3 class to col-lg-4 class tags. (mb-1...mb-5)

<div >