CODEWITHSUNDEEP
htmlcssbootstrap-4
Gerrit
Gerrit

Reputation: 2677

Absolute positioned div with width 100% overflows in Bootstrap 4 col

I try to position a div with width 100 percent in a Bootstrap 4.1 col absolute to attach it to the bottom. But my problem is, that it overflows on the right. I assigned position: relative; to the parents but nothing worked.

Any idea?

https://codepen.io/anon/pen/RyVPZe

Regards!

Upvotes: 2

Views: 2781

Answers (2)

RamNiwas Sharma
RamNiwas Sharma

Reputation: 347

please use left: 0px; like (scss)and use class in row no-gutters

<div class="row no-gutters"></div>

.image-box {
.image-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: white;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
}
}

Upvotes: 3

Prasad Kothavale
Prasad Kothavale

Reputation: 444

This issue is because of parent <div class="col"> has style padding-left: 15px; padding-right 15px where as child <div class="image-text p-4"> has position: absolute. As absolute position ignores padding of parent (refer: Absolute positioning ignoring padding of parent) width of you child is expected width + padding-left + padding-right.

You can tackle this by using one of the following:

  • Remove padding from the parent if not required <div class="col" style="padding:0">. example: https://codepen.io/prasadkothavale/pen/jxmbww

  • If you want to keep padding then you will need to add a wrapper <div class="wrapper"> over absolute child <div class="image-text p-4"> and add following CSS:

    .wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding-left: 15px; padding-right: 15px; }

and remove position: absolute; bottom: 0; width: 100% from the child. Please refer example: https://codepen.io/prasadkothavale/pen/xjdwjB

Upvotes: 3

Related Questions