Using Bootstrap 4 Beta 3, I have set up a col-4 | col-8 layout. The first column contains an image, while the second column should contain both an image and text side by side.
Currently, I have split the second column into another row with two columns. I need these two columns to stick together without any gutters (e.g. using the class no-gutters). However, when I remove the gutters, the image inside the second column becomes larger than the one in the first column. I can't remove all gutters from all three columns because there should still be a margin between the main column 1 and column 2.
You can view the code on Codepen: https://codepen.io/SchweizerSchoggi/pen/mpjgLP
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für <a href="#">regionalen</a> und <a href="#">nationalen</a> Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen <a href="#">Auto</a> und <a href="#">Service</a>.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>