Insert responsive GMaps in bootstrap's jumbotron - css

Question

I'm using bootstrap jumbotron, and I want insert a google map inside, but I'm having a problem. I'm able to insert the map, but in this jumbtron I have also an alert that isn't shown anymore after I put the map.
<div class="jumbotron" id="jumbotron">
<div class="container theme-showcase" role="main">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</div>
<script>
function initMap() {
var mapDiv = document.getElementById('jumbotron');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
Alert that should be shown:
How it is shown after map is inserted:
EDIT:
The alert div is shown below the map, despite the fact the absolute position of the same alert
New code:
<div class="jumbotron">
<div class="container theme-showcase" role="main">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<div id="map"></div>
</div>