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 side of the screen which lead to the window scrolling right 15px.
My second partial solution is based on this answer for bootstrap 3: Bootstrap container-fluid padding
With this approach I get the bleed to the left of the screen, but 30px gap remains on the right. I can't see what I should have done to get the full width container working.
Here's code that fully represents the problem. The content that I want to go to the edge of screen happens to be a map. I doubt that's relevant, but have included in case:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript">
var map
var geocoder
function initMap() {
// 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>
<body style="background-color:blue;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
nav
</nav>
<div id="content" class="container-fluid full-width">
<div id="map-panel" class="container-fluid change-margins">
<div class="row">
<div class="col-12">
<div class="row">
<div class="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>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={api-key}=initMap"></script>
<div id="map">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-sm">
<h1>Content below map</h1>
</div>
</div>
</div>
</div>
</body>
</html>
What should I have done in order to get the content to meet the edge of the browser window?