Adding space between bootstrap columns

Hey guys,

I am having trouble separating the three columns in my “project section”. I figured I could add “space-around” to “#projects-columns” but it won’t work. Any ideas?

https://codepen.io/jmrtinz15/pen/LYPZZQR?editors=1010

justify-content: space-around is a css property for flex items. Bootstrap doesn’t work like that as you already have pre-defined column sizes.

In Bootstrap, you’d need to do the following to add (small) amounts of spacing.

<div class="row">
    <div class="col-4">
       <div class="item"> Content here </div>
    </div>
</div>

Then in your css, you can do this:

.item { 
   padding: 20px;
   border: 1px solid red;
}

However, if you wanted to take the custom route, you could do something like this:

<div class="row"
   <div class="item"> Content here </div>
</div>
.row {
    display: flex;
    justify-content: space-around;
}
.item { 
   border: 1px solid red;
   width: 30%;
}

No need for padding here, as the items are 30% width of the container. justify-content: space-around makes sure they are positioned away from each other. It saves you adding an extra div element.

Did not know that. Used the first method you mentioned above and it worked. Thank you!