How to add space between content fields in Bootstrap

Question

Right now I have a string of three fields in Bootstrap as follows:

<div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> </div> 

where my custom CSS resizes the content fields and adds a border like this:

 .pathBoxMain { border: 5px solid black; padding: 10px 0px 0px 0px; height: 175px; } 

All rectangles are displayed next to each other with touching borders, and I'm trying to add some space between the fields to prevent this from happening. Everything that I tried (adjusting the width of the boxes, changing fields, adding empty columns between existing ones), everything changes the alignment of the fields so that they no longer fit the entire row.

Is there a way to add space between content fields while maintaining a centered box spacing?

Answer 1

 .pathBoxMain { border: 5px solid black; margin: 10px 0px 10px 0px; height: 175px; } 

The margin property, probably you are looking for

Answer 2

Use margin: top right bottom left . See the documentation so you need to add something like.

 margin: 10px 0 10px 0; 

This will add 10 pixels at the top and 10 pixels at the bottom.

 .pathBoxMain { border: 5px solid black; padding: 10px 0px 0px 0px; margin: 10px 0 10px 0; height: 175px; } 

Answer 3

Since bootstrap uses box-sizing: border-box , margin not included in the col-lg-4 width. However, you can override this width and add some margin for every second element in the line, for example:

 .col-lg-4{ width: 32% !important; } div:nth-of-type(3n+2){ margin-left: 2%; margin-right: 2%; } /* (32% width * 3 elements in a row) + 2% margin left and right = 100% width */ 

Bootply