Row overlapping parent
by Oliver Tušla
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="newWrap">
<span class="h4">Plán akcí na květen <span class="font-weight-light">(02.05.2018)</span></span>
<div class="row newDescription">
<div class="col-4 newImgWrap">
<img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&h=300&w=300">
</div>
<div class="col-8">
</div>
</div>
</div>
CSS
.newWrap {
padding: 0.5rem;
}
.newDescription {
height: 150px;
}
.newDescription img {
height: 100%;
position: relative;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.newImgWrap {
overflow: hidden;
position: relative;
height: 100%;
}