What is the best way to layer div elements using Bootstrap 4?

I'm looking to achieve a similar effect with overlapping elements as shown in the attached file. What would be the best code approach to achieve this? I am currently using bootstrap 4.6.2, can it be of assistance?

Thank you for your guidance.

Although I have managed to make it work with the following code, I am not certain if it is the optimal solution as I have to adjust the 'top' position when the text and div height change.

.text-container {
  top: 44%;
  left: 0;
  transform: translateY(-50%);
  width: 75%;
  z-index: 2;
  position: absolute;
  padding: 10% 4% 14% 2% !important;
}

.border-danger {
  border-color: #FF6F61 !important;
  border: solid 1px;
}

.text-danger {
  color: #FF6F61 !important;
}

.list-group-item {
  border-bottom: 1px solid black;
}

.list-group-item:last-child {
  border-bottom: none;
}

a.list-group-item:hover {
  color: #000;
}

.img-fluid {
  z-index: 1;
  position: relative;
}

.image-right {
  z-index: 1;
  position: relative;
  margin-left: auto;
}

#coaching-img {
  width: 50%;
  margin-top: 6%;  
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section id="main_content" class="">
  <div class="container mt-5">
    <div class="row justify-content-end">
      <div class="col-md-12 position-relative d-flex justify-content-end">
        <div class="text-container border border-danger rounded p-4">
          <div class="col-md-8">
            <h2 class="text-danger">Profitez d'un accompagnement et de coaching personnalisé</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non est vitae nulla porttitor fringilla id eu dui. Donec eget cursus ex. Maecenas bibendum sodales augue.</p>
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                  Bloc de 1 heure <span>&#x2192;</span>
                </a>
              <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                  Bloc de 3 heures <span>&#x2192;</span>
                </a>
              <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                  Bloc de 5 heures <span>&#x2192;</span>
                </a>
            </div>
          </div>
        </div>
        
        <img id="coaching-img" src="https://via.placeholder.com/600x400" alt="Coaching Image" class="img-fluid rounded image-right">
      </div>
    </div>
  </div>
</section>

cssbootstrap-4

Answer №1

After examining your code, I have attempted to streamline the structure to assist you in understanding its functionality better. I trust that I have met your expectations, but if not, please feel free to provide feedback in the comments.

The Structure

The text segment essentially consists of a bootstrap column occupying 9/12th (which is 75% of the width), with a nested column of the same width percentage used to create a blank space on the right. Instead of using another bootstrap column for the blank area, I could have opted for a fixed size padding, but this choice ultimately comes down to personal preference.

To align the image to the right and bottom of the page, I set a position: relative; style for the .container and a position: absolute; for the image. By positioning the image with bottom and right values of 0, I successfully anchored it to the bottom right corner of the container. To adjust its position slightly downward, I applied a negative margin.

For the z-index aspect, I assigned a position: relative; and z-index: 2; to the .text-container.

The Code

.container{
  position: relative;
}

.text-container {
  padding: 36px 28px;
  z-index: 2;
  position: relative;
  border-radius: 8px;
}
  
.border-danger {
  border-color: #FF6F61 !important;
  border: solid 1px;
}
  
.text-danger {
  color: #FF6F61 !important;
}
  
.list-group-item {
  border: 0;
  padding: 18px 0 6px;
  border-bottom: 1px solid black;
 }
 
.list-group-item:last-child {
  border-radius: 0;
}

a.list-group-item:hover {
  color: #000;
}
  
.img-fluid {
  z-index: 1;
  position: relative;
}
  
#coaching-img {
  bottom: 0;
  position: absolute;
  /* width: 500px; */
  width: 44%;
  right: 0;
  margin-bottom: -46px;
}
<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-9">
        <div class="text-container border border-danger">
          <div class="row">
            <div class="col-md-9">
              <div class="text-center">
                <h2 class="text-danger">Benefit from personalized coaching and support</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non est vitae nulla porttitor fringilla id, eu dui. Donec eget cursus ex. Maecenas bibendum sodales augue.</p>
              </div>
              <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                    1-hour Session <span>&#x2192;</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                    3-hour Session <span>&#x2192;</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                    5-hour Session <span>&#x2192;</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img id="coaching-img" src="https://via.placeholder.com/600x400" alt="Coaching Image" class="img-fluid rounded">
  </div>
</body>
</html>

Issues with the Original Code

One of the key problems in the original code was applying a style of position: relative; to the image and a position: absolute; to the .text-container. For the desired layout, the correct approach would be to assign a position: relative; to the parent element and position: absolute; to the element to be positioned (in this case, the image), which should be a direct child of the relative positioned element.

Another issue was using a top position instead of a bottom position for the image.

