Extend an element beyond the bootstrap container

Question

I\'m currently working on one of mockups with using Bootstrap 4 and there\'s one uncommon element inside the container, which background is extending beyond container. Not s

Answer 1

Basically, this has already been answered, but I will answer since Bootstrap 4 flexbox is different than the other 3.x answer.

It can be done with pseudo element that extends outside the column:

https://www.codeply.com/go/tXGn5pdD4A

.bg-colored:before {
    right: -999em;
    background:  #0b3b52;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}