CODEWITHSUNDEEP
htmlcssfrontend
Gokce Dilek
Gokce Dilek

Reputation: 67

Bootstrap Containers Overlapping With Each Other

I am using multiple Bootstrap 4 grids on my website. I created the following 2 grids, however, the containers overlap with each other, ie. the text "Hello" appears on top of the images. I could not figure out how to separate the containers/rows from each other. I would appreciate any information!

<div class="container-fluid">
            <div class="row">
                <div class="col-sm-4 imgdiv">
                    <div class="row">
                        <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" id="narrow">
                        <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" id="narrow">
                    </div>
                </div>
                <div class="col-sm-8 imgdiv">
                    <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" id="wide">
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm text">Hello</div>
                <div class="col-sm text">Hello</div>
            </div>
            <div class="row">
                <div class="col-sm text">Hello</div>
                <div class="col-sm text">Hello</div>
            </div>
        </div>

Upvotes: 0

Views: 1347

Answers (2)

afikri
afikri

Reputation: 394

As mentioned in the documentation, overlapped image caused by not responsiveness of image. Try to make it responsive with

.img-fluid. max-width: 100%;

and

height: auto;

and add class img-fluid in img tag.

<img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg" class="img-fluid" alt="Puppy image">

Upvotes: 0

Ion
Ion

Reputation: 1292

What gives you the impression of overlapping grid cells is that the images are not responsive. Try adding width: 100%; on your images

https://codepen.io/iondrimba/pen/GbaNBb?editors=0100

In your css file:

.imgdiv img {
  width: 100%;
}

Upvotes: 1

Related Questions