2

Any tricks for making a div inside any column be able to extend to the right (or left) edge? I need to stick with a fixed container and not a fluid one. Also, because of the CMS, the "extended block" needs to remain in the markup (can't be a CSS pseudo element ).

enter image description here

https://codepen.io/mwmd/pen/eLPxOX

<div class="container">
  <div class="row">
    <div class="col-sm-7">
      <p>How can I get that div to extend to viewport right while maintaining its left edge to the Bootstrap column?</p>
    </div>
    <div class="col-sm-5">
      <div class="extend-me">
        <img src="https://via.placeholder.com/350x150"/>
      </div>
    </div>
  </div>
</div>

.container {
  background-color: #999;
}
.extend-me {
  background-color: darkred;
  height: 300px;
}
.extend-me img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}

Not answered by Extend an element beyond the bootstrap container because this solution uses a pseudo element.

Not answered by Extend bootstrap row outside the container because this solution only works on a 50% 50% split.

Matt Wilson
  • 187
  • 11

3 Answers3

1

HTML: on the div with class "extend-me", also add the class "row" CSS: to extend the inside div to the right, add margin-left to 0 .extend-me { margin-left: 0;}

sample

<div class="container yourOverallContainer">
    <div class="row">
        <div class="col-sm-7">
            <h1> Stack overflow question </h1>
        </div>
    </div>
</div>

<div class="container-fluid">
        <div class="row">
          <div class="col-sm-7 thisToBeAlignedToContainer">
            <p>How can I get that div to extend to viewport right while maintaining its left edge to the Bootstrap column?</p>
          </div>
          <div class="col-sm-5">
            <div class="extend-me row">
              <img src="https://via.placeholder.com/350x150"/>
            </div>
          </div>
        </div>
      </div>


<div class="container">
    <div class="row">
        <footer>
            <p id='feedback'> without jQuery and .container-fluid, yet completely responsive will be interesting... </p>
          </footer>
    </div>
  </div>


.container {
  background-color:#c9efb1;
}

.container-fluid {
  background-color: #fff;
}

.extend-me {
  background-color: darkred;
  height: 300px;
}
.extend-me img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}



mWilson();

    $(window).resize(function(){
        mWilson();
    });

    function mWilson(){
         $('.thisToBeAlignedToContainer').css('padding-left', $('.yourOverallContainer').css('margin-left'));
    }
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
0

Try this codepen: https://codepen.io/anon/pen/EedrQV

I adjusted the container element using the following css:

.extend-container {
  margin-right: 0;
  margin-left: auto;
}

This moves the entire container to the right, so you may need to adjust the col-sm classes depending on how wide you want them to be.

souzan
  • 289
  • 1
  • 2
  • 14
  • Thx @souzan but it's not going to work having the entire container shift to page right - it needs to stay centered. I just added a reference image to help make the question more clear. – Matt Wilson Sep 18 '18 at 16:29
-1

Here's a working codepen: https://codepen.io/migli/pen/QWvqOeM

It doesn't use absolute positionning, only css --root variables and css calculation:

/* HTML
-------------------------------------------------- */

<div class="container">
    <div class="row">
        <div class="col">
            <h4>This is a column</h4>
        </div>
    </div>
    <div class="col full-width">
        <h4>This column is 100vw</h4>
    </div>
</div>

/* CSS
-------------------------------------------------- */

:root {
    --gutter: 15px;
    --container-width: 100%;
    --full-width-margin: calc(
        (-100vw + var(--container-width)) / 2 - var(--gutter)
    );
}

@media (min-width: 576px) {
    :root {
        --container-width: 540px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

@media (min-width: 768px) {
    :root {
        --container-width: 720px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

@media (min-width: 992px) {
    :root {
        --container-width: 960px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

@media (min-width: 1200px) {
    :root {
        --container-width: 1140px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

.full-width {
    width: 100vw;
    max-width: none;
    margin-left: var(--full-width-margin);
    margin-right: var(--full-width-margin);
}
migli
  • 2,692
  • 27
  • 32
  • Thank you for contributing. I had to down vote this tho, because it did not solve the original problem/question. – Matt Wilson Sep 06 '21 at 17:24
  • Thanks for contributing too, but I don't understand. The original question is how to erxtend objects inside containers to viewport edge, this is exactly what my answer does. A 100vw row inside a container. – migli Sep 07 '21 at 02:58
  • When I view your Codepen, your "extend" object goes full VW, but the question above is looking for something that can align to the grid on one side and then extend to the viewport edge on the other side... so only extend in ONE direction. – Matt Wilson Sep 08 '21 at 16:33