Bootstrap Overlapping Problem: Find a Solution

Question

Bootstrap Overlapping Problem: Find a Solution

Currently, I am in the process of learning how to create a responsive website using bootstrap. Although I have been making progress, I realize that my code may not be as clean as it could be. However, my current concern revolves around overlaying an image on my site.

No matter what I try, I cannot seem to make the overlay match the size of the image rather than the size of the containing <div>.

To simplify things, I have reduced my problem down to the basic elements.

The main issue I am facing is with the padding: the background (shown in blue at the bottom of the image below) matches the size of the <div> and <row>, but not the size of the actual image. The image itself has inherent padding of 25px on top, 15px on the right, and another 15px on the left.

Despite trying to apply padding to the <div>, the background still does not match the dimensions of the image. It seems that the padding within the image is related to the functioning of bootstrap...

Here is a visual representation from the Firefox console displaying the padding and div size:

View Image

The current code snippet:

View Code

I would greatly appreciate any assistance in resolving this issue. I believe there must be a solution, but my current skill level is hindering me, even after several hours of effort!

Thank you in advance for your help! :)

html css bootstrap-4

Answer 1

Answer №1

Your parent class called .overlay:

The

wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12

class has a padding: 15px.

Therefore, setting width: 100% will take that into account.

I recommend using width: calc(100% - 30px); (to offset the 15px padding on each side)

EDIT: The 15px padding is applied by Bootstrap's .col-* classes. You can find this information in the "Computed" tab in your browser's source code.
On Line 628:

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

Answer 2

Your parent class called .overlay:

The

wrapper reve col-xl-4 col-lg-6 col-md-12 col-sm-12

class has a padding: 15px.

Therefore, setting width: 100% will take that into account.

I recommend using width: calc(100% - 30px); (to offset the 15px padding on each side)

EDIT: The 15px padding is applied by Bootstrap's .col-* classes. You can find this information in the "Computed" tab in your browser's source code.
On Line 628:

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

Bootstrap Overlapping Problem: Find a Solution

Answer №1

Similar questions

Using the download attribute with anchor tags in React components

How come applying a unique class to a bootstrap element is unsuccessful in Chrome but operates seamlessly in Edge?

Modifying a CSS property with jQuery

The functionality of Google Maps code is limited on Android devices because the map feature is not available

How come flex won't let me rearrange an image?

Is it possible to manually trigger a version change transaction in IndexedDB?

Locating the value of a data attribute from a distant parent div using jQuery

Position the mat-icon button in the top right corner for the close button

iPhone 5s landscape mode causing issues with media query

Trigger an event in jQuery when the focus moves away from a set of controls

Web Scraping for Results on Android

Change the visibility of a div's content when a radio button is selected with only CSS

Horizontal Screen Sharing on iPad

Unable to get click function to work with multiple div elements

Display the application unless a certain condition is met, in which case trigger an alert notification

jquery mobile integrated seamlessly between image1 and image2

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

What could be the reason for jQuery not functioning properly as needed?

How to align radio buttons in the center of a div horizontally

Customize your click event with conditional styling in React