Bootstrap 4 full width iframe inside a container

For semantic purposes sometimes you want to nest a full width item (in this instance a google map iframe) inside a .container element.

Here's the map:

In order to make this full size you first need to remove the width and height properties from the url then you need to substitute some custom css. The modern way to do this is to use vh and vw. In order to make the iframe the same width as the viewer you have to set the width to 100vw. That alone won't work though as you have to move the whole lot left in order to make it appear centrally. To do that you can use calc() and position: relative;.

iframe {
    width: 100vw;
    height: 450px;
    position: relative;
    left: calc(-50vw + 50%);
}

The key here is the position of the left edge which is set to -50vw which sets it at the left hand edge of it's container, plus 50% of the parent element's width, or at the left hand side of the viewport. Here's the result: