Applying padding to an absolute div inside a Bootstrap 4 parent container does not function correctly

I'm trying to create a div with absolute position inside of another div with relative position using Bootstrap 4 like this:

.p-r{
  padding:8px;
  background-color:#ddd;
  height:100px;
}
.p-a{
  bottom:3px;
  background-color:#000
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
      </div>
    </div>
  </div>
</div>

However, I have noticed that the padding does not work properly in the absolute positioned div:

https://i.sstatic.net/xLfmf.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

It appears that the issue lies in the w-100 class, which sets the width: 100% !important of the child div.

A solution would be to adjust the width of the child div by using width: calc(100% - 16px);

.p-r {
  padding: 8px;
  background-color: #ddd;
  height: 100px;
}

.p-a {
  bottom: 3px;
  background-color: #000;
  width: calc(100% - 16px);
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute">
          text
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute">
          text
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Enclose your absolute div within an additional div, with a relative positioning class and set the height to 100%. I've assigned the class .additional to it:

<div class="p-r position-relative">
   <div class="additional position-relative">
     <div class="p-a position-absolute w-100">
        text
     </div>
   </div>
</div>


.additional {
  height: 100%;
}  

.p-r {
  padding:8px;
  background-color:#ddd;
  height:100px;
}
.p-a {
  bottom:3px;
  background-color:#000
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
       <div class="additional position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
       </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML Tooltip with Bootstrap 4

After creating a website using Bootstrap 4 and jQuery, I encountered an issue with HTML-styled tooltips. Instead of displaying the tooltips with the correct styling, they appear to be populated using the jQuery text() function, showing the HTML as plain te ...

htmljquerybootstrap-4

What could be causing my HTML table to stretch all the way to the bottom and right?

https://i.sstatic.net/SpG52.png The layout appears to be extending to the right and bottom, despite my attempts to fix it. I am utilizing the Bootstrap table class in my code. Here is the code snippet: HTML: <head> <link rel="stylesheet" ...

htmlcssbootstrap-4

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

htmlcssangularjsangular-ui-bootstrap

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

javascriptjqueryhtmlajax

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

Is Ursina the right choice for web development?

Looking for a method to compile Ursina for HTML5 using WebAssembly or another technology? I am seeking to make my Ursina Game compatible with Linux & Mac (and potentially Android/iOS with webview), but the current cross-platform compilation options for Py ...

pythonhtmlursina

The identifier is not being used for the HTML element on the mobile browser

Having some issues with CSS priority on my mobile device. The problem is that the CSS id selector push-content is not being applied to the body element. Surprisingly, it works perfectly fine on my PC browser. The code that's not working on mobile dev ...

htmlcssmobileselector

The button is not being vertically centered when using the boostrap pull-right class

---------------------------------------------------------------- | Title | | Button | --> (using .pull-right) the button is not aligned vertically ------------------------------------------------------------- ...

csstwitter-bootstrap

Merge two separate arrays to create a new associative array

I'm faced with the challenge of merging two arrays of data obtained from an HTML form. The first array (payment_descriptions) is structured as follows: ["1st Desc","2nd Desc","3rd Desc"] While the second array (payment_ ...

phphtmlarraysjsonlaravel

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

cssfont-face

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas

The absence of FontAwesome Icons is apparent

In the <head> section of my code, I include the following: <script href="https://kit.fontawesome.com/a076d05399.js"></script> Within some of my buttons, I have the following code: <div class="scroll-up-btn"> ...

htmlcssfont-awesome

What is the reason for nth-of-type selectors not functioning on the third element?

I have a question regarding CSS nth-of-type. In the following code snippet, nth-of-type(2) and nth-of-type(3) are functioning properly, however, nth-of-type(4) and nth-of-type(5) are not working as expected. Could there be an issue with my code? <div i ...

htmlcsscss-selectors

Typography is breaking lines instead of arranging them in a single row

Trying to use Material ui Typography within a Chip component, but my contents are displaying on two separate rows instead of one continuous row without any line breaks. Here is the code snippet: <Typography className={classes.title} style={{ display: ...

htmlcssreactjsmaterial-ui

Issues arising when trying to generate HTML email content from a document

Looking to send an HTML email using Python, argparse, and the command line. I want to insert content from an HTML file directly into the email body rather than just attaching the file. So far, my attempts are only resulting in the HTML file being attache ...

pythonhtml

What is the best method to make an email address distinct?

<body> <p>Please input your email address:</p> <input id="email" style="margin-bottom: 20px; margin-top: 2px;" type="email" placeholder="Email Address"> <input onclick= "validateEmail(email)" type="su ...

javascripthtmlfunctionhtml-emailindexof

Easy Div Centering with jQuery Toggle for Internet Explorer 6

Press the button to center the div, press it again to align it to the left. This feature is compatible with all browsers except for IE6, which does not support margin: 0 auto;. How can I find a solution to this issue? The width of the div is not fixed and ...

javascriptjqueryhtmlcss

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

Arranging Elements Using CSS

Currently, I am working on aligning and positioning my items using CSS. However, I'm a bit confused about the right approach. Here is a demo of my current progress: Demo Link I aim to achieve a layout similar to this sketch: Sketch Image Apologies ...

jqueryhtmlcss

Iterating through elements within a Div will retrieve the initial element exclusively

Is there a way to loop through all elements within the MainDiv Div in order to retrieve their values? Currently, I am only able to retrieve the value of the first element. <div id="MainDiv"> <input type="text" id="MyText"value="Text1" /> ...

javascriptjqueryhtmlcss