Default CSS for glyphicons produces conflict with bootstrap5 components (with potential solution)

Commencez par générer le HTML à partir de l’exemple folium.Map et examinez les liens vers les feuilles de style par défaut, en particulier le Bootstrap 3 CSS et les styles de modal de Bootstrap 5. Comparez le comportement du modal avec et sans la feuille de style Bootstrap 3, puis vérifiez qu’un correctif restaure la position attendue du modal Bootstrap 5 sans casser glyphicons ni les autres composants de Folium.

Describe the bug
Manually adding a bootstrap5 modal to the html body results in wrong position of the modal (see screenshots at the end).

To Reproduce

import folium

my_map = folium.Map()

# Adding modal from https://www.w3schools.com/bootstrap5/bootstrap_modal.php
my_map.get_root().html.add_child(folium.Element("""
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
"""))

my_map.save(outfile="map.html")

Expected behavior
The modal should appear in the same way as in the bootstrap5 modal example on w3schools.

Environment:

• OS: macOS 14.0
• Browser: Firefox 118.0.1
• Python version: 3.10.7
• folium version: 0.14.0
• branca version: 0.6.0
• Plain .py, no Jupyter Notebook

Possible solutions
This issue is resolved when uncommenting the stylesheet on netdna for bootstrap 3.0.0, however, I cannot tell what the implications to other functions of folium that would have (e.g. glyphicons).

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<!--    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

Screenshots
Wrong: with default CSS <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>

Correct: without default CSS <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>