Utilize Bootstrap 4 to extend an element within a container column all the way to the edge of the viewport

Is there a way to make a div inside a column extend to the edge of the viewport without using a fluid container? The "extended block" must remain in the markup due to CMS limitations. Any suggestions?

https://i.sstatic.net/vishD.png

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 due to usage of a pseudo element.

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

Answer №1

When working with HTML, make sure to add the class "row" to the div with the class "extend-me". Also, to extend the inside div to the right in CSS, add margin-left to 0. For example: .extend-me { margin-left: 0;}

Check out a sample here

<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'));
    } 

Answer №2

Check out this helpful codepen example: https://codepen.io/anon/pen/EedrQV

I made changes to the container element using the following CSS code:

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

By applying the above CSS, the entire container will shift to the right. You might need to tweak the col-sm classes to adjust the width as needed.

Answer №3

Check out this codepen for a demonstration: https://codepen.io/migli/pen/QWvqOeM

This example doesn't rely on absolute positioning; instead, it utilizes CSS root variables and CSS calculations:

/* 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);
}

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

Tips for customizing the base font size in a Bootstrap 4 template

My Java/Spring Boot webapp utilizes Thymeleaf HTML page templates and Bootstrap 4, with the foundation being a free Bootstrap 4 site template called 'Simple Sidebar': . The current setup is functioning smoothly for me. I am interested in adjusti ...

The Android WebView experiencing issues with the functionality of the Hamburger Menu

I'm facing an unusual issue with the Android WebView in my app. The hamburger menu on my website works perfectly fine on my mobile browser, but when I try to open it in the Android WebView, it does not fully expand to show the menu items. I have trie ...

What is the most efficient way to substitute text within an HTML document?

Is there a way to switch between languages on a website to replace text on multiple pages with a simple button click? What is the most efficient method for achieving this? This code snippet only changes text in the first div. Is there a way to implement a ...

A versatile CSS solution for fixed background images that stretch to fit any screen height across multiple browsers

Similar Question: Stretch and Scale CSS Background I am interested in finding a method to create a background with specific criteria: - remain fixed in place - adjust proportionally based on the window's height - work across all browser types or ...

Chrome not handling text wrapping within table cells properly

I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here: <form action="todos" m ...

Safari browser experiencing issues with JQuery Slider functionality

I am facing an issue with a slider that works perfectly in all browsers except Safari. I have been struggling to figure out the root cause of this problem. You can view the fiddler code here: http://jsfiddle.net/sjramsay/UyvvL/ It appears that when the co ...

Tips for organizing components in jQuery Mobile

Displaying a survey creation form: <!-- HTML structure --> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> Create Survey </h1> </div> <div id="main" data ...

Getting creative with jQuery: Adding a random class using addClass()

The html/css: <style> div.myWords p { display: hidden; } p.show { display: block; } </style> <div class="myWords"> <p>Hello</p> <p>Hola</p> <p>Bonjour</p> </div><!-- myWords --> Is ther ...

Steps for updating the homepage to display a personalized welcome message to the user after logging in and redirecting using node.js and

Upon arriving at the homepage, simply click on the sign-in button. Once redirected back to the home page, you will notice a personalized greeting saying 'Welcome [user]'. Wondering how to achieve this? It's as simple as changing the text fro ...

Creating a stunning effect with radial-gradient on an image element

I am looking to achieve a fading effect on an element using a radial gradient. While it works when I set an image as a background image, it does not work on the element directly. Is there a way I can accomplish this? My goal is to have the image fade fro ...

iOS does not support Css3 Transition

My Transition Code works on PC and android devices, but it does not work on iOS devices. I am only using HTML and CSS. /***** BOX 3 *****/ #box3 { height:240px; width:198px; border:1px solid #dedede; background-color:#fcfcfc; position:relative; overflow:h ...

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

Tips for adjusting the width of an HTML element that is set to position: fixed

<div class="ui-datatable-scrollable-view" style=" width: 100%; position: relative; "> <div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px"> </div> </div> ...

What is the best way to create a sidebar that remains open without triggering a new sidebar every time it is clicked

I am looking to add a sidebar that opens a new view without navigating to a different page. The sidebar remains consistent and I want to avoid duplicating it on all pages. Check out this photo for an example. My goal is to provide additional content or fe ...

What is the purpose of using a visually striking and prominent HTML tag?

After 15 years of working in html development and managing multiple websites, I have come to realize that bold and italic tags essentially serve the same purpose. I can apply CSS styles to both to achieve similar effects. I have even experimented with maki ...

Tips for Implementing Show and Hide Functionality in JavaScript

I have a piece of cshtml code similar to the following: <span class="p1"> Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book authored by Rajiv Malhotra and Aravindan Neelakandan, arguing ...

Tips for creating a loading page that displays while your website loads in the background

Is there a way to display a loading animation or image while my website is loading in the background? I've noticed that it takes about a minute for my website to fully load. I attempted to use <meta http-equiv="refresh" content="1000 ...

Anchor positioning within Firefox Mobile (for Android)

I created a homepage with multiple sections, each linked to from the main menu: <body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars">< ...

my goal is to transform this text into the background

For my latest project, I want the entire page that I've coded to be integrated into the <body> section with endless scrolling ability. Additionally, I need the loop that I created to remain fixed when scrolling so that I can easily place my con ...

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...