diff --git a/examples/cartodb.html b/examples/cartodb.html
index 11f43a06b3..7ec92747e2 100644
--- a/examples/cartodb.html
+++ b/examples/cartodb.html
@@ -6,21 +6,18 @@ docs: >
   A simple example with an anonymous cartodb map
 tags: "simple, openstreetmap, attribution"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div>
-    <form class="form-horizontal">
-      <label>
-        Show countries larger than
-        <select id="country-area" class="form-control">
-          <option value="0" default>0 ㎢</option>
-          <option value="5000">5000 ㎢</option>
-          <option value="10000">10000 ㎢</option>
-          <option value="50000">50000 ㎢</option>
-          <option value="100000">100000 ㎢</option>
-        </select>
-      </label>
-    </form>
+<div id="map" class="map"></div>
+<form class="row">
+  <div class="col-auto">
+    <div class="input-group">
+      <label for="country-area" class="input-group-text">Show european countries larger than</label>
+      <select id="country-area" class="form-select">
+        <option value="0" default>0 ㎢</option>
+        <option value="5000">5000 ㎢</option>
+        <option value="10000">10000 ㎢</option>
+        <option value="50000">50000 ㎢</option>
+        <option value="100000">100000 ㎢</option>
+      </select>
+    </div>
   </div>
-</div>
+</form>
diff --git a/examples/chaikin.html b/examples/chaikin.html
index 1a07bb2bd0..1a92660621 100644
--- a/examples/chaikin.html
+++ b/examples/chaikin.html
@@ -12,7 +12,7 @@ docs: >
 tags: "smooth, smoothing, chaikin"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="shall-smoothen">Smooth drawn geometry?</label>
   <input id="shall-smoothen" type="checkbox" checked><br>
   <label for="iterations">Number of smoothings</label>
diff --git a/examples/cluster.html b/examples/cluster.html
index ffcba31d83..e17913f5e0 100644
--- a/examples/cluster.html
+++ b/examples/cluster.html
@@ -9,15 +9,15 @@ tags: "cluster, vector"
 <div id="map" class="map"></div>
 <form>
   <div class="form-group">
-    <label for="distance" class="col-form-label">Cluster distance</label>
-    <input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
+    <label for="distance" class="col-form-label pb-0">Cluster distance</label>
+    <input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
     <small class="form-text text-muted">
       The distance within which features will be clustered together.
     </small>
   </div>
   <div class="form-group">
-    <label for="min-distance" class="col-form-label">Minimum distance</label>
-    <input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
+    <label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
+    <input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
     <small class="form-text text-muted">
       The minimum distance between clusters. Can't be larger than the configured distance.
     </small>
diff --git a/examples/draw-and-modify-features.html b/examples/draw-and-modify-features.html
index 9be38fc551..7659c06182 100644
--- a/examples/draw-and-modify-features.html
+++ b/examples/draw-and-modify-features.html
@@ -7,7 +7,7 @@ docs: >
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
diff --git a/examples/draw-and-modify-geodesic.html b/examples/draw-and-modify-geodesic.html
index a5c7ffcf6a..dbedf8ed8a 100644
--- a/examples/draw-and-modify-geodesic.html
+++ b/examples/draw-and-modify-geodesic.html
@@ -13,7 +13,7 @@ docs: >
 tags: "draw, edit, modify, vector, circle, sphere, geodesic"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
diff --git a/examples/draw-features.html b/examples/draw-features.html
index 38557de98a..a228b800e7 100644
--- a/examples/draw-features.html
+++ b/examples/draw-features.html
@@ -8,16 +8,22 @@ docs: >
   point. To activate freehand drawing for lines, polygons, and circles, hold
   the `Shift` key. To remove the last point of a line or polygon, press "Undo".
 tags: "draw, edit, freehand, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
