My goal is to design something like this: I want to have a single-color strip that extends over three columns:
https://i.sstatic.net/1XfAu.png
What I am aiming for is a layout where the grey line overlaps columns 2 and 3.
/* added by editor for demo purpose only */
.row > div {
height: 80vh;
}
.row :nth-child(1) {
background-color: red;
}
.row :nth-child(2) {
background-color: green;
}
.row :nth-child(3) {
background-color: blue;
}
.row :nth-child(4) {
background-color: grey;
}<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>I'm struggling to make column 4 overlap with columns 2 and 3.