Bootstrap 4 row overlapping its parent

Asked May 30 '18 at 19:15

Active May 30 '18 at 19:15

Viewed 17 times

I'm trying to figure out why is row overlapping its parent.

Fiddle with the prepared problem: https://jsfiddle.net/asmar/raxr3apg/

<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>

It's causing this in my environment: https://i.stack.imgur.com/Yx3EJ.png

Thanks in advance for explanation.

asked May 30 '18 at 19:15

Oliver Tušla

`col-4` and `col-8` are not Bootstrap classes. You probably meant `col-xs-4` and `col-xs-8` – Tiramonium May 30 '18 at 19:21
The dup is 3.x, but the same applies in 4.x because the Bootstrap `.row` has negative margins. It is designed to be inside a container or container-fluid – Carol Skelly May 30 '18 at 19:27
Thanks, I've always used nested rows without any container. – Oliver Tušla May 30 '18 at 19:38

Bootstrap 4 row overlapping its parent

0 Answers0