Allow images to extend beyond the boundaries of the grid in Bootstrap 4

I'm trying to figure out how to display an image that starts inside a grid but scales to the left or right of the screen. The current issue is that the container limits the width, and I need it to allow the image to extend beyond the grid.

If you have any ideas or suggestions on how to achieve this, please let me know! Here is a screenshot for reference: https://i.sstatic.net/e1JTa.png

I attempted to use a solution from this Stack Overflow thread: Extend bootstrap row outside the container

Here's the code I tried:

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}
<div class="container" id="main">
    <div class="row">
        <div class="col-lg-6 left">
            ..
        </div>
    </div>
</div>

Unfortunately, this solution doesn't seem to work with images. If you have any insights or alternative methods to achieve the desired outcome, please share! Thank you.

Answer №1

While it may not be the most visually appealing solution, it gets the job done

HTML

<div class="container">
    <div class="row">
        <div class="col-12 pb-3 mb-3 block bg-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, cum. Illum unde dolorum, quos tempore dicta velit accusamus saepe praesentium fugiat cumque nulla animi ipsa! Earum id beatae, ullam nulla.
        </div>
    </div>
    <div class="row">
        <div class="col-12 pb-3 mb-3 block bg-end">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, cum. Illum unde dolorum, quos tempore dicta velit accusamus saepe praesentium fugiat cumque nulla animi ipsa! Earum id beatae, ullam nulla.
        </div>
    </div>
    <div class="row">
        <div class="col-12 pb-3 mb-3 block bg-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, cum. Illum unde dolorum, quos tempore dicta velit accusamus saepe praesentium fugiat cumque nulla animi ipsa! Earum id beatae, ullam nulla.
        </div>
    </div>
</div>

CSS

.container {
  position: relative;
}

.container:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  content: '';
  background-color: rgba(255,0,0,0.5);
}

.block {
  position: relative;
  color: #fff;
}

.block:before {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #000;
  content: '';
  display: block;
  width: 200%;
  z-index: -1;
}

.block.bg-start:before {
  left: -100%;
  right: 100%;
}

.block.bg-end:before {
  left: 0;
  right: -100%;
}

https://jsfiddle.net/sfh76q6q/37/

Feel free to substitute a background image for .container:before instead of a background-color

  background-image: url('example.png');
  background-repeat: repeat;
  background-position: 0 0;

Answer №2

Let me share my approach on how to handle this scenario.

JavaScript

function extendables() {
  $('.extend-left,.extend-right').each(function(i, e) {
    let w = ($(window).width() - $(e).closest('[role="main"]').width()) / 2;
    $(e).css({
      position: "relative",
      width: $(this).closest('[class^="col-"]').width() + w + 'px'
    })
    if ($(e).is('.extend-left')) {
      $(e).css({
        left: '-' + w + 'px'
      });
      if ($(e).is('.extend-right')) {
        $(e).width($('body').width() + 'px')
      }
    }
  })
}

$(window).on('load resize', extendables);

CSS

/* 
 * This part is optional but included to ensure images grow to 100% width of their container when needed.
 */
[class^="extend-"] img {
  display: block;
  width: 100%;
  height: auto;
}

Markup

<div class="extend-left"> <!-- or "extend-right", or both... -->
  <img src="http://via.placeholder.com/350x150" class="img-fluid" alt="Responsive image">
</div>
  • Place the markup inside the column you wish to extend.
  • It is assumed that a column extended to the left already meets the left side of the container, while a column extended to the right already meets the right side of the container.
  • If both classes are added within a col-12 column, it will extend to full width.
  • In case of sluggish performance on the resize event due to frequent usage (over 10 cases per page), consider adding throttling to the call on extendables() at 10ms or 20ms.
  • An advantage of this approach over similar methods is that it doesn't require position:absolute on the extended element, allowing the parent's height to adjust naturally based on content.
  • You can safely rename the class names from extend-left/right to prevent clashes with other theme class names by updating them across the markup, JavaScript, and CSS.

Proof of concept:

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

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it ...

What could be preventing my bootstrap class from being applied as expected?

