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

Bắt đầu bằng cách tạo HTML từ ví dụ folium.Map và kiểm tra các liên kết stylesheet mặc định, đặc biệt là Bootstrap 3 CSS và các kiểu modal của Bootstrap 5. So sánh hành vi của modal khi có và không có stylesheet Bootstrap 3, sau đó xác minh rằng một bản sửa lỗi khôi phục vị trí mong đợi của modal Bootstrap 5 mà không làm hỏng glyphicons hoặc các thành phần Folium khác.

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