CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4
user19686218
user19686218

Reputation:

How to have a column extend past container bootstrap

I am using bootstrap row/columns, google maps iframe, and the container class from bootstrap

I want what would basically amount to this: enter image description here

I want a row that goes across the entire width of the page. I want two columns of equal length (col-md-6).

In the first column, I want some content and text that respects the pages 'container' width. So whatever content inside the div starts and respects the container class from Bootstrap.

In the second column, a google maps iframe that starts from the start of the div, and overflows through the entire second half of the row and width.

This is what I currently have with Bootstrap and HTML.

It is of course not the desired result, as the container class makes the iframe map not go past the container width.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Content</h1>
        </div>
        <div class="col-md-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.33209119498!2d-121.4429125!3d38.56173395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA!5e0!3m2!1sen!2sus!4v1665949400296!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>
    </div>
</div>

enter image description here

Upvotes: 1

Views: 354

Answers (1)

Schwarz Developing
Schwarz Developing

Reputation: 293

You can't do that with the base container. But with the container-fluid and the offset classes you can realize it. Here is an example:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5 offset-md-1 col-lg-4 offset-lg-2 bg-secondary">
            <h1>Content</h1>
        </div>
        <div class="col-md-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.33209119498!2d-121.4429125!3d38.56173395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA!5e0!3m2!1sen!2sus!4v1665949400296!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>
    </div>
</div>

Upvotes: 1

Related Questions