As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with: <button class="btn btn-primary btn-xl">Find out More</button> However, when ...

I am unable to retrieve images using the querySelector method

Trying to target all images using JavaScript, here is the code: HTML : <div class="container"> <img src="Coca.jpg" class="imgg"> <img src="Water.jpg" class="imgg"> <img src="Tree.jpg" class="imgg"> <img src="Alien.jpg" class=" ...

The JavaScript function document.getElementById.onclick is not functioning as expected

One issue I am facing involves counting all downloads on my website. My current approach is to increment a value in my database each time a download button is clicked, and then display this value. Despite trying multiple methods, the download count always ...

Icon for local system displayed on browser tab

I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...

Modify the data in the <col> column

Is it feasible to update the values in a particular column of a table? <table> <col with="auto"> <col with="auto"> <col with="auto" id="update_me"> <?php for(hundreds of lines){ ?> <tr> <td>so ...

What is the best way to display all checked checkboxes even when the page is reloaded?

I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...

Error encountered in ASP.NET Core MVC due to dependency inversion with CRUD operations

Today I delved into dependency inversion. Prior to implementing this concept, my CRUD system was functioning well, but now I am encountering some errors. The error message says "Cannot implicitly convert type int to ContractLayer.UsersDto." In the image pr ...

Is it possible to single out the final element having a specific CSS class in the absence of a parent container?

I have the following elements dynamically rendered in an HTML file. <div class="vehicle"></div> <div class="vehicle"></div> My requirement is to add a style float:right inside CSS class vehicle for the second el ...

Tips for querying multiple elements that share a common ID and verifying if the input has been modified

I have a series of text inputs that share a common id prefix but differ slightly at the end. Whenever a user enters text in any of these input fields, I want to trigger a function. Currently, I have this functionality implemented with the following code: ...

What is the best way to remove the left margin from a MuiTreeItem-group?

I'm working with the MUI tree component and I want to remove the left margin of the second layer of MuiTreeItem-group I attempted to use makeStyles to address this issue, but it didn't have the desired effect const useStyles = makeStyles(() => ...

What is the best way to determine if a character is valid for use in HTML rendering?

There are certain characters, like ordinal 22 or 8, that do not appear correctly in HTML (when using Chrome for example when copying and pasting them into this 'Ask question' editor; assuming utf-8 encoding). How can I identify which characters a ...

Conforming to HTML5 standards with ASP.Net DataList

I am currently working on updating my ASP.Net 4.0 website to comply as closely as possible with HTML5 specifications. One issue I have encountered is that whenever I use a DataList, it automatically adds the attribute cellspacing="0". I have tried various ...

The elements within the flexbox are being truncated when viewed on smaller devices

I have encountered an issue with my code where the .content element, which has flex properties, appears cut off on small screens. I want to avoid setting a fixed size because the text within it may vary in size. The goal is for the background image to fi ...

Can you demonstrate how to display the chosen toggle button within Angular 4 alongside the remaining options?

I have created a custom toggle button component in Angular that I can reuse in different parts of my application. However, I am facing an issue that I need help resolving. I want to display only the selected toggle button and hide the others. When I click ...

Loading the central portion exclusively upon clicking a tag

Is there a way for websites to load only the middle section of the page when a link (a-tag) is clicked? I understand this is typically done through AJAX, but how does it update the URL to match the href in the a tag? I've tried using the .load functi ...

Guide to updating information inside of script tags in html using javascript

Within my HTML, there is a script tag that looks like this: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "VideoObject", "name": "Title", "description": "Video descrip ...

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

When utilizing the w3.css and bootstrap libraries to add a link button, an issue arises when resizing the screen as the text inside the button does not respond accordingly. How can we ensure that the text fits within the button based on the screen resoluti ...

Angular: Oops! Encountered some template parsing issues: Surprising closing tag encountered

Recently, I created a brand new project with Angular CLI on 05/25/17. I decided to copy and paste some HTML code into a new component in the project. Surprisingly, this HTML code, which worked perfectly fine as its own standalone page, is now causing compi ...

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...