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)...
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col">
(edge to edge content...)
</div>
</div>
</div>
Therefore, for your layout..
- remove the padding on the container-fluid using
px-0 - 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.
<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 full-width">
<div class="row mt-3">
<div class="col-sm">
<h1>Content below map</h1>
</div>
</div>
</div>
</div>
</body>
Solution 3:
<div id="map-panel" class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<h1> Title </h1>
</div>
</div>
</div>
Post a Comment for "Make A Bootstrap 4 Container-fluid Go Full Bleed To Edge Of Browser Window"