Bootstrap : Add a junction between div - css

Question

I'm trying to add a junction (a line) between 2 divs in the middle.
<div class="row">
<div class="col-xs-6 col-md-6">
<div style="background-color:#f39a6f;width:100%;height:100px;">
....1
</div>
</div>
<div class="col-xs-6 col-md-6">
<div style="background-color:#ffff00;width:100%;height:100px;">
....2
</div>
</div>
Thanks for help.

Answer 1

Hope this code will solve your problem.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row no-gutters">
<div class="col-md-3">
<div class="card bg-success">
<div class="card-body"></div>
</div>
</div>
<div class="col-md-2">
<hr>
</div>
<div class="col-md-3">
<div class="card bg-danger">
<div class="card-body"></div>
</div>
</div>
</div>

Answer 2

My idea is to have the junction (a line) always be the center of a row via absolute/relative positioning, with lower z-index than what those color blocks have so that the line is hidden behind the blocks but shown between the blocks.
The tricky part is accurately calculate the position of the junction line, due to the fact that bootstrap rows have their own paddings. That's why it's better to use SCSS so that you can read bootstrap default values for row and column settings, and calculate the junction line based on those.
But for demo purpose, I will stick with CSS and "hardcode" the pre-configured values from bootstrap.
HTML Structure
<div class="row junction-row">
<div class="col-6 col-sm-3">
<div class="block bg-primary"></div>
</div>
</div class="col-6 col-sm-4 offset-sm-5">
<div class="block bg-danger"></div>
</div>
</div>
CSS
.junction-row {
height: 6rem;
position: relative;
}
.junction-row::after {
content: '';
position: absolute;
background-color: var(--danger);
height: 5%;
// Default bootstrap row's padding is 1rem.
// Width = 100% - left padding of the row - right padding of the row
width: calc(100% - 2rem);
// Top = total height 100% - the height of the line, and then divide by 2
// to have the line stay in the center of the row.
top: calc((100% - 5%) / 2);
// Left = starting after the row's left padding
left: 1rem;
// Any value here, but it needs to be lower than what .block has
z-index: 1;
}
.block {
position: relative;
height: 6rem;
z-index: 2;
}
Result
demo: https://jsfiddle.net/davidliang2008/vknor3cz/32/

Answer 3

I don't believe you can have this and have your column sizes at 6 each. I can think of 2 ways. Make them 5 and use this. This comes from their documentation on the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="row justify-content-between">
<div class="col-5">
One of two columns
</div>
<div class="col-5">
One of two columns
</div>
</div>
Or if you don't mind that junction being static width then you could do this. Effectively making the junction width static and each side equal in the remaining width.
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col-auto" style="width:30px"></div>
<div class="col">
2 of 2
</div>
</div>