Using Bootstrap Grid, Why Can I Not Space Out My Divs? - css

Question

I'm working on my first web dev portfolio and am trying to incorporate the Bootstrap Grid system to the project links. I've searched through Bootstrap's documentation (v4.5), Stack Overflow, and just googling various searches to death. I've tried every solution I've found and am still getting nowhere. The closest I've come to a result is changing all three col-lg-4 to col-lg33. That did create the space, but then the padding looked super weird and it was more space than I needed. Any help would be super appreciated. I'm a but of a noob still.
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project"/>
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project"/>
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project"/>
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
#projects {
background: #3F3F44;
color: #f7f7f7;
font-family: 'Raleway', sans-serif;
height: 100vh;
}
#projects h2 {
text-shadow: 1px 1px #fdcb9e;
text-align: center;
padding: 60px;
}
.projects-grid {
background-color: #fdcb9e;
box-shadow: 5px 8px black;
border-radius: 10px;
padding: 1% 0;
}
.projects-grid:hover {
background-color: #cceabb;
box-shadow: 7px 10px black;
}
.projects-grid a {
text-decoration: none;
color: #3f3f44;
text-shadow: 1px 1px #cceabb;
}
.project-image {
height: 100%;
max-height: 170px;
width: 100%;
max-width: 300px;
border-radius: 10px;
border: 2px solid #cceabb;
display: flex;
margin: 0 auto;
}
.project-image:hover {
border: 2px solid #fdcb9e;
}
.project-title {
font-size: 1.5rem;
font-weight: 700;
padding-top: 8px;
padding-bottom: 4px;
margin: 0;
text-align: center;
}

Answer 1

Bootstrap is adding the column guttering as a 15px padding, by styling the layout there, you are also styling the padding that is the guttering, hence the project grid 'cards' are touching.
For this, to keep the guttering and to ensure nice even columns, I would style a nested div instead.
<div class="col-md-4">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
If the guttering is too large, you can change the sass variable (it's set to 30px by default) or you can use .no-gutters to remove all the guttering and add the padding manually to the nested divs.
<div class="row no-gutters">
<div class="col-md-4 p-2">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
</div>

Answer 2

I've created this link on Codepen to try understanding better the problem so that we can help you better:
https://codepen.io/maricaldas/pen/ExPKNzM
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project" />
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project" />
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
Do you mean you want a space separating the project-grid columns?
If so, the first thing we need to consider is that when we use 3 columns taking 4 spaces each, we're using the full grid, which is 12, and that's why we can't see spaces around those col-lg-4 columns.
Can you please elaborate a little bit more on the result you want to achieve?
Maybe a way to add that space among the columns while using col-lg-4 is to overwrite the bootstrap pre-set width, which is 33.33%.
#media (min-width: 992px) {
.col-lg-4 {
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
}
}