<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
/* SECTION WITH LINES */
.section > div {
border: 2px solid rgba(0,0,0,0.1);
padding: .3em .8em;
margin-top: 2em;
position: relative;
text-transform: uppercase;
font-size: 1.2em;
color: #555;
font-weight: 600;
text-align: center;
}
.section > div:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
border-bottom: 2px solid;
width: 90%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
.section > div:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
border-bottom: 2px solid;
width: 90%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
/* HALF SECTION WITH LINES */
.h-section > span {
border: 2px solid rgba(0,0,0,0.1);
padding: .3em .8em;
margin-top: 2em;
margin-bottom: 2em;
position: relative;
text-transform: uppercase;
font-size: 1.3em;
color: #555;
font-weight: 600;
z-index: 1;
text-align: center;
float: left;
height: 50px;
}
.h-section > span:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
border-bottom: 2px solid;
width: 40%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
.h-section > span:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
border-bottom: 2px solid;
width: 40%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
</style>
<div class="container">
<div class="d-flex justify-content-center section col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-xs-6">
<div>What service do you require?</div>
</div>
<div class="container">
<div class="row">
<div class="d-flex-lg justify-content-between">
<div class="d-flex justify-content-center col-lg-6 h-section"><span>What we offer</span></div>
<div class="justify-content-center col-lg-6">
Blah
</div>
<div class="d-flex justify-content-center col-lg-6 h-section"><span>Our benefits</span></div>
<div class="d-flex justify-content-center col-lg-6">
Blah 2
</div>
</div>
</div>
</div>
</div>
</div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
/* HALF SECTION WITH LINES */
.h-section > span {
border: 2px solid rgba(0,0,0,0.1);
padding: .3em .8em;
margin-top: 2em;
margin-bottom: 2em;
position: relative;
text-transform: uppercase;
font-size: 1.3em;
color: #555;
font-weight: 600;
z-index: 1;
text-align: center;
float: left;
height: 50px;
}
.h-section > span:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
border-bottom: 2px solid;
width: 40%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
.h-section > span:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
border-bottom: 2px solid;
width: 40%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
</style>
<div class="container">
<div class="row">
<div class="d-flex-lg justify-content-between">
<div class="d-flex justify-content-center col-lg-6 h-section"><span>What we offer</span></div>
<div class="justify-content-center col-lg-6">
Blah
</div>
<div class="d-flex justify-content-center col-lg-6 h-section"><span>Our benefits</span></div>
<div class="d-flex justify-content-center col-lg-6">
Blah 2
</div>
</div>
</div>
</div>
</div>
Currently it works as expected on smaller displays but on larger displays, both rows are on different lines. When I try to get them on the same line, it breaks it working correctly on smaller displays
I added the style and my question contains more code so this is adding more text so that it will post. Thanks
The columns show besides eachother in large screen and on top of eachother in a small screen.
There were some mistakes in your HTML/Bootstrap, most notably that you were trying to have more than 12 col units in one row.
Here is the solution:
CSS:
.column_title {
border: 2px solid rgba(0,0,0,0.1);
padding: .3em .8em;
margin-top: 2em;
margin-bottom: 2em;
position: relative;
text-transform: uppercase;
font-size: 1.3em;
color: #555;
font-weight: 600;
z-index: 1;
text-align: center;
float: left;
height: 50px;
}
.column_title:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
border-bottom: 2px solid;
width: 40%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
.column_title:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
border-bottom: 2px solid;
width: 40%;
margin: 0 20px;
color: rgba(0,0,0,0.1);
}
.column_text {
float:left;
clear:left;
}
HTML:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="column_title">What we offer</div>
<div class="column_text">Blah 1</div>
</div>
<div class="col-lg-6">
<div class="column_title">Our benefits</div>
<div class="column_text">Blah 2</div>
</div>
</div>
</div>
Good luck and let me know how it turned out!