2

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!

Gerrit
  • 2,515
  • 5
  • 38
  • 63

2 Answers2

3

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

Prasad Kothavale
  • 419
  • 4
  • 11
3

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);
}
}
RamNiwas Sharma
  • 337
  • 2
  • 6