Is there a way to make a div inside a column extend to the edge of the viewport without using a fluid container? The "extended block" must remain in the markup due to CMS limitations. Any suggestions?
https://i.sstatic.net/vishD.png
https://codepen.io/mwmd/pen/eLPxOX
<div class="container">
<div class="row">
<div class="col-sm-7">
<p>How can I get that div to extend to viewport right while maintaining its left edge to the Bootstrap column?</p>
</div>
<div class="col-sm-5">
<div class="extend-me">
<img src="https://via.placeholder.com/350x150"/>
</div>
</div>
</div>
</div>
.container {
background-color: #999;
}
.extend-me {
background-color: darkred;
height: 300px;
}
.extend-me img {
object-fit: cover;
width: 100%;
height: 300px;
}
Not answered by Extend an element beyond the bootstrap container due to usage of a pseudo element.
Not answered by Extend bootstrap row outside the container because it only works on a 50% 50% split.