Currently, I am working on a specific layout design using Bootstrap 5 where I am trying to render a tag outside its original container so that it takes up the full width of the page. My attempts with absolute positioning on the img tag have proven to be challenging as the footer is overlapping the tag unexpectedly.
Instead of just talking about it, here is a visual representation of what I am trying to achieve:
https://i.sstatic.net/mPjku.png
The optimal DOM structure I envision for this layout is as follows:
<article>
<header>
<div>
<img />
<h3 />
</div>
<div class="meta" />
</header>
<div class="content" />
<footer />
</article>
- The img should occupy the full width horizontally
- The img should maintain its y position without anything coming after it (such as a page footer)
- The h3 tag should be displayed above the img
I would greatly appreciate any suggestions or ideas on how to make this work. I have been struggling with this small detail for over a week now :')
After some experimentation, I have come up with the following solution. I have divided the overall structure into three separate container boxes, but I find this approach a bit hacky and encountered issues when viewing it on mobile devices (e.g., the title extends below the box instead of staying at the bottom of the image).
<body class="position-relative">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
</div>
<main class="mt-5 mb-3" role="main">
<section>
<article>
<header>
<div class="go-article-banner d-flex position-relative">
<img style="object-fit: cover;position: absolute;height: 300px;left: 0;right: 0;" class="w-100" src="...">
<div class="container-fluid container-lg position-relative">
<div class="position-absolute bottom-0 start-0 right-0" style="background: rgba(0, 0, 0, 0.4);">
<h3 class="display-3 p-4">The War of the Worthies: the spectre of Cardan’s aggression</h3>
</div>
</div>
</div>
</header>
<div class="container-fluid container-lg"></div>
<footer class="container-fluid container-lg"></footer>
</article>
</section>
</main>
...
</body>
If you want to see the current rendering, you can check it out here.
In my previous attempt, I ran into an issue where the marquee box was encroaching on the article banner. Furthermore, the title was extending beyond the image which was rendered using an anchor tag.
<body class="position-relative customize-support">
<div class="container-fluid container-lg">
<header class="mt-5">
<nav class="navbar navbar-expand-lg navbar-dark mt-5 mb-3"></nav>
</header>
...
...
</body>