Recently, I encountered an issue with columns in Bootstrap 4. Despite writing the code correctly, there appears to be no space between the 3 blocks displayed in the browser. Each block consists of 4 columns, but they seem to be directly adjacent to each other without any margin.
My attempt to resolve this involved tweaking the padding in Bootstrap 4, which unfortunately exacerbated the situation. However, for a live demonstration and potential editing, I have linked the code on CodePen. Feel free to check it out here: https://codepen.io/PlatoCode/pen/erWaXg
<section class="jobs">
<div class="container">
<div class="row">
<div class="col-md-4 single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
<div class="col-md-4 single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
<div class="col-md-4 single_job">
<span style="color: rgb(232, 61, 98);">toronto, canada</span>
<h5>Web Designer</h5>
<p>Development Team</p>
<a href="#" class="btn" style="background-color: rgb(232,61,98);">Apply Now</a>
</div>
</div>
</div>
CSS :-
/*----- Custom Styling ----*/
html { -webkit-font-smoothing: antialiased;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
color: #1c1c1c;
height: 100%;
min-height: 100%;
}
/* Update Font Styles */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
line-height: 1;
color: #1c1c1c;
margin-top: 0
}
/* Adjust Headings Sizes */
h1 { font-size: 2.813em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.438em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1.125em; }
/* List Styling */
ul, ol { list-style: none; line-height: 1.85714286em; }
/* Paragraph Styling */
p {
font-family: 'Roboto';
font-size: 0.938em;
color: #889094;
}
/* Button Styling */
.btn {
display: inline-block;
background-color: #50b1fc;
text-align: center;
cursor: pointer;
color: #fff;
border-radius: 38px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
overflow: hidden;
position: relative;
z-index: 0;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
text-decoration: none;
text-shadow: none;
padding: 10px 30px;
}
.btn:hover { color: white; }
.btn2 {
display: inline-block;
background-color: #fff;
text-align: center;
cursor: pointer;
color: #010d2f;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
overflow: hidden;
position: relative;
z-index: 0;
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
text-decoration: none;
text-shadow: none;
padding: 10px 30px;
}
.btn2:hover { color: #010d2f; }
/* Job Postings */
.single_job {
background-color: #fff;
-webkit-box-shadow: 0 0 38px rgba(0,0,0,.08);
-moz-box-shadow: 0 0 38px rgba(0,0,0,.08);
box-shadow: 0 0 38px rgba(0,0,0,.08);
padding: 35px 25px;
}
.single_job p { margin-bottom: 25px; }
.single_job h5 { margin-top: 5px; }