-  <label for="type">Geometry type: &nbsp;</label>
-  <select class="form-control me-2 mb-2 mt-2" id="type">
-    <option value="Point">Point</option>
-    <option value="LineString">LineString</option>
-    <option value="Polygon">Polygon</option>
-    <option value="Circle">Circle</option>
-    <option value="None">None</option>
-  </select>
-  <input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo">
-</form>
+<div class="row">
+  <div class="col-auto">
+    <span class="input-group">
+      <label class="input-group-text" for="type">Geometry type:</label>
+      <select class="form-select" id="type">
+        <option value="Point">Point</option>
+        <option value="LineString">LineString</option>
+        <option value="Polygon">Polygon</option>
+        <option value="Circle">Circle</option>
+        <option value="None">None</option>
+      </select>
+      <input class="form-control" type="button" value="Undo" id="undo">
+    </span>
+  </div>
+</div>
diff --git a/examples/draw-freehand.html b/examples/draw-freehand.html
index d6d84ccc5c..464ade1c5c 100644
--- a/examples/draw-freehand.html
+++ b/examples/draw-freehand.html
@@ -11,7 +11,7 @@ docs: >
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="LineString">LineString</option>
diff --git a/examples/draw-shapes.html b/examples/draw-shapes.html
index c1fb829022..ad5adc0ec0 100644
--- a/examples/draw-shapes.html
+++ b/examples/draw-shapes.html
@@ -12,16 +12,22 @@ docs: >
   circle. Star drawing uses a custom geometry function that converts a circle
   into a star using the center and radius provided by the draw interaction.
 tags: "draw, edit, freehand, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
-  <label for="type">Shape type: &nbsp;</label>
-  <select class="form-control me-2 mb-2 mt-2" id="type">
-    <option value="Circle">Circle</option>
-    <option value="Square">Square</option>
-    <option value="Box">Box</option>
-    <option value="Star">Star</option>
-    <option value="None">None</option>
-  </select>
-  <input class="form-control me-2 mb-2 mt-2" type="button" value="Undo" id="undo">
-</form>
+<div class="row">
+  <div class="col-auto">
+    <span class="input-group">
+      <label class="input-group-text" for="type">Shape type:</label>
+      <select class="form-select" id="type">
+        <option value="Circle">Circle</option>
+        <option value="Square">Square</option>
+        <option value="Box">Box</option>
+        <option value="Star">Star</option>
+        <option value="None">None</option>
+      </select>
+      <input class="form-control" type="button" value="Undo" id="undo">
+    </span>
+  </div>
+</div>
diff --git a/examples/export-map.html b/examples/export-map.html
index 755440370a..217bb608cb 100644
--- a/examples/export-map.html
+++ b/examples/export-map.html
@@ -11,5 +11,5 @@ resources:
   - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
 ---
 <div id="map" class="map"></div>
-<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
+<a id="export-png" class="btn btn-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>
diff --git a/examples/geolocation-orientation.html b/examples/geolocation-orientation.html
index 70329b5d73..c1aad54d05 100644
--- a/examples/geolocation-orientation.html
+++ b/examples/geolocation-orientation.html
@@ -28,7 +28,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
           background-color: lightgrey;
           padding: 4px;
       }
