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

まず folium.Map の例から HTML を生成し、デフォルトのスタイルシートリンク、特に Bootstrap 3 CSS と Bootstrap 5 のモーダルスタイルを調べます。Bootstrap 3 のスタイルシートがある場合とない場合でモーダルの動作を比較し、その後、修正によって glyphicons やその他の Folium コンポーネントを壊すことなく、期待される Bootstrap 5 モーダルの位置が復元されることを確認します。

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"/>