Utilizing Boostrap to create a background image positioned on the far left of the screen within a .container

I am currently working with bootstrap 4 and have a layout that includes a container class:

body
  #content.container
    .row
      .col-6
        | Great content
      .col-6
        | I really like it
    .row
       .col-12 And so forth
    .row
       .col-3.here Content with an image
    .row
      .col-12 And so forth

Everything is functioning as expected, until my designer adds an image positioned to the left of the screen at the level of the .here class, which places it outside the .container.

The current workaround involves moving the .container outside the layout and repeating it. It's not ideal because it breaks factoring, violates DRY principles, and affects responsiveness.

Is there any other solution?

Setting the image position in JS is messy and fixing the image position isn't viable either.

I was thinking maybe using flexboxes could provide a cleaner solution, something like 

div.uncontainer style="background-image: url('/images/example')"
, which would make the div full width while ignoring the .container constraint.

Has anyone else encountered this issue? Any suggestions for a clean solution?

Thank you

cssbootstrap-4

Answer №1

Thank you for all the helpful feedback, especially from @zim who guided me in the right direction.

In response, I created a utility function that generates the .uncontainer class, allowing for the creation of a full-width div within a parent .container.

Check it out below:

@import '~bootstrap/scss/functions', '~bootstrap/scss/variables';

@mixin make-uncontainer-responsive($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Still unsure about margin-left and translateX attributes;
      // Any thoughts on this?
      left: calc((#{$container-max-width} - 100vw)/2);
    }
  }
}

.container {
  position: relative; // Hopefully won't cause any issues
  .uncontainer {
    position: absolute;
    width: 100vw;
    @include make-uncontainer-responsive();
  }
}

It seems that 100vw is supported from IE9 onward, making it a compatible choice. Since Bootstrap 4 works with IE10+, everything should work smoothly. :)

I hope this solution proves useful, and I am considering recommending its inclusion as a default in bootstrap.

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

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

javascriptjqueryhtmlangularjscss

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps-timeline-sec { position: rela ...

javascripthtmlcss

Switch the CSS class for the currently selected link

There are 5 links on the page. When I click on each link, it changes color. However, when I move my cursor to another area of the page, the active link loses focus and I can't show its current state. Can you please advise me on how to fix this issue? ...

htmlcss

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

Steps to vertically shift an image downwards within a navigation bar using HTML and CSS

Currently, there is a fully functional navigation menu that can be toggled within a webpage. An image is also included in the navigation menu and positioned below the text. I would like to move the image to the very bottom of the navigation menu to remove ...

htmlcssvertical-alignment

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

cssreactjstypescriptnext.jstailwind-css

Combining an image and a link in HTML CSS: Tips for stacking elements on top of each other

I am currently working on adding a hyperlink to an image, so that when the image is clicked it will navigate to the specified link. However, I am having trouble with the formatting of the hyperlink as it is appearing smaller than the actual image. Below ...

htmlcss

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

css

Tips for adjusting image size to take up only half of the screen in NextJS

Struggling to resize an image to fit only 50% of the screen in NextJS? The Image component provided by NextJS comes with its own inline styling, making it tricky to customize. Currently, I attempt to style the image by wrapping the Image component in a spa ...

javascriptcssreactjssassnext.js

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

cssseleniumselenium-webdrivercss-selectorsautomated-tests

JavaScript: Selecting parent elements using getElementsByClassName

I am dealing with the following HTML code: <div class="item"> <img class="item-image" src="${item.getImage()}"/> <p>${item.getName()}</p> </div> and JavaScript: var classname = document.getElementsByClassName("item" ...

javascripthtmlcss

What is the best way to create scrollable content inside a container?

To accommodate more fields within my fixed-position container, I need to increase its height. However, instead of doing this, I believe adding a scroll bar to the container and making its contents scrollable would be a better solution. The challenge now i ...

htmlcssscrollcontainersscrollbar

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style

I am working with a list item and trying to apply styles using System.Web.UI.WebControls.Style. However, I noticed that there isn't a MergeStyle option similar to what's available for controls. Instead, there is an Attributes.CssStyle property of ...

asp.netcsslistitem

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

Safari iOS does not display any background for Buttons

Encountering an unusual problem with buttons on iOS devices specifically in Safari browser - the background color isn't being applied like it is on Desktop and Android devices. Here are the CSS properties for the button: export const Button = styled.b ...

cssreactjssafarimobile-safari

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

Tips for using jQuery to add or append a class to the final li element

I am currently struggling to understand why the last child of the li element is not being inserted into the last li. This module functions as a treeview, and my main objective is to add a class to the last li. Let me demonstrate with some sample code and ...

htmljquerycsslaravel

Ever since implementing a new section class, the CSS first-of-type selector has ceased to function

After referencing a previous response, I utilized first-of-type to specifically target the initial menuSection with this code snippet... .menuSection:first-of-type { background: red; } <div id="container"> <section class="menuSection"> ...

csscss-selectorsfirst-of-type

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

htmlcssshapescss-shapes