Make A Bootstrap 4 Container-fluid Go Full Bleed To Edge Of Browser Window

I'm using bootstrap 4 and I'm trying to get a bootrap container and its content to go full width and bleed all the way to the view port. My initial solution added padding off the s

Solution 1:

Bootstrap 5 - update 2021

The .no-gutters class has been replaced with .g-0. Use it the .row where you want no spacing, and .p-0 on the container for an edge-to-edge width.

Bootstrap 4 - original question.

Because Bootstrap's grid row has negative margins, removing padding from the the container alone won't work. You also shouldn't have nested containers.

To make a full width layout (no extra CSS)...

<divclass="container-fluid px-0"><divclass="row no-gutters"><divclass="col">
            (edge to edge content...)
        </div></div></div>

Therefore, for your layout..

1. remove the padding on the container-fluid using px-0
2. remove the negative margins on the row using no-gutters:

https://codeply.com/p/5ihF13YSBL

Also, since you're using only 1 grid column, you can simply zero out the padding on it using px-0.

---

To remove the spacing between columns (gutter) see this question

Solution 2:

Use this code. You need to add one more class "full-width" to the "container-fluid" class name.

<scripttype="text/javascript">var map
    var geocoder

    functioninitMap() {
        // received letters array// create map object
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            mapTypeId: 'terrain'
        })

        var userLocation = "London"
        geocoder = new google.maps.Geocoder()
        geocoder.geocode({'address': "London"}, function(results, status) {
            if (status === 'OK') {
                map.setCenter(results[0].geometry.location);
            } else {
                console.log('Geocode was not successful for the following reason: ' + status)
            }
        })


        google.maps.event.addDomListener(window, 'load', initMap)
    }
    </script><style>.container-fluid.full-width {
            padding:0px;
        }

        .change-margins {
            margin-left:-15px;
            margin-right:-15px;
        }
    </style></head><bodystyle="background-color:blue;"><navclass="navbar navbar-expand-lg navbar-light bg-light">
      nav     
    </nav><divid="content"class="container-fluid full-width"><divid="map-panel"class="container-fluid change-margins"><divclass="row"><divclass="col-12"><divclass="row"><divclass="col-12 m-2"><h1>Title</h1></div></div><style>/* Always set the map height explicitly to define the size of the div
                        * element that contains the map. */#map {
                            height: 100%;
                            min-height: 300px;
                        }
                        /* Optional: Makes the sample page fill the window. */html, body {
                            height: 100%;
                            margin: 0;
                            padding: 0;
                        }
                    </style><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"></script><divid="map"></div></div></div></div><divclass="container-fluid full-width"><divclass="row mt-3"><divclass="col-sm"><h1>Content below map</h1></div></div></div></div></body>

Solution 3:

<divid="map-panel"class="container-fluid"><divclass="row"><divclass="col-12 p-0"><h1> Title </h1></div></div></div>