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

Question

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

css bootstrap-4

Answer 1

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.

Answer 2

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.

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

Answer №1

Similar questions

Using jQuery to update a specific item in a list

minimize the size of the image within a popup window

The functionality of Jquery UI is not compatible with version 1.12

How can I fix the issue of the header background image not resizing properly? Any suggestions?

Trick for adjusting padding on top and bottom for responsive blocks of varying widths

Is there a way to fill the remaining height of the parent with the middle item when sandwiched between two others using CSS?

Dominating React Components with Unique CSS Styles

Utilizing Material-UI CssBaseline with React JS

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

The animated image gracefully glides down the webpage accompanied by an h3

Highcharts plots only appear once the browser window is adjusted

Modify the button's text with jQuery after it has been clicked

HTML list style with varying images at the same level in a ul tag

React and SASS - issue with checkbox component not being properly aligned with its label

Bootstrap 4, with nested rows and columns set to full height

What are the methods for adjusting the height of one div in relation to another div?

Rows Within Rows That Outsize Their Parent

Is there a way to hide the borders between cells within these divs?

Interactions of selecting dates in datepicker widget

The dropdown in MaterializeCSS does not display any data retrieved from VUE