So I have rendered the tomtom map into a bootstrap container as indicated below and everything seems to work fine as shown here
HTML
<div class="container">
<div id="map"></div>
</div>
Javascript code
var map = tomtom.L.map('map', {
key: '<my key>',
basePath: 'tomtom',
source: 'raster',
center: KenyaCoordinates,
zoom: 6.4,
});
Problem is when you interract with the rendered map, it somehow resizes, overrides all the other elements and covers the entire screen as shown in this other image