Lastly, relying on percentages for paddings and margins can sometimes lead to unexpected outcomes. In many cases, fixed values are more reliable. Additionally, using percentages for positions (such as top, bottom) can be precarious. One challenge with using percentages is determining what value they are a percentage of (the entire width, height, or parent's width). Furthermore, percentages can cause positioning discrepancies when resizing the viewport, potentially altering the layout across different screen sizes. Even a small adjustment in the viewport's size could significantly impact the positioning of elements on the page when percentages are utilized for these values.

Final Remarks

I have focused solely on the desktop version in my adjustments. The other versions can be enhanced with a few modifications.

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

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

javascriptjqueryhtmlcssmobile

ReactJS -- Button Overlay Issue: Unresponsive Clicks when Positioned on Top of List

Please check out the Code Example in my Code Sandbox demo that I have set up https://codesandbox.io/s/W7qNgVnlQ I am trying to get the button action of the Floating Button to work, but currently it is triggering the Action assigned to the ListItem instea ...

htmlcssreactjsoverlaymaterial-ui

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Struggling to perfectly align text in the middle of a div container that also has

Seeking help with aligning text vertically within a div that also contains an image. Previous attempts with CSS properties like vertical-align: center; and line-height:90px have proven ineffective. Removing the image allows for the successful use of line- ...

htmlcsscentering

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

After experimenting with the viewport meta tag and enclosing it in a div class="container", I found that the issue persists on Codeply and Chrome DevTools. However, when I adjust my browser size, the problem seems to disappear. I also tried using various v ...

cssbootstrap-4viewportbootstrap-5bootstrap-grid

Is there a way to track the amount a user scrolls once they have reached the bottom of a page using Javascript?

It's a popular UI pattern on mobile devices to have a draggable element containing a scrollable element. Once the user reaches the end of the scrollable content, further scrolling should transition into dragging the outer element. For example, in this ...

javascriptcss

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

htmlcssangularjs

How come I am unable to alter the container padding variable within BootstrapVue?

I am currently in the process of developing a BootstrapVue 2.0 theme that is based on Bootstrap 4.3, following the guidance provided by the VueBootstrap theming guide. Inside my theme.scss file, I have included my custom overrides at the beginning and impo ...

bootstrap-4themesbootstrap-vue

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

javascriptjqueryhtmlcssbackground

Determine the aspect ratio with a constant adjustment using CSS/SCSS

I am trying to adjust the aspect ratio of a responsive div to create a square shape with an offset. I want the height to be equal to the width plus the specified offset. Here is an example of what I am attempting: .div { width: 100%; aspect-ratio: 1 / ...

htmlcsssassresponsive-designcore-web-vitals

How can I align the tags properly when inserting a tab box within a section tag?

How can I successfully insert a tab box within my section tag? I found this tab box tutorial on the website here The download link for the source code is available here: source code Below is the HTML code snippet: <!DOCTYPE html> <html> & ...

javascriptjqueryhtmlcss

Ways to alter the SVG's color upon hovering above the image:

I need help getting the YouTube logo to turn red when I hover over an image with a link. Currently, the color change only occurs when hovering over the logo itself, but I want it to happen when hovering over the entire image. You can see an example of wh ...

htmlcsssvghyperlink

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

htmlcssruby-on-railsrubysvg

A Guide to Modifying Background Image Attribute using JavaScript

I am currently in the process of changing an attribute of a JavaScript variable from url("../images/video.png") (as declared in the CSS) to url("../images/pause.png") using this line of code: fullscreenPlayPauseButton.style.backgroundImage = "url("../imag ...

javascriptcssimage

Issues with Bootstrap Carousel Slide Show functionality in FireFox

I have implemented a Bootstrap-5 Carousel Slide Show for the website banner. It is functioning correctly in Google Chrome, but there seems to be an issue when viewed in Firefox. The Firefox browser version I am using is 90.0.2 (64-bit). Upon inspecting the ...

htmlcssbootstrap-5

The alignment of the control buttons in Bootstrap 4.4 carousel is incorrect

I followed the official documentation to create a Carousel page. Reference link: https://getbootstrap.com/docs/4.4/components/carousel/#with-controls However, the Carousel Control Button is not in the correct position. img1 img2 It appears that ...

htmlcssbootstrap-4

Utilizing the modulo operation for organizing rows and columns

I’ve seen this question asked many times, but I’m still struggling to figure it out. The examples I’ve come across are either too complex or involve Angular or Javascript. My goal is to learn how to set up 4 columns within a row. // initiating a ...

phphtmlcssmodulo

Tips for keeping the "BUTTON LINK" navbar item from wrapping on your website

Having trouble with the navigation bar on smaller screens. The "BUTTON LINK" is wrapping under the BRAND NAME toggle. How can I fix this? Here is the HTML code: bmenu test <nav class="navbar navbar-expand-md fixed-top navbar-dark" style="background ...

twitter-bootstrapbootstrap-4flexbox

Troubleshooting problem: Scrolling problem in IE7 and IE8 with Lightbox

The lightbox I'm using works flawlessly on all browsers, except for IE. When viewed on IE, it shows triple scroll bars. Here is the CSS code for the iframe: #wrap { float:left; width:800px; height:500px; overflow-x: hidden; overflow-y: scroll; } #co ...

jqueryhtmlcsslightbox