I am attempting to position a div with 100 percent width within a Bootstrap 4.1 col using absolute positioning in order to attach it to the bottom. However, I am encountering an issue where it overflows on the right side of the screen. I have tried assigning position: relative; to the parent elements but nothing seems to be resolving the problem.
Does anyone have any suggestions or solutions?
Here is a link to my CodePen example for reference.
Thank you!
The reason for this issue stems from the parent <div class="col"> having a style of
padding-left: 15px; padding-right: 15px<div class="image-text p-4">position: absolute. Since absolute positioning disregards the padding of the parent (see: Absolute positioning ignoring padding of parent), the width of your child becomes expected width + padding-left + padding-right.
To address this, you have a couple of options:
<div class="col" style="padding:0">If you wish to keep the padding, then you can add a wrapper <div class="wrapper"> around the absolute child
<div class="image-text p-4">.wrapper { position: absolute; bottom: 0; left: 0; width: 100%; padding-left: 15px; padding-right: 15px; }
Furthermore, remove
position: absolute; bottom: 0; width: 100%Make sure to include the following code snippet in your SCSS file and use the class "no-gutters" within a row:
<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);
}
}
After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...
I have been utilizing aiohttp and lxml for web scraping purposes to extract values from webpages. I have successfully implemented the following functions: def get_sr(page, tree): sr = tree.xpath(".//div[@class='competitive-rank']/div/text() ...
Using a combination of PHP and HTML, I have created an HTML table that is generated using a PHP while loop. The dropdown menu on the page displays all distinct portfolio names from my MySQL database by executing the following code: $query2 = "SELECT DISTI ...
Instead of using the style attribute to adjust text alignment, I prefer using bootstrap classes. What is the Bootstrap 4 equivalent of style="text-align:left;" ? ...
Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...
My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques. All the solutions I've found so far involve object-fit: cover, which c ...
Even though I know the answer to this question is out there somewhere, I just can't seem to find it (or maybe I'm not recognizing it when I see it!). As a beginner in jquery, please be patient with me. Dilemma: I have a collection of 20 images, ...
I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet: <div id="container"> <div id="header"> ...
Trying to enhance the style in Ionic2, I have a message box: https://i.sstatic.net/PCRtA.png I am attempting to integrate this image into it: https://i.sstatic.net/PSQID.png To create a seamless look with the message box. Facing an issue where the ima ...
https://i.sstatic.net/VccFk.jpg I am encountering an issue with a PHP form that is supposed to transfer information to a database after submission. However, every time I press the submit button, I receive an error message. Can anyone help troubleshoot th ...
As I dive into learning Javascript, I've come across document.createElement. This method allows me to create an HTML tag and insert it into an existing HTML parent element. However, I have a specific question in mind: Is it possible to choose the exac ...
Looking for some guidance on handling the response from an AJAX call. Here's what I'm trying to achieve: Initiate an AJAX call to my Rails application to retrieve an HTML document. In the Rails controller, access the HTML document stored on dis ...
How can I retrieve the href value of the last anchor tag in the provided content string using pure JavaScript, excluding jQuery? var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba ...
Could you please explain the contrast between div#name and #name? Is there a significant difference when using class or id to position an element? Thank you for your help. ...
I am currently working on creating a carousel using React, where the content images are aligned horizontally. If I have 3 image tags within a div with a width of 1200px, how can I effectively control these images to ensure they fit within the container div ...
I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date i ...
I am currently using twitter bootstrap for my front end web development project. I have successfully implemented a text field with a dropdown menu right next to it: <div class="input-group"> <input type="text" class="form-control" name="ope ...
I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information. Both container values are added dynamically at runtime. By default, the grouping container is displayed on the p ...
I've been trying to post my content exactly as I submit it, but for some reason, it's not working. When I enter two paragraphs in a post, the output doesn't maintain that formatting. Instead, it removes the paragraph breaks and displays the ...
Trying to truncate long text in a v-autocomplete component using Vuetify 3 and text-overflow: ellipsis, but it's not working. Check out the code below: <div id="app"> <v-app id="inspire"> <v-row align="cen ...