-      .button {
+      .geolocate-buttons {
           position: absolute;
           bottom: 40px;
           left: 10px;
@@ -39,9 +39,9 @@ tags: "fullscreen, geolocation, orientation, mobile"
     <div id="map" class="map"></div>
     <div id="info"></div>
     <img id="geolocation_marker" src="data/geolocation_marker.png" />
-    <div class="button">
-        <button id="geolocate">Geolocate Me!</button>
-        <button id="simulate">Simulate</button>
+    <div class="geolocate-buttons">
+      <button id="geolocate" class="btn btn-primary">Geolocate Me!</button>
+      <button id="simulate" class="btn btn-secondary">Simulate</button>
     </div>
     <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
     <script src="geolocation-orientation.js"></script>
diff --git a/examples/hit-tolerance.html b/examples/hit-tolerance.html
index 36a3ebaa3e..83ee46863a 100644
--- a/examples/hit-tolerance.html
+++ b/examples/hit-tolerance.html
@@ -12,9 +12,9 @@ tags: "hitTolerance"
 ---
 <div id="map" class="map"></div>
 <span id="status">Try to click the line in the map.</span>
-<form class="form-inline">
+<form>
   <label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</label>
-  <select id="hitTolerance" class="form-control">
+  <select id="hitTolerance">
     <option value="0" selected>0 Pixels</option>
     <option value="5">5 Pixels</option>
     <option value="10">10 Pixels</option>
diff --git a/examples/index.html b/examples/index.html
index d869361b0f..10bdb3f0e3 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -50,7 +50,7 @@
 
       <!-- menu items that get hidden below 768px width -->
       <nav class="collapse navbar-collapse" id="olmenu">
-        <form class="form-inline" role="search">
+        <form role="search">
           <div class="input-group">
             <input name="q" type="text" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
             <span class="input-group-text text-white bg-transparent" id="count"></span>
diff --git a/examples/layer-extent.html b/examples/layer-extent.html
index 9f897b7c37..c8b31d46db 100644
--- a/examples/layer-extent.html
+++ b/examples/layer-extent.html
@@ -10,9 +10,11 @@ tags: "extent, tilejson"
 cloak:
 - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
   value: Your Mapbox access token from https://mapbox.com/ here
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<button type="button" class="btn btn-default" id="India">India</button>
-<button type="button" class="btn btn-default" id="Argentina">Argentina</button>
-<button type="button" class="btn btn-default" id="Nigeria">Nigeria</button>
-<button type="button" class="btn btn-default" id="Sweden">Sweden</button>
+<button type="button" class="btn btn-light" id="India">India</button>
+<button type="button" class="btn btn-light" id="Argentina">Argentina</button>
+<button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
+<button type="button" class="btn btn-light" id="Sweden">Sweden</button>
diff --git a/examples/measure-style.html b/examples/measure-style.html
index 0baea158e7..2b85ce00b1 100644
--- a/examples/measure-style.html
+++ b/examples/measure-style.html
@@ -18,7 +18,7 @@ docs: >
 tags: "draw, edit, measure, modify, style, vector"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Measurement type &nbsp;</label>
   <select id="type">
     <option value="LineString">Length (LineString)</option>
diff --git a/examples/measure.html b/examples/measure.html
index 0cc627a964..205366e42c 100644
--- a/examples/measure.html
+++ b/examples/measure.html
@@ -15,7 +15,7 @@ docs: >
 tags: "draw, edit, measure, vector"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Measurement type &nbsp;</label>
   <select id="type">
     <option value="length">Length (LineString)</option>
diff --git a/examples/modify-scale-and-rotate.html b/examples/modify-scale-and-rotate.html
index f6455675fd..7573650b40 100644
--- a/examples/modify-scale-and-rotate.html
+++ b/examples/modify-scale-and-rotate.html
@@ -18,7 +18,7 @@ docs: >
 tags: "draw, edit, modify, vector, scale, rotate"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
diff --git a/examples/reprojection-by-code.html b/examples/reprojection-by-code.html
index d09702f50f..0af34d35f8 100644
--- a/examples/reprojection-by-code.html
+++ b/examples/reprojection-by-code.html
@@ -7,27 +7,31 @@ docs: >
   OSM (EPSG:3857) to arbitrary projection by searching
   in <a href="https://epsg.io/">EPSG.io</a> database.
 tags: "reprojection, projection, proj4js, epsg.io, graticule"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
-  <label for="epsg-query">Search projection:&nbsp</label>
-  <input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
-  <button id="epsg-search" class="btn">Search</button>
-  <span id="epsg-result"></span>
+<form class="row">
+  <span class="col-auto">
+    <span class="input-group">
+      <label class="input-group-text" for="epsg-query">Search projection:&nbsp</label>
+      <input type="text" id="epsg-query" placeholder="4326, 27700, 3031, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
+      <button class="btn btn-outline-secondary" id="epsg-search">Search</button>
+    </span>
+  </span>
+  <span class="mt-2" id="epsg-result">&nbsp;</span>
 </form>
-<form class="form-inline">
-  <label for="render-edges">
-    Render reprojection edges:&nbsp;
-    <input type="checkbox" id="render-edges" />
-  </label>
-  &nbsp;&nbsp;&nbsp;&nbsp;
-  <label for="show-tiles">
-    Show tile coordinates:&nbsp;
-    <input type="checkbox" id="show-tiles" />
-  </label>
-  &nbsp;&nbsp;&nbsp;&nbsp;
-  <label for="show-graticule">
-    Show graticule:&nbsp;
-    <input type="checkbox" id="show-graticule" />
-  </label>
+<form>
+  <div class="form-check mt-2">
+    <input class="form-check-input" type="checkbox" id="render-edges" />
+    <label class="form-check-label" for="render-edges">Render reprojection edges</label><br>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="show-tiles" />
+    <label class="form-check-label" for="show-tiles">Show tile coordinates</label><br>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="checkbox" id="show-graticule" />
+    <label class="form-check-label" for="show-graticule">Show graticule</label>
+  </div>
 </form>
diff --git a/examples/reprojection.css b/examples/reprojection.css
index 5e0a1ba9f8..68b716c7ea 100644
--- a/examples/reprojection.css
+++ b/examples/reprojection.css
@@ -1,3 +1,6 @@
-.form-inline label {
-  justify-content: left;
+.reprojection-form {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  grid-gap: 5px;
+  gap: 5px;
 }
diff --git a/examples/reprojection.html b/examples/reprojection.html
index e7da1e080e..03f92703be 100644
--- a/examples/reprojection.html
+++ b/examples/reprojection.html
@@ -7,42 +7,33 @@ docs: >
 tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
-  <div class="col-md-3">
-    <label for="base-layer">Base map:</label>
-    <select id="base-layer">
-      <option value="osm">OSM (EPSG:3857)</option>
-      <option value="wms4326">WMS (EPSG:4326)</option>
-    </select>
-  </div>
-  <div class="col-md-4">
-    <label for="overlay-layer">Overlay map:</label>
-    <select id="overlay-layer">
-      <option value="bng">British National Grid (EPSG:27700)</option>
-      <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
-      <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
-      <option value="states">United States (EPSG:3857)</option>
-    </select>
-  </div>
-  <div class="col-md-5">
-    <label for="view-projection">View projection:</label>
-    <select id="view-projection">
-      <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
-      <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
-      <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
-      <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
-      <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
-      <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
-      <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
-      <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
-    </select>
-  </div>
-</form>
-<form class="form-inline">
-  <div class="col-md-auto">
-    <label>
-      Render reprojection edges:&nbsp;
-      <input type="checkbox" id="render-edges" />
-    </label>
-  </div>
+<form class="reprojection-form">
+  <label for="base-layer">Base map:</label>
+  <select id="base-layer">
+    <option value="osm">OSM (EPSG:3857)</option>
+    <option value="wms4326">WMS (EPSG:4326)</option>
+  </select>
+
+  <label for="overlay-layer">Overlay map:</label>
+  <select id="overlay-layer">
+    <option value="bng">British National Grid (EPSG:27700)</option>
+    <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
+    <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
+    <option value="states">United States (EPSG:3857)</option>
+  </select>
+
+  <label for="view-projection">View projection:</label>
+  <select id="view-projection">
+    <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
+    <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
+    <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
+    <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
+    <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
+    <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
+    <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
+    <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
+  </select>
+
+  <label for="render-edges">Render reprojection edges:</label>
+  <span><input type="checkbox" id="render-edges" /></span>
 </form>
diff --git a/examples/select-features.html b/examples/select-features.html
index 215ace4caa..c936d99266 100644
--- a/examples/select-features.html
+++ b/examples/select-features.html
@@ -9,9 +9,9 @@ docs: >
 tags: "select, vector"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Action type &nbsp;</label>
-  <select id="type" class="form-control">
+  <select id="type">
     <option value="click" selected>Click</option>
     <option value="singleclick">Single-click</option>
     <option value="pointermove">Hover</option>
diff --git a/examples/tracing.html b/examples/tracing.html
index 172d563764..78403b3fba 100644
--- a/examples/tracing.html
+++ b/examples/tracing.html
@@ -12,7 +12,7 @@ docs: >
 tags: "draw, trace, snap, vector, topology"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Polygon">Polygon</option>
diff --git a/examples/vector-esri-edit.html b/examples/vector-esri-edit.html
index 8856e8895b..c0c5bc7e47 100644
--- a/examples/vector-esri-edit.html
+++ b/examples/vector-esri-edit.html
@@ -9,7 +9,7 @@ resources:
   - https://code.jquery.com/jquery-3.5.1.min.js
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Draw or modify &nbsp;</label>
   <select id="type">
     <option value="DRAW">Draw</option>
diff --git a/examples/vector-tile-selection.html b/examples/vector-tile-selection.html
index 7107debc34..fa9c1c94a9 100644
--- a/examples/vector-tile-selection.html
+++ b/examples/vector-tile-selection.html
@@ -14,9 +14,9 @@ docs: >
 tags: "vector tiles, selection"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Action type &nbsp;</label>
-  <select id="type" class="form-control">
+  <select id="type">
     <option value="singleselect" selected>Single Select</option>
     <option value="multiselect">Multi Select</option>
     <option value="singleselect-hover">Single Select on hover</option>