Leaflet.js map not showing until resize

[HelenLF]

I have a leaflet.js map on a Bootstrap web page.
On first view of the page the map doesn't show, but on resize it shows.
Can anyone suggest a fix for this?
This is my code.

html

  <div id="mapid"></div>

css

               <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
       crossorigin=""/>
       #mapid{ height: 500px; width: 100%}

scripts

        <script src="js/jquery.min.js"></script> <!-- map scripts --> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
           integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
           crossorigin=""></script> <script>       
            var mymap = L.map('mapid').setView([55.70926, -3.87980], 10);
            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,          Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox.streets',
            accessToken: 'my access token is added here'
            }).addTo(mymap);
            L.polygon([
            [55.88084,-4.33693],
            [55.86716,-3.89044],
            [55.70384,-3.73715],
            [55.66049,-3.82521],
            [55.64809,-4.14605]
            ]).addTo(mymap);
       </script>

[HelenLF]

Finally after two days and trying all the suggestions online, I've got this working. In case it helps anyone else, what I did was add this code...

  $(window).trigger('resize');