Replace Bootstrap4 class with views

37 files changed, 293 insertions, 359 deletions

diff --git a/resources/views/modules/ancestors-chart/page.phtml b/resources/views/modules/ancestors-chart/page.phtml
index c76b6feeaf..420f1f2a39 100644
--- a/resources/views/modules/ancestors-chart/page.phtml
+++ b/resources/views/modules/ancestors-chart/page.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 <?php use Fisharebest\Webtrees\View; ?>
 
@@ -18,7 +16,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -37,8 +35,8 @@
                 <?= I18N::translate('Layout') ?>
             </legend>
             <div class="col-sm-9 wt-page-options-value">
-                <?= Bootstrap4::radioButtons('chart_style', $chart_styles, $chart_style, true) ?>
-                <?= Bootstrap4::checkbox(I18N::translate('Show cousins'), false, ['name' => 'show_cousins', 'disabled' => $chart_style !== 'booklet', 'checked' => $show_cousins]) ?>
+                <?= view('components/radios-inline', ['name' => 'chart_style', 'options' => $chart_styles, 'selected' => $chart_style]) ?>
+                <?= view('components/checkbox', ['label' => I18N::translate('Show cousins'), 'name' => 'show_cousins', 'disabled' => $chart_style !== 'booklet', 'checked' => $show_cousins]) ?>
             </div>
         </div>
     </fieldset>
diff --git a/resources/views/modules/batch_update/admin.phtml b/resources/views/modules/batch_update/admin.phtml
index ca7f16ebca..3772a6a97d 100644
--- a/resources/views/modules/batch_update/admin.phtml
+++ b/resources/views/modules/batch_update/admin.phtml
@@ -1,11 +1,15 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\I18N; ?>
+<?php
+
+use Fisharebest\Webtrees\I18N;
+use Fisharebest\Webtrees\View;
+
+?>
 
 <?= view('components/breadcrumbs', ['links' => [route('admin-control-panel') => I18N::translate('Control panel'), route('modules') => I18N::translate('Module administration'), $title]]) ?>
 
 <h1><?= $title ?></h1>
 
-<form >
+<form id="batch-update-form">
     <input type="hidden" name="route" value="module">
     <input type="hidden" name="module" value="batch_update">
     <input type="hidden" name="action" value="Admin">
@@ -15,13 +19,13 @@
     <div class="row form-group">
         <label class="col-sm-3 col-form-label"><?= I18N::translate('Family tree') ?></label>
         <div class="col-sm-9">
-            <?= Bootstrap4::select($trees, $tree->name(), ['id' => 'ged', 'name' => 'ged', 'onchange' => 'this.form.submit();']) ?>
+            <?= view('components/select', ['name' => 'ged', 'selected' => $tree->name(), 'values' => $trees]) ?>
         </div>
     </div>
     <div class="row form-group">
         <label class="col-sm-3 col-form-label"><?= I18N::translate('Batch update') ?></label>
         <div class="col-sm-9">
-            <select class="form-control" name="plugin" onchange="this.form.submit();">
+            <select class="form-control" name="plugin">
                 <?php if ($plugin === null) : ?>
                     <option value="" selected></option>
                 <?php endif ?>
@@ -79,9 +83,9 @@
                                 <?= I18N::translate('Update all') ?>
                             </button>
                         <?php else : ?>
-                        <button class="btn btn-primary" disabled title="<?= I18N::translate('Your user account does not have “automatically accept changes” enabled. You will only be able to change one record at a time.') ?>">
-                            <?= I18N::translate('Update all') ?>
-                        </button>
+                            <button class="btn btn-primary" disabled title="<?= I18N::translate('Your user account does not have “automatically accept changes” enabled. You will only be able to change one record at a time.') ?>">
+                                <?= I18N::translate('Update all') ?>
+                            </button>
                         <?php endif ?>
                     </div>
                 </div>
@@ -99,3 +103,11 @@
         <?php endif ?>
     <?php endif ?>
 </form>
+
+<?php View::push('javascript') ?>
+<script>
+    $("#batch-update-form input, #batch-update-form select").change(function () {
+        $("#batch-update-form").submit();
+    });
+</script>
+<?php View::endpush() ?>
diff --git a/resources/views/modules/census-assistant.phtml b/resources/views/modules/census-assistant.phtml
index 0146b986c2..626cda6af7 100644
--- a/resources/views/modules/census-assistant.phtml
+++ b/resources/views/modules/census-assistant.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 <?php use Fisharebest\Webtrees\View; ?>
 
@@ -25,7 +24,7 @@
         <div class="form-group col-sm-6">
             <div class="input-group">
                 <div class="input-group-prepend">
-                    <label class="input-group-addon" for="census-assistant-citation">
+                    <label class="input-group-text" for="census-assistant-citation">
                         <?= I18N::translate('Citation') ?>
                     </label>
                 </div>
@@ -52,17 +51,17 @@
                     <?= I18N::translate('Individuals') ?>
                 </span>
             </div>
-            <?= FunctionsEdit::formControlIndividual($individual->tree(), $individual, ['id' => 'census-assistant-individual', 'style' => 'width:100%']) ?>
-            <span class="input-group-btn">
-                        <button type="button" class="btn btn-primary" id="census-assistant-add" aria-label="<?= I18N::translate('add') ?>">
-                            <?= view('icons/add') ?>
-                        </button>
-                    </span>
-            <span class="input-group-btn">
-                        <button type="button" class="btn btn-primary" id="census-assistant-head" aria-label="<?= I18N::translate('Head of household') ?>">
-                            <?= view('icons/individual') ?>
-                        </button>
-                    </span>
+            <?= view('components/select-individual', ['name' => 'census-assistant-individual', 'individual' => $individual, 'tree' => $individual->tree()]) ?>
+            <div class="input-group-append">
+                <button type="button" class="btn btn-primary" id="census-assistant-add" aria-label="<?= I18N::translate('add') ?>">
+                    <?= view('icons/add') ?>
+                </button>
+            </div>
+            <div class="input-group-append">
+                <button type="button" class="btn btn-primary" id="census-assistant-head" aria-label="<?= I18N::translate('Head of household') ?>">
+                    <?= view('icons/individual') ?>
+                </button>
+            </div>
         </div>
     </div>
 
diff --git a/resources/views/modules/charts/config.phtml b/resources/views/modules/charts/config.phtml
index 1fdb03e789..365ba1b3b2 100644
--- a/resources/views/modules/charts/config.phtml
+++ b/resources/views/modules/charts/config.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -7,7 +5,7 @@
         <?= I18N::translate('Chart type') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($charts, $type, ['id' => 'type', 'name' => 'type']) ?>
+        <?= view('components/select', ['name' => 'type', 'selected' => $type, 'values' => $charts]) ?>
     </div>
 </div>
 
@@ -18,6 +16,6 @@
         </label>
     </label>
     <div class="col-sm-9">
-        <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'pid', 'name' => 'pid']) ?>
+        <?= view('components/select-individual', ['name' => 'pid', 'individual' => $individual, 'tree' => $tree]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/clippings/add-options.phtml b/resources/views/modules/clippings/add-options.phtml
index 837c83bdc4..9439f408fb 100644
--- a/resources/views/modules/clippings/add-options.phtml
+++ b/resources/views/modules/clippings/add-options.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <h2 class="wt-page-title"><?= $title ?></h2>
@@ -11,7 +10,7 @@
             <?= I18N::translate('Add to the clippings cart') ?>
         </div>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::radioButtons('option', $options, $default, false, []) ?>
+            <?= view('components/radios', ['name' => 'option', 'options' => $options, 'selected' => $default]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/compact-chart/page.phtml b/resources/views/modules/compact-chart/page.phtml
index e99bc29cb8..fc31a96a96 100644
--- a/resources/views/modules/compact-chart/page.phtml
+++ b/resources/views/modules/compact-chart/page.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <h2 class="wt-page-title">
@@ -16,7 +15,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($individual->tree(), $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/descendancy_chart/page.phtml b/resources/views/modules/descendancy_chart/page.phtml
index 013faf30f3..f389315869 100644
--- a/resources/views/modules/descendancy_chart/page.phtml
+++ b/resources/views/modules/descendancy_chart/page.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <h2 class="wt-page-title">
@@ -17,7 +15,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -36,7 +34,7 @@
                 <?= I18N::translate('Layout') ?>
             </legend>
             <div class="col-sm-9 wt-page-options-value">
-                <?= Bootstrap4::radioButtons('chart_style', $chart_styles, $chart_style, true) ?>
+                <?= view('components/radios-inline', ['name' => 'chart_style', 'options' => $chart_styles, 'selected' => $chart_style]) ?>
             </div>
         </div>
     </fieldset>
diff --git a/resources/views/modules/family-book-chart/page.phtml b/resources/views/modules/family-book-chart/page.phtml
index 977d5740d6..f1bbace9c8 100644
--- a/resources/views/modules/family-book-chart/page.phtml
+++ b/resources/views/modules/family-book-chart/page.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
@@ -17,7 +16,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($individual->tree(), $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -26,7 +25,7 @@
             <?= I18N::translate('Generations') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::select(FunctionsEdit::numericOptions(range(2, 5)), $book_size, ['id' => 'book_size', 'name' => 'book_size']) ?>
+            <?= view('components/select', ['name' => 'book_size', 'selected' => $book_size, 'values' => FunctionsEdit::numericOptions(range(2, 5))]) ?>
         </div>
     </div>
 
@@ -35,7 +34,7 @@
             <?= I18N::translate('Descendant generations') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::select(FunctionsEdit::numericOptions(range($minimum_generations, $maximum_generations)), $generations, ['id' => 'generations', 'name' => 'generations']) ?>
+            <?= view('components/select', ['name' => 'generations', 'selected' => $generations, 'values' => FunctionsEdit::numericOptions(range($minimum_generations, $maximum_generations))]) ?>
         </div>
     </div>
 
@@ -45,7 +44,7 @@
                 <?= I18N::translate('Spouses') ?>
             </legend>
             <div class="col-sm-9 wt-page-options-value">
-                <?= Bootstrap4::checkbox(I18N::translate('Show spouses'), false, ['name' => 'show_spouse', 'checked' => $show_spouse]) ?>
+                <?= view('components/checkbox', ['label' => I18N::translate('Show spouses'), 'name' => 'show_spouse', 'checked' => $show_spouse]) ?>
             </div>
         </div>
     </fieldset>
diff --git a/resources/views/modules/fanchart/page.phtml b/resources/views/modules/fanchart/page.phtml
index d6601e15d2..b3c9f8d119 100644
--- a/resources/views/modules/fanchart/page.phtml
+++ b/resources/views/modules/fanchart/page.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
@@ -17,7 +16,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -26,7 +25,7 @@
             <?= I18N::translate('Layout') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::select($chart_styles, $chart_style, ['id' => 'chart_style', 'name' => 'chart_style']) ?>
+            <?= view('components/select', ['name' => 'chart_style', 'selected' => $chart_style, 'values' => $chart_styles]) ?>
         </div>
     </div>
 
@@ -35,7 +34,7 @@
             <?= I18N::translate('Generations') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::select(FunctionsEdit::numericOptions(range($minimum_generations, $maximum_generations)), $generations, ['id' => 'generations', 'name' => 'generations']) ?>
+            <?= view('components/select', ['name' => 'generations', 'selected' => $generations, 'values' => FunctionsEdit::numericOptions(range($minimum_generations, $maximum_generations))]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/faq/config.phtml b/resources/views/modules/faq/config.phtml
index c682e63d53..8c36ce770c 100644
--- a/resources/views/modules/faq/config.phtml
+++ b/resources/views/modules/faq/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <?= view('components/breadcrumbs', ['links' => [route('admin-control-panel') => I18N::translate('Control panel'), route('modules') => I18N::translate('Modules'), $title]]) ?>
@@ -19,7 +18,7 @@
     <label for="ged" class="sr-only">
         <?= I18N::translate('Family tree') ?>
     </label>
-    <?= Bootstrap4::select($tree_names, $tree->name(), ['id' => 'ged', 'name' => 'ged']) ?>
+    <?= view('components/select', ['name' => 'ged', 'selected' => $tree->name(), 'values' => $tree_names]) ?>
     <input type="submit" class="btn btn-primary" value="<?= I18N::translate('show') ?>">
 </form>
 </p>
diff --git a/resources/views/modules/faq/edit.phtml b/resources/views/modules/faq/edit.phtml
index 65d0969a71..5cc062483a 100644
--- a/resources/views/modules/faq/edit.phtml
+++ b/resources/views/modules/faq/edit.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
@@ -58,7 +57,7 @@
         </label>
 
         <div class="col-sm-9">
-            <?= Bootstrap4::select(['' => I18N::translate('All')] + $tree_names, $tree->name(), ['id' => 'gedcom_id', 'name' => 'gedcom_id']) ?>
+            <?= view('components/select', ['name' => 'gedcom_id', 'selected' => $tree->name(), 'values' => $tree_names]) ?>
             <p class="small text-muted">
                 <?= /* I18N: FAQ = “Frequently Asked Question” */
                 I18N::translate('An FAQ can be displayed on just one of the family trees, or on all the family trees.') ?>
diff --git a/resources/views/modules/faq/list.phtml b/resources/views/modules/faq/list.phtml
deleted file mode 100644
index e159aa9626..0000000000
--- a/resources/views/modules/faq/list.phtml
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php use Fisharebest\Webtrees\I18N; ?>
-<?php use Fisharebest\Webtrees\View; ?>
-
-<h2 class="wt-page-title"><?= $title ?></h2>
-
-<table id="story_table" class="w-100">
-    <thead>
-        <tr>
-            <th><?= I18N::translate('Story title') ?></th>
-            <th><?= I18N::translate('Individual') ?></th>
-        </tr>
-    </thead>
-    <tbody>
-        <?php foreach ($stories as $story) : ?>
-            <tr>
-                <td>
-                    <?= e($story->title) ?>
-                </td>
-                <td>
-                    <a href="<?= e($story->individual->url()) ?>#tab-stories">
-                        <?= $story->individual->fullName() ?>
-                    </a>
-                </td>
-            </tr>
-        <?php endforeach ?>
-    </tbody>
-</table>
-
-<?php View::push('javascript') ?>
-<script>
-  $("#story_table").dataTable({
-    dom: '<"H"pf<"dt-clear">irl>t<"F"pl>',
-    autoWidth: false,
-    paging: true,
-    pagingType: "full_numbers",
-    lengthChange: true,
-    filter: true,
-    info: true,
-    sorting: [[0,"asc"]],
-    columns: [
-        /* 0-name */ null,
-      /* 1-NAME */ null
-    ],
-    <?= I18N::datatablesI18N() ?>
-  });
-
-</script>
-<?php View::endpush() ?>
diff --git a/resources/views/modules/favorites/favorites.phtml b/resources/views/modules/favorites/favorites.phtml
index 6debbacdbe..66e9a751ee 100644
--- a/resources/views/modules/favorites/favorites.phtml
+++ b/resources/views/modules/favorites/favorites.phtml
@@ -1,6 +1,5 @@
 <?php
 
-use Fisharebest\Webtrees\Functions\FunctionsEdit;
 use Fisharebest\Webtrees\I18N;
 use Fisharebest\Webtrees\Individual;
 use Illuminate\Support\Collection;
@@ -66,19 +65,19 @@ use Illuminate\Support\Collection;
                             </div>
                         </div>
                         <div class="col-sm-8 col-md-9">
-                            <?= FunctionsEdit::formControlIndividual($tree, null, ['id' => 'xref', 'name' => 'indi-xref']) ?>
+                            <?= view('components/select-individual', ['name' => 'indi-xref', 'tree' => $tree]) ?>
                         </div>
 
                         <div class="col-sm-4 col-md-3">
                             <div class="form-check">
                                 <input class="form-check-input" type="radio" name="type" value="fam" id="fav-fam-<?= e($block_id) ?>">
-                                <label for="fav-fam-<?= e($block_id) ?>">
+                                <label for="fam-xref">
                                     <?= I18N::translate('Family') ?>
                                 </label>
                             </div>
                         </div>
                         <div class="col-sm-8 col-md-9">
-                            <?= FunctionsEdit::formControlFamily($tree, null, ['id' => 'xref', 'name' => 'fam-xref']) ?>
+                            <?= view('components/select-family', ['name' => 'fam-xref', 'tree' => $tree]) ?>
                         </div>
 
                         <div class="col-sm-4 col-md-3">
@@ -90,7 +89,7 @@ use Illuminate\Support\Collection;
                             </div>
                         </div>
                         <div class="col-sm-8 col-md-9">
-                            <?= FunctionsEdit::formControlMediaObject($tree, null, ['id' => 'xref', 'name' => 'obje-xref']) ?>
+                            <?= view('components/select-media', ['name' => 'obje-xref', 'tree' => $tree]) ?>
                         </div>
 
                         <div class="col-sm-4 col-md-3">
@@ -102,7 +101,7 @@ use Illuminate\Support\Collection;
                             </div>
                         </div>
                         <div class="col-sm-8 col-md-9">
-                            <?= FunctionsEdit::formControlSource($tree, null, ['id' => 'xref', 'name' => 'sour-xref']) ?>
+                            <?= view('components/select-source', ['name' => 'sour-xref', 'tree' => $tree]) ?>
                         </div>
 
                         <div class="col-sm-4 col-md-3">
@@ -113,8 +112,8 @@ use Illuminate\Support\Collection;
                                 </label>
                             </div>
                         </div>
-                        <div class="col-sm-8 col-md-">
-                            <?= FunctionsEdit::formControlRepository($tree, null, ['id' => 'xref', 'name' => 'repo-xref']) ?>
+                        <div class="col-sm-8 col-md-9">
+                            <?= view('components/select-repository', ['name' => 'repo-xref', 'tree' => $tree]) ?>
                         </div>
 
                         <div class="col-sm-4 col-md-3">
diff --git a/resources/views/modules/gedcom_stats/config.phtml b/resources/views/modules/gedcom_stats/config.phtml
index b330f7bc7a..64e8db48db 100644
--- a/resources/views/modules/gedcom_stats/config.phtml
+++ b/resources/views/modules/gedcom_stats/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <fieldset class="form-group">
@@ -7,11 +6,7 @@
             <?= I18N::translate('Last change') ?>
         </legend>
         <div class="col-sm-9">
-            <?= Bootstrap4::checkbox(/* I18N: label for yes/no option */
-                I18N::translate('Show date of last update'),
-                false,
-                ['name' => 'show_last_update', 'checked' => (bool) $show_last_update]
-            ) ?>
+            <?= view('components/checkbox', ['label' => /* I18N: label for yes/no option */ I18N::translate('Show date of last update'),'name' => 'show_last_update', 'checked' => (bool) $show_last_update]) ?>
         </div>
     </div>
 </fieldset>
@@ -22,22 +17,22 @@
             <?= I18N::translate('Statistics') ?>
         </legend>
         <div class="col-sm-9">
-            <?= Bootstrap4::checkbox(I18N::translate('Individuals'), false, ['name' => 'stat_indi', 'checked' => (bool) $stat_indi]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Total surnames'), false, ['name' => 'stat_surname', 'checked' => (bool) $stat_surname]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Families'), false, ['name' => 'stat_fam', 'checked' => (bool) $stat_fam]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Sources'), false, ['name' => 'stat_sour', 'checked' => (bool) $stat_sour]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Media objects'), false, ['name' => 'stat_media', 'checked' => (bool) $stat_media]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Repositories'), false, ['name' => 'stat_repo', 'checked' => (bool) $stat_repo]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Total events'), false, ['name' => 'stat_events', 'checked' => (bool) $stat_events]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Total users'), false, ['name' => 'stat_users', 'checked' => (bool) $stat_users]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Earliest birth'), false, ['name' => 'stat_first_birth', 'checked' => (bool) $stat_first_birth]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Latest birth'), false, ['name' => 'stat_last_birth', 'checked' => (bool) $stat_last_birth]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Earliest death'), false, ['name' => 'stat_first_death', 'checked' => (bool) $stat_first_death]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Latest death'), false, ['name' => 'stat_last_death', 'checked' => (bool) $stat_last_death]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Individual who lived the longest'), false, ['name' => 'stat_long_life', 'checked' => (bool) $stat_long_life]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Average age at death'), false, ['name' => 'stat_avg_life', 'checked' => (bool) $stat_avg_life]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Family with the most children'), false, ['name' => 'stat_most_chil', 'checked' => (bool) $stat_most_chil]) ?>
-            <?= Bootstrap4::checkbox(I18N::translate('Average number of children per family'), false, ['name' => 'stat_avg_chil', 'checked' => (bool) $stat_avg_chil]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Individuals'), 'name' => 'stat_indi', 'checked' => (bool) $stat_indi]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Total surnames'), 'name' => 'stat_surname', 'checked' => (bool) $stat_surname]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Families'), 'name' => 'stat_fam', 'checked' => (bool) $stat_fam]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Sources'), 'name' => 'stat_sour', 'checked' => (bool) $stat_sour]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Media objects'), 'name' => 'stat_media', 'checked' => (bool) $stat_media]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Repositories'), 'name' => 'stat_repo', 'checked' => (bool) $stat_repo]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Total events'), 'name' => 'stat_events', 'checked' => (bool) $stat_events]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Total users'), 'name' => 'stat_users', 'checked' => (bool) $stat_users]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Earliest birth'), 'name' => 'stat_first_birth', 'checked' => (bool) $stat_first_birth]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Latest birth'), 'name' => 'stat_last_birth', 'checked' => (bool) $stat_last_birth]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Earliest death'), 'name' => 'stat_first_death', 'checked' => (bool) $stat_first_death]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Latest death'), 'name' => 'stat_last_death', 'checked' => (bool) $stat_last_death]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Individual who lived the longest'), 'name' => 'stat_long_life', 'checked' => (bool) $stat_long_life]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Average age at death'), 'name' => 'stat_avg_life', 'checked' => (bool) $stat_avg_life]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Family with the most children'), 'name' => 'stat_most_chil', 'checked' => (bool) $stat_most_chil]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Average number of children per family'), 'name' => 'stat_avg_chil', 'checked' => (bool) $stat_avg_chil]) ?>
         </div>
     </div>
 </fieldset>
@@ -50,7 +45,7 @@
             </label>
         </legend>
         <div class="col-sm-9">
-            <?= Bootstrap4::checkbox(I18N::translate('Most common surnames'), false, ['name' => 'show_common_surnames', 'checked' => (bool) $show_common_surnames]) ?>
+            <?= view('components/checkbox', ['label' => I18N::translate('Most common surnames'), 'name' => 'show_common_surnames', 'checked' => (bool) $show_common_surnames]) ?>
             <label for="number_of_surnames">
                 <?= /* I18N: ... to show in a list */
                 I18N::translate('Number of surnames') ?>
diff --git a/resources/views/modules/hourglass-chart/page.phtml b/resources/views/modules/hourglass-chart/page.phtml
index 133f71c2e5..974cfefc88 100644
--- a/resources/views/modules/hourglass-chart/page.phtml
+++ b/resources/views/modules/hourglass-chart/page.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
@@ -17,7 +16,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -26,7 +25,7 @@
             <?= I18N::translate('Generations') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::select(FunctionsEdit::numericOptions(range($minimum_generations, $maximum_generations)), $generations, ['id' => 'generations', 'name' => 'generations']) ?>
+            <?= view('components/select', ['name' => 'generations', 'selected' => $generations, 'values' => FunctionsEdit::numericOptions(range($minimum_generations, $maximum_generations))]) ?>
         </div>
     </div>
 
@@ -36,7 +35,7 @@
                 <?= I18N::translate('Layout') ?>
             </legend>
             <div class="col-sm-9 wt-page-options-value">
-                <?= Bootstrap4::checkbox(I18N::translate('Show spouses'), false, ['name' => 'show_spouse', 'checked' => $show_spouse]) ?>
+                <?= view('components/checkbox', ['label' => I18N::translate('Show spouses'), 'name' => 'show_spouse', 'checked' => $show_spouse]) ?>
             </div>
         </div>
     </fieldset>
diff --git a/resources/views/modules/html/config.phtml b/resources/views/modules/html/config.phtml
index a059329d36..da6be6dcb7 100644
--- a/resources/views/modules/html/config.phtml
+++ b/resources/views/modules/html/config.phtml
@@ -1,6 +1,6 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
+<?php use Fisharebest\Webtrees\View; ?>
 
 <div class="row form-group">
     <label class="col-sm-3 col-form-label" for="title">
@@ -16,7 +16,7 @@
         <?= I18N::translate('Templates') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select([$html => I18N::translate('Custom')] + array_flip($templates), '', ['onchange' => 'this.form.html.value=this.options[this.selectedIndex].value; CKEDITOR.instances.html.setData(document.getElementById("html").value);', 'id' => 'template']) ?>
+        <?= view('components/select', ['name' => '', 'id' => 'template', 'selected' => '', 'values' => $templates]) ?>
         <p class="small text-muted">
             <?= I18N::translate('To assist you in getting started with this block, we have created several standard templates. When you select one of these templates, the text area will contain a copy that you can then alter to suit your site’s requirements.') ?>
         </p>
@@ -41,7 +41,7 @@
             <?= I18N::translate('Show the date and time of update') ?>
         </legend>
         <div class="col-sm-9">
-            <?= Bootstrap4::radioButtons('show_timestamp', FunctionsEdit::optionsNoYes(), $show_timestamp, true) ?>
+            <?= view('components/radios-inline', ['name' => 'show_timestamp', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $show_timestamp]) ?>
         </div>
     </div>
 </fieldset>
@@ -56,3 +56,12 @@
         </div>
     </div>
 </fieldset>
+
+<?php View::push('javascript') ?>
+<script>
+    $("#template").change(function () {
+        this.form.html.value=this.options[this.selectedIndex].value;
+        CKEDITOR.instances.html.setData(document.getElementById("html").value);
+    });
+</script>
+<?php View::endpush() ?>
diff --git a/resources/views/modules/lifespans-chart/page.phtml b/resources/views/modules/lifespans-chart/page.phtml
index fad07d8166..96489b58a7 100644
--- a/resources/views/modules/lifespans-chart/page.phtml
+++ b/resources/views/modules/lifespans-chart/page.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <h2 class="wt-page-title">
@@ -21,12 +19,8 @@
             <?= I18N::translate('Add individuals') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, null, [
-                'id'   => 'addxref',
-                'name' => 'addxref',
-            ]) ?>
-
-            <?= Bootstrap4::checkbox(/* I18N: Label for a configuration option */ I18N::translate('Include the individual’s immediate family'), false, ['name' => 'addfam']) ?>
+            <?= view('components/select-individual', ['name' => 'addxref', 'tree' => $tree]) ?>
+            <?= view('components/checkbox', ['label' => /* I18N: Label for a configuration option */ I18N::translate('Include the individual’s immediate family'), 'name' => 'addfam']) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/pedigree-chart/page.phtml b/resources/views/modules/pedigree-chart/page.phtml
index 4219520536..7b63b8322c 100644
--- a/resources/views/modules/pedigree-chart/page.phtml
+++ b/resources/views/modules/pedigree-chart/page.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <h2 class="wt-page-title">
@@ -17,7 +15,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -26,7 +24,7 @@
             <?= I18N::translate('Generations') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= Bootstrap4::select($generation_options, $generations, ['id' => 'generations', 'name' => 'generations']) ?>
+            <?= view('components/select', ['name' => 'generations', 'selected' => $generations, 'values' => $generation_options]) ?>
         </div>
     </div>
 
@@ -35,10 +33,7 @@
             <?= I18N::translate('Layout') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= view('components/radio-inline', ['name' => 'orientation', 'value' => 'left', 'checked' => $orientation === 'left', 'text' => view('icons/pedigree-left') . I18N::translate('left')]) ?>
-            <?= view('components/radio-inline', ['name' => 'orientation', 'value' => 'right', 'checked' => $orientation === 'right', 'text' => view('icons/pedigree-right') . I18N::translate('right')]) ?>
-            <?= view('components/radio-inline', ['name' => 'orientation', 'value' => 'up', 'checked' => $orientation === 'up', 'text' => view('icons/pedigree-up') . I18N::translate('up')]) ?>
-            <?= view('components/radio-inline', ['name' => 'orientation', 'value' => 'down', 'checked' => $orientation === 'down', 'text' => view('icons/pedigree-down') . I18N::translate('down')]) ?>
+            <?= view('components/radios-inline', ['name' => 'orientation', 'options' => ['left' => view('icons/pedigree-left') . I18N::translate('left'), 'right' => view('icons/pedigree-right') . I18N::translate('right'), 'up' => view('icons/pedigree-up') . I18N::translate('up'), 'down' => view('icons/pedigree-down') . I18N::translate('down'), ], 'selected' => $orientation]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/pedigree-map/page.phtml b/resources/views/modules/pedigree-map/page.phtml
index d058f17d03..d483cc94f4 100644
--- a/resources/views/modules/pedigree-map/page.phtml
+++ b/resources/views/modules/pedigree-map/page.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 <?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 
@@ -15,7 +14,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -24,13 +23,7 @@
             <?= I18N::translate('Generations') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?=
-            Bootstrap4::select(
-                FunctionsEdit::numericOptions(range(2, $maxgenerations)),
-                $generations,
-                ['id' => 'generations', 'name' => 'generations']
-            )
-?>
+            <?= view('components/select', ['name' => 'generations', 'selected' => $generations, 'values' => FunctionsEdit::numericOptions(range(2, $maxgenerations))]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/random_media/config.phtml b/resources/views/modules/random_media/config.phtml
index d7810cc0f6..ff225b7ce2 100644
--- a/resources/views/modules/random_media/config.phtml
+++ b/resources/views/modules/random_media/config.phtml
@@ -1,13 +1,12 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
-<?php use Fisharebest\Webtrees\I18N; ?>
+use Fisharebest\Webtrees\I18N; ?>
+<?php ?>
 
 <div class="form-group row">
     <label class="col-sm-3 col-form-label" for="filter">
         <?= I18N::translate('Show only individuals, events, or all') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select(['indi' => I18N::translate('Individuals'), 'event' => I18N::translate('Facts and events'), 'all' => I18N::translate('All')], $filter, ['id' => 'filter', 'name' => 'filter']) ?>
+        <?= view('components/select', ['name' => 'filter', 'selected' => $filter, 'values' => ['indi' => I18N::translate('Individuals'), 'event' => I18N::translate('Facts and events'), 'all' => I18N::translate('All')]]) ?>
     </div>
 </div>
 
@@ -18,7 +17,7 @@
         </legend>
         <div class="col-sm-9">
             <?php foreach ($formats as $typeName => $typeValue) : ?>
-                <?= Bootstrap4::checkbox($typeValue, false, ['name' => 'filter_' . $typeName, 'checked' => (bool) $filters[$typeName]]) ?>
+                <?= view('components/checkbox', ['label' => $typeValue, 'name' => 'filter_' . $typeName, 'checked' => (bool) $filters[$typeName]]) ?>
             <?php endforeach ?>
         </div>
     </div>
@@ -29,7 +28,7 @@
         <?= I18N::translate('Show slide show controls') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('controls', FunctionsEdit::optionsNoYes(), $controls, true) ?>
+        <?= view('components/radios-inline', ['name' => 'controls', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $controls]) ?>
     </div>
 </div>
 
@@ -38,6 +37,6 @@
         <?= I18N::translate('Start slide show on page load') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('start', FunctionsEdit::optionsNoYes(), $start, true) ?>
+        <?= view('components/radios-inline', ['name' => 'start', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $start]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/recent_changes/config.phtml b/resources/views/modules/recent_changes/config.phtml
index cf44fd55e8..61847458af 100644
--- a/resources/views/modules/recent_changes/config.phtml
+++ b/resources/views/modules/recent_changes/config.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -17,7 +15,7 @@
         <?= I18N::translate('Presentation style') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($info_styles, $infoStyle, ['id' => 'infoStyle', 'name' => 'infoStyle']) ?>
+        <?= view('components/select', ['name' => 'infoStyle', 'selected' => $info_styles, 'values' => $info_styles]) ?>
     </div>
 </div>
 
@@ -26,7 +24,7 @@
         <?= I18N::translate('Sort order') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($sort_styles, $sortStyle, ['id' => 'sortStyle', 'name' => 'sortStyle']) ?>
+        <?= view('components/select', ['name' => 'sortStyle', 'selected' => $sortStyle, 'options' => $sort_styles]) ?>
     </div>
 </div>
 
@@ -35,6 +33,6 @@
         <?= /* I18N: label for a yes/no option */ I18N::translate('Show the user who made the change') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('show_user', FunctionsEdit::optionsNoYes(), $show_user, true) ?>
+        <?= view('components/radios-inline', ['name' => 'show_user', 'values' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $show_user]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/relationships-chart/config.phtml b/resources/views/modules/relationships-chart/config.phtml
index 1b45cb4a09..e6e714a98f 100644
--- a/resources/views/modules/relationships-chart/config.phtml
+++ b/resources/views/modules/relationships-chart/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <?= view('components/breadcrumbs', ['links' => [route('admin-control-panel') => I18N::translate('Control panel'), route('modules') => I18N::translate('Modules'), $title]]) ?>
@@ -18,7 +17,7 @@
                 I18N::translate('Relationships') ?>
             </label>
             <div class="col-sm-9">
-                <?= Bootstrap4::select($ancestors_options, $tree->getPreference('RELATIONSHIP_ANCESTORS', $default_ancestors), ['id' => 'relationship-ancestors-' . $tree->id(), 'name' => 'relationship-ancestors-' . $tree->id()]) ?>
+                <?= view('components/select', ['name' => 'relationship-ancestors-' . $tree->id(), 'selected' => $tree->getPreference('RELATIONSHIP_ANCESTORS', $default_ancestors), 'values' => $ancestors_options]) ?>
             </div>
         </div>
 
@@ -29,7 +28,7 @@
                     I18N::translate('How much recursion to use when searching for relationships') ?>
                 </legend>
                 <div class="col-sm-9">
-                    <?= Bootstrap4::radioButtons('relationship-recursion-' . $tree->id(), $recursion_options, $tree->getPreference('RELATIONSHIP_RECURSION', $default_recursion), true) ?>
+                    <?= view('components/radios-inline', ['name' => 'relationship-recursion-' . $tree->id(), 'options' => $recursion_options, 'selected' => $default_recursion]) ?>
                 </div>
             </div>
         </fieldset>
diff --git a/resources/views/modules/relationships-chart/page.phtml b/resources/views/modules/relationships-chart/page.phtml
index 7d36a6c18b..07ea530d8d 100644
--- a/resources/views/modules/relationships-chart/page.phtml
+++ b/resources/views/modules/relationships-chart/page.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 <?php use Fisharebest\Webtrees\View; ?>
 
@@ -18,10 +16,7 @@
             <?= I18N::translate('Individual 1') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual1, [
-                'id'   => 'xref',
-                'name' => 'xref',
-            ]) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual1, 'tree' => $tree]) ?>
             <button class="btn btn-link small" id="btn-swap-individuals" type="button">
                 <?= /* I18N: Reverse the order of two individuals */
                 I18N::translate('Swap individuals') ?>
@@ -34,10 +29,7 @@
             <?= I18N::translate('Individual 2') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual2, [
-                'id'   => 'xref2',
-                'name' => 'xref2',
-            ]) ?>
+            <?= view('components/select-individual', ['name' => 'xref2', 'individual' => $individual2, 'tree' => $tree]) ?>
         </div>
     </div>
 
@@ -50,7 +42,7 @@
                     <input type="hidden" name="ancestors" value="1">
                     <?= I18N::translate('Find relationships via ancestors') ?>
                 <?php else : ?>
-                    <?= Bootstrap4::radioButtons('ancestors', $ancestors_options, $ancestors, false) ?>
+                    <?= view('components/radios', ['name' => 'ancestors', 'options' => $ancestors_options, 'selected' => $ancestors]) ?>
                 <?php endif ?>
             </div>
         </div>
@@ -65,7 +57,7 @@
                     <?= I18N::translate('Find the closest relationships') ?>
                     <input type="hidden" name="recursion" value="0">
                 <?php else : ?>
-                    <?= Bootstrap4::radioButtons('recursion', $recursion_options, $recursion, false) ?>
+                    <?= view('components/radios', ['name' => 'recursion', 'options' => $recursion_options, 'selected' => $recursion]) ?>
                 <?php endif ?>
             </div>
         </div>
diff --git a/resources/views/modules/review_changes/config.phtml b/resources/views/modules/review_changes/config.phtml
index 551d7bd112..a92c2360df 100644
--- a/resources/views/modules/review_changes/config.phtml
+++ b/resources/views/modules/review_changes/config.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <p>
@@ -12,7 +10,7 @@
             <?= /* I18N: Label for a configuration option */ I18N::translate('Send out reminder emails') ?>
         </legend>
         <div class="col-sm-9">
-            <?= Bootstrap4::radioButtons('sendmail', FunctionsEdit::optionsNoYes(), $sendmail, true) ?>
+            <?= view('components/radios-inline', ['name' => 'sendmail', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $sendmail]) ?>
         </div>
     </div>
 </fieldset>
diff --git a/resources/views/modules/sitemap/config.phtml b/resources/views/modules/sitemap/config.phtml
index cb9a6c1527..964dc00845 100644
--- a/resources/views/modules/sitemap/config.phtml
+++ b/resources/views/modules/sitemap/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <?= view('components/breadcrumbs', ['links' => [route('admin-control-panel') => I18N::translate('Control panel'), route('modules') => I18N::translate('Modules'), $title]]) ?>
@@ -17,7 +16,7 @@
     <?= csrf_field() ?>
 
     <?php foreach ($all_trees as $tree) : ?>
-        <?= Bootstrap4::checkbox($tree->title(), false, ['name' => 'sitemap' . $tree->id(), 'checked' => (bool) $tree->getPreference('include_in_sitemap')]) ?>
+        <?= view('components/checkbox', ['label' => $tree->title(), 'name' => 'sitemap' . $tree->id(), 'checked' => (bool) $tree->getPreference('include_in_sitemap')]) ?>
     <?php endforeach ?>
 
 <button type="submit" class="btn btn-primary">
diff --git a/resources/views/modules/statistics-chart/custom.phtml b/resources/views/modules/statistics-chart/custom.phtml
index 796495eccb..3db3964850 100644
--- a/resources/views/modules/statistics-chart/custom.phtml
+++ b/resources/views/modules/statistics-chart/custom.phtml
@@ -1,90 +1,16 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\I18N; ?>
+use Fisharebest\Webtrees\I18N;
+use Fisharebest\Webtrees\View;
 
-<script>
-  function statusDisable(sel) {
-    var cbox      = document.getElementById(sel);
-    cbox.checked  = false;
-    cbox.disabled = true;
-  }
-
-  function statusEnable(sel) {
-    var cbox      = document.getElementById(sel);
-    cbox.disabled = false;
-  }
-
-  function statusHide(sel) {
-    var box           = document.getElementById(sel);
-    box.style.display = "none";
-    var box_m         = document.getElementById(sel + "_m");
-    if (box_m) {
-      box_m.style.display = "none";
-    }
-    if (sel === "map_opt") {
-      var box_axes = document.getElementById("axes");
-      if (box_axes) {
-        box_axes.style.display = "";
-      }
-      var box_zyaxes = document.getElementById("zyaxes");
-      if (box_zyaxes) {
-        box_zyaxes.style.display = "";
-      }
-    }
-  }
-
-  function statusShow(sel) {
-    var box           = document.getElementById(sel);
-    box.style.display = "";
-    var box_m         = document.getElementById(sel + "_m");
-    if (box_m) {
-      box_m.style.display = "none";
-    }
-    if (sel === "map_opt") {
-      var box_axes = document.getElementById("axes");
-      if (box_axes) {
-        box_axes.style.display = "none";
-      }
-      var box_zyaxes = document.getElementById("zyaxes");
-      if (box_zyaxes) {
-        box_zyaxes.style.display = "none";
-      }
-    }
-  }
-
-  function statusChecked(sel) {
-    var cbox     = document.getElementById(sel);
-    cbox.checked = true;
-  }
-
-  function statusShowSurname(x) {
-    if (x.value === "surname_distribution_chart") {
-      document.getElementById("surname_opt").style.display = "";
-    } else if (x.value !== "surname_distribution_chart") {
-      document.getElementById("surname_opt").style.display = "none";
-    }
-  }
-
-  function loadCustomChart() {
-    $("#custom-chart").html("");
-    var form = $("#own-stats-form");
-    jQuery.get(form.attr("action"), form.serialize())
-      .done(function (data) {
-        $("#custom-chart").html(data);
-      })
-      .fail(function (jqXHR, textStatus) {
-        // Server error?  Show something to get rid of the spinner.
-        $("#custom-chart").html(textStatus);
-      });
-    return false;
-  }
-</script>
+?>
+<?php ?>
+<?php ?>
 
 <div class="container pt-3">
     <h4 class="border-bottom p-2 mb-4">
         <?= I18N::translate('Create your own chart') ?>
     </h4>
 
-    <form id="own-stats-form" action="index.php" onsubmit="return loadCustomChart();" class="wt-page-options wt-page-options-statistics">
+    <form id="own-stats-form" action="index.php" class="wt-page-options wt-page-options-statistics">
         <input type="hidden" name="route" value="module">
         <input type="hidden" name="module" value="<?= e($module->name()) ?>">
         <input type="hidden" name="action" value="CustomChart">
@@ -98,31 +24,37 @@
                 <fieldset>
                     <legend><?= I18N::translate('Individual') ?></legend>
 
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_BIRTH_MONTH => I18N::translate('Month of birth')], $module::X_AXIS_BIRTH_MONTH, false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_DEATH_MONTH => I18N::translate('Month of death')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_FIRST_CHILD_MONTH => I18N::translate('Month of birth of first child in a relation')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_AGE_AT_DEATH => I18N::translate('Average age at death')], '', false, ['onchange' => 'statusEnable("z_sex"); statusShow("x_years");; statusHide("map_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_AGE_AT_MARRIAGE => I18N::translate('Age in year of marriage')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years"); statusShow("x_years_m");; statusHide("map_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_AGE_AT_FIRST_MARRIAGE => I18N::translate('Age in year of first marriage')], '', false, ['onchange' => 'statusEnable("z_sex"); statusHide("x_years"); statusShow("x_years_m");; statusHide("map_opt");']) ?>
+                    <?= view('components/radios', ['name' => 'x-as', 'selected' => $module::X_AXIS_BIRTH_MONTH, 'options' => [
+                        $module::X_AXIS_BIRTH_MONTH => I18N::translate('Month of birth'),
+                        $module::X_AXIS_DEATH_MONTH => I18N::translate('Month of death'),
+                        $module::X_AXIS_FIRST_CHILD_MONTH => I18N::translate('Month of birth of first child in a relation'),
+                        $module::X_AXIS_AGE_AT_DEATH => I18N::translate('Average age at death'),
+                        $module::X_AXIS_AGE_AT_MARRIAGE => I18N::translate('Age in year of marriage'),
+                        $module::X_AXIS_AGE_AT_FIRST_MARRIAGE => I18N::translate('Age in year of first marriage'),
+
+                    ]]) ?>
                 </fieldset>
 
                 <fieldset>
                     <legend><?= I18N::translate('Family') ?></legend>
 
-                    <?= Bootstrap4::radioButtons('x-as', [
+                    <?= view('components/radios', ['name' => 'x-as', 'selected' => $module::X_AXIS_BIRTH_MONTH, 'options' => [
                         $module::X_AXIS_MARRIAGE_MONTH       => I18N::translate('Month of marriage'),
                         $module::X_AXIS_FIRST_MARRIAGE_MONTH => I18N::translate('Month of first marriage'),
-                    ], '', false, ['onchange' => 'statusChecked("z_none"); statusDisable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_NUMBER_OF_CHILDREN => I18N::translate('Number of children')], '', false, ['onchange' => 'statusChecked("z_none"); statusDisable("z_sex"); statusHide("x_years");; statusHide("map_opt");']) ?>
+                        $module::X_AXIS_NUMBER_OF_CHILDREN => I18N::translate('Number of children'),
+
+                    ]]) ?>
                 </fieldset>
 
                 <fieldset>
                     <legend><?= I18N::translate('Map') ?></legend>
 
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_INDIVIDUAL_MAP => I18N::translate('Individuals')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusShow("chart_type");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_BIRTH_MAP => I18N::translate('Births')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusHide("chart_type"); statusHide("surname_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_MARRIAGE_MAP => I18N::translate('Marriages')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusHide("chart_type"); statusHide("surname_opt");']) ?>
-                    <?= Bootstrap4::radioButtons('x-as', [$module::X_AXIS_DEATH_MAP => I18N::translate('Deaths')], '', false, ['onchange' => 'statusHide("x_years");; statusShow("map_opt"); statusHide("chart_type"); statusHide("surname_opt");']) ?>
+                    <?= view('components/radios', ['name' => 'x-as', 'selected' => $module::X_AXIS_BIRTH_MONTH, 'options' => [
+                        $module::X_AXIS_INDIVIDUAL_MAP => I18N::translate('Individuals'),
+                        $module::X_AXIS_BIRTH_MAP => I18N::translate('Births'),
+                        $module::X_AXIS_MARRIAGE_MAP => I18N::translate('Marriages'),
+                        $module::X_AXIS_DEATH_MAP => I18N::translate('Deaths'),
+                    ]]) ?>
                 </fieldset>
             </div>
 
@@ -194,14 +126,7 @@
                     <label for="x-axis-boundaries-ages" class="sr-only">
                         <?= I18N::translate('Age interval') ?>
                     </label>
-                    <?= Bootstrap4::select([
-                        '1,5,10,20,30,40,50,60,70,80,90,100' => I18N::plural('%s year', '%s years', 10, I18N::number(10)),
-                        '5,20,40,60,75,80,85,90'             => I18N::plural('%s year', '%s years', 20, I18N::number(20)),
-                        '10,25,50,75,100'                    => I18N::plural('%s year', '%s years', 25, I18N::number(25)),
-                    ], '1,5,10,20,30,40,50,60,70,80,90,100', [
-                        'id'   => 'x-axis-boundaries-ages',
-                        'name' => 'x-axis-boundaries-ages',
-                    ]) ?>
+                    <?= view('components/select', ['name' => 'x-axis-boundaries-ages', 'selected' => '1,5,10,20,30,40,50,60,70,80,90,100', 'values' => ['1,5,10,20,30,40,50,60,70,80,90,100' => I18N::plural('%s year', '%s years', 10, I18N::number(10)), '5,20,40,60,75,80,85,90' => I18N::plural('%s year', '%s years', 20, I18N::number(20)), '10,25,50,75,100' => I18N::plural('%s year', '%s years', 25, I18N::number(25))]]) ?>
                 </fieldset>
 
                 <fieldset id="x_years_m" style="display:none;">
@@ -210,13 +135,7 @@
                     <label for="x-axis-boundaries-ages_m" class="sr-only">
                         <?= I18N::translate('Select the desired age interval') ?>
                     </label>
-                    <?= Bootstrap4::select([
-                        '16,18,20,22,24,26,28,30,32,35,40,50' => I18N::plural('%s year', '%s years', 2, I18N::number(2)),
-                        '20,25,30,35,40,45,50'                => I18N::plural('%s year', '%s years', 5, I18N::number(5)),
-                    ], '16,18,20,22,24,26,28,30,32,35,40,50', [
-                        'id'   => 'x-axis-boundaries-ages_m',
-                        'name' => 'x-axis-boundaries-ages_m',
-                    ]) ?>
+                    <?= view('components/select', ['name' => 'x-axis-boundaries-ages_m', 'selected' => '16,18,20,22,24,26,28,30,32,35,40,50', 'values' => ['16,18,20,22,24,26,28,30,32,35,40,50' => I18N::plural('%s year', '%s years', 2, I18N::number(2)), '20,25,30,35,40,45,50' => I18N::plural('%s year', '%s years', 5, I18N::number(5))]]) ?>
                 </fieldset>
 
                 <div id="map_opt" style="display:none;">
@@ -283,3 +202,135 @@
         <!-- Not initially empty, to disable spinner -->
     </div>
 </div>
+
+<?php View::push('javascript') ?>
+<script>
+    function statusDisable(sel) {
+        var cbox      = document.getElementById(sel);
+        cbox.checked  = false;
+        cbox.disabled = true;
+    }
+
+    function statusEnable(sel) {
+        var cbox      = document.getElementById(sel);
+        cbox.disabled = false;
+    }
+
+    function statusHide(sel) {
+        var box           = document.getElementById(sel);
+        box.style.display = "none";
+        var box_m         = document.getElementById(sel + "_m");
+        if (box_m) {
+            box_m.style.display = "none";
+        }
+        if (sel === "map_opt") {
+            var box_axes = document.getElementById("axes");
+            if (box_axes) {
+                box_axes.style.display = "";
+            }
+            var box_zyaxes = document.getElementById("zyaxes");
+            if (box_zyaxes) {
+                box_zyaxes.style.display = "";
+            }
+        }
+    }
+
+    function statusShow(sel) {
+        var box           = document.getElementById(sel);
+        box.style.display = "";
+        var box_m         = document.getElementById(sel + "_m");
+        if (box_m) {
+            box_m.style.display = "none";
+        }
+        if (sel === "map_opt") {
+            var box_axes = document.getElementById("axes");
+            if (box_axes) {
+                box_axes.style.display = "none";
+            }
+            var box_zyaxes = document.getElementById("zyaxes");
+            if (box_zyaxes) {
+                box_zyaxes.style.display = "none";
+            }
+        }
+    }
+
+    function statusChecked(sel) {
+        var cbox     = document.getElementById(sel);
+        cbox.checked = true;
+    }
+
+    function statusShowSurname(x) {
+        if (x.value === "surname_distribution_chart") {
+            document.getElementById("surname_opt").style.display = "";
+        } else if (x.value !== "surname_distribution_chart") {
+            document.getElementById("surname_opt").style.display = "none";
+        }
+    }
+
+    function loadCustomChart() {
+        $("#custom-chart").html("");
+        var form = $("#own-stats-form");
+        jQuery.get(form.attr("action"), form.serialize())
+            .done(function (data) {
+                $("#custom-chart").html(data);
+            })
+            .fail(function (jqXHR, textStatus) {
+                // Server error?  Show something to get rid of the spinner.
+                $("#custom-chart").html(textStatus);
+            });
+        return false;
+    }
+
+    $("[name='x-as']").change(function() {
+        var x_axis = document.querySelector("[name='x-as']:checked").value;
+
+        switch (x_axis) {
+            case "<?= e($module::X_AXIS_BIRTH_MONTH) ?>":
+            case "<?= e($module::X_AXIS_DEATH_MONTH) ?>":
+            case "<?= e($module::X_AXIS_FIRST_CHILD_MONTH) ?>":
+                statusEnable("z_sex");
+                statusHide("x_years");
+                statusHide("map_opt");
+                break;
+
+            case "<?= e($module::X_AXIS_AGE_AT_DEATH) ?>":
+                statusEnable("z_sex");
+                statusShow("x_years");
+                statusHide("map_opt");
+                break;
+
+            case "<?= e($module::X_AXIS_AGE_AT_MARRIAGE) ?>":
+            case "<?= e($module::X_AXIS_AGE_AT_FIRST_MARRIAGE) ?>":
+                statusEnable("z_sex");
+                statusHide("x_years");
+                statusShow("x_years_m");
+                statusHide("map_opt");
+                break;
+
+            case "<?= e($module::X_AXIS_MARRIAGE_MONTH) ?>":
+            case "<?= e($module::X_AXIS_FIRST_MARRIAGE_MONTH) ?>":
+                statusChecked("z_none");
+                statusDisable("z_sex");
+                statusHide("x_years");
+                statusHide("map_opt");
+                break;
+
+            case "<?= e($module::X_AXIS_INDIVIDUAL_MAP) ?>":
+                statusHide("x_years");
+                statusShow("map_opt");
+                statusShow("chart_type");
+                break;
+
+            case "<?= e($module::X_AXIS_BIRTH_MAP) ?>":
+            case "<?= e($module::X_AXIS_MARRIAGE_MAP) ?>":
+            case "<?= e($module::X_AXIS_DEATH_MAP) ?>":
+                statusHide("x_years"); statusShow("map_opt");
+                statusHide("chart_type");
+                statusHide("surname_opt");
+                break;
+        }
+    });
+
+    $("#own-stats-form").on("submit", loadCustomChart);
+</script>
+<?php View::endpush() ?>
diff --git a/resources/views/modules/stories/config.phtml b/resources/views/modules/stories/config.phtml
index 37b155d8c9..d0296f5dcf 100644
--- a/resources/views/modules/stories/config.phtml
+++ b/resources/views/modules/stories/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <?= view('components/breadcrumbs', ['links' => [route('admin-control-panel') => I18N::translate('Control panel'), route('modules') => I18N::translate('Modules'), $title]]) ?>
@@ -14,7 +13,7 @@
         <?= I18N::translate('Family tree') ?>
     </label>
 
-    <?= Bootstrap4::select($tree_names, $tree->name(), ['id' => 'ged', 'name' => 'ged']) ?>
+    <?= view('components/select', ['name' => 'ged', 'selected' => $tree->name(), 'values' => $tree_names]) ?>
     <button type="submit" class="btn btn-primary">
         <?= I18N::translate('show') ?>
     </button>
diff --git a/resources/views/modules/stories/edit.phtml b/resources/views/modules/stories/edit.phtml
index 7d6282e5cd..c1190c9530 100644
--- a/resources/views/modules/stories/edit.phtml
+++ b/resources/views/modules/stories/edit.phtml
@@ -13,7 +13,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9">
-            <?= FunctionsEdit::formControlIndividual($tree, $individual, ['id' => 'xref', 'name' => 'xref']) ?>
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $tree]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/stories/list.phtml b/resources/views/modules/stories/list.phtml
index e159aa9626..4c6df94366 100644
--- a/resources/views/modules/stories/list.phtml
+++ b/resources/views/modules/stories/list.phtml
@@ -1,9 +1,8 @@
 <?php use Fisharebest\Webtrees\I18N; ?>
-<?php use Fisharebest\Webtrees\View; ?>
 
 <h2 class="wt-page-title"><?= $title ?></h2>
 
-<table id="story_table" class="w-100">
+<table class="table table-bordered w-100">
     <thead>
         <tr>
             <th><?= I18N::translate('Story title') ?></th>
@@ -25,24 +24,3 @@
         <?php endforeach ?>
     </tbody>
 </table>
-
-<?php View::push('javascript') ?>
-<script>
-  $("#story_table").dataTable({
-    dom: '<"H"pf<"dt-clear">irl>t<"F"pl>',
-    autoWidth: false,
-    paging: true,
-    pagingType: "full_numbers",
-    lengthChange: true,
-    filter: true,
-    info: true,
-    sorting: [[0,"asc"]],
-    columns: [
-        /* 0-name */ null,
-      /* 1-NAME */ null
-    ],
-    <?= I18N::datatablesI18N() ?>
-  });
-
-</script>
-<?php View::endpush() ?>
diff --git a/resources/views/modules/timeline-chart/page.phtml b/resources/views/modules/timeline-chart/page.phtml
index c440e71288..5f3c65c03a 100644
--- a/resources/views/modules/timeline-chart/page.phtml
+++ b/resources/views/modules/timeline-chart/page.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <h2 class="wt-page-title">
@@ -21,10 +20,7 @@
             <?= I18N::translate('Individual') ?>
         </label>
         <div class="col-sm-9 wt-page-options-value">
-            <?= FunctionsEdit::formControlIndividual($tree, null, [
-                'id'   => 'xref-add',
-                'name' => 'xrefs[]',
-            ]) ?>
+            <?= view('components/select-individual', ['name' => 'xrefs[]', 'id' => 'xref-add', 'tree' => $tree]) ?>
         </div>
     </div>
 
diff --git a/resources/views/modules/todays_events/config.phtml b/resources/views/modules/todays_events/config.phtml
index 4d408aee70..d680697f01 100644
--- a/resources/views/modules/todays_events/config.phtml
+++ b/resources/views/modules/todays_events/config.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -7,7 +5,7 @@
         <?= I18N::translate('Show only events of living individuals') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('filter', FunctionsEdit::optionsNoYes(), $filter, true) ?>
+        <?= view('components/radios-inline', ['name' => 'filter', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $filter]) ?>
     </div>
 </div>
 
@@ -16,7 +14,7 @@
         <?= I18N::translate('Events') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::multiSelect($all_events, $event_array, ['id' => 'events', 'name' => 'events[]', 'class' => 'select2']) ?>
+        <?= view('components/select', ['name' => 'events[]', 'id' => 'events', 'selected' => $event_array, 'values' => $all_events, 'class' => 'select2']) ?>
     </div>
 </div>
 
@@ -25,7 +23,7 @@
         <?= /* I18N: Label for a configuration option */ I18N::translate('Presentation style') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($info_styles, $infoStyle, ['id' => 'infoStyle', 'name' => 'infoStyle']) ?>
+        <?= view('components/select', ['name' => 'infoStyle', 'selected' => $infoStyle, 'values' => $info_styles]) ?>
     </div>
 </div>
 
@@ -34,6 +32,6 @@
         <?= /* I18N: Label for a configuration option */ I18N::translate('Sort order') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($sort_styles, $sortStyle, ['id' => 'sortStyle', 'name' => 'sortStyle']) ?>
+        <?= view('components/select', ['name' => 'sortStyle', 'selected' => $sortStyle, 'values' => $sort_styles]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/todo/config.phtml b/resources/views/modules/todo/config.phtml
index 610fe6b5ef..a1a0dc1053 100644
--- a/resources/views/modules/todo/config.phtml
+++ b/resources/views/modules/todo/config.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <p>
@@ -13,7 +11,7 @@
         <?= I18N::translate('Show research tasks that are assigned to other users') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('show_other', FunctionsEdit::optionsNoYes(), $show_other, true) ?>
+        <?= view('components/radios-inline', ['name' => 'show_other', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $show_other]) ?>
     </div>
 </div>
 
@@ -23,7 +21,7 @@
         <?= I18N::translate('Show research tasks that are not assigned to any user') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('show_unassigned', FunctionsEdit::optionsNoYes(), $show_unassigned, true) ?>
+        <?= view('components/radios-inline', ['name' => 'show_unasigned', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $show_unassigned]) ?>
     </div>
 </div>
 
@@ -32,6 +30,6 @@
         <?= I18N::translate('Show research tasks that have a date in the future') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('show_future', FunctionsEdit::optionsNoYes(), $show_future, true) ?>
+        <?= view('components/radios-inline', ['name' => 'show_future', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $show_future]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/top10_givnnames/config.phtml b/resources/views/modules/top10_givnnames/config.phtml
index 78fa6ab645..c25e31b628 100644
--- a/resources/views/modules/top10_givnnames/config.phtml
+++ b/resources/views/modules/top10_givnnames/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -15,6 +14,6 @@
         <?= I18N::translate('Presentation style') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($info_styles, $infoStyle, ['id' => 'infoStyle', 'name' => 'infoStyle']) ?>
+        <?= view('components/select', ['name' => 'infoStyle', 'selected' => $info_styles, 'values' => $info_styles]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/top10_pageviews/config.phtml b/resources/views/modules/top10_pageviews/config.phtml
index b1b166f0e3..595de5a2f3 100644
--- a/resources/views/modules/top10_pageviews/config.phtml
+++ b/resources/views/modules/top10_pageviews/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -15,6 +14,6 @@
         <?= /* I18N: Label for a configuration option */ I18N::translate('Show counts before or after name') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($options, $count_placement, ['id' => 'count_placement', 'name' => 'count_placement']) ?>
+        <?= view('components/select', ['name' => 'count_placement', 'selected' => $count_placement, 'values' => $options]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/top10_surnames/config.phtml b/resources/views/modules/top10_surnames/config.phtml
index 727460c3c2..0cdd3190a4 100644
--- a/resources/views/modules/top10_surnames/config.phtml
+++ b/resources/views/modules/top10_surnames/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -15,6 +14,6 @@
         <?= I18N::translate('Presentation style') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($info_styles, $infoStyle, ['id' => 'infoStyle', 'name' => 'infoStyle']) ?>
+        <?= view('components/select', ['name' => 'infoStyle', 'selected' => $infoStyle, 'values' => $info_styles]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/upcoming_events/config.phtml b/resources/views/modules/upcoming_events/config.phtml
index e5c8226671..efbb245e75 100644
--- a/resources/views/modules/upcoming_events/config.phtml
+++ b/resources/views/modules/upcoming_events/config.phtml
@@ -1,5 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
-<?php use Fisharebest\Webtrees\Functions\FunctionsEdit; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -17,7 +15,7 @@
         <?= I18N::translate('Show only events of living individuals') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::radioButtons('filter', FunctionsEdit::optionsNoYes(), $filter, true) ?>
+        <?= view('components/radios-inline', ['name' => 'filter', 'options' => [I18N::translate('no'), I18N::translate('yes')], 'selected' => (int) $filter]) ?>
     </div>
 </div>
 
@@ -26,7 +24,7 @@
         <?= I18N::translate('Events') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::multiSelect($all_events, $event_array, ['id' => 'events', 'name' => 'events[]', 'class' => 'select2']) ?>
+        <?= view('components/select', ['name' => 'events[]', 'id' => 'events', 'selected' => $event_array, 'values' => $all_events, 'class' => 'select2']) ?>
     </div>
 </div>
 
@@ -35,7 +33,7 @@
         <?= /* I18N: Label for a configuration option */ I18N::translate('Presentation style') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($info_styles, $infoStyle, ['id' => 'infoStyle', 'name' => 'infoStyle']) ?>
+        <?= view('components/select', ['name' => 'infoStyle', 'selected' => $info_styles, 'values' => $info_styles]) ?>
     </div>
 </div>
 
@@ -44,6 +42,6 @@
         <?= /* I18N: Label for a configuration option */ I18N::translate('Sort order') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($sort_styles, $sortStyle, ['id' => 'sortStyle', 'name' => 'sortStyle']) ?>
+        <?= view('components/select', ['name' => 'sortStyle', 'selected' => $sortStyle, 'values' => $sort_styles]) ?>
     </div>
 </div>
diff --git a/resources/views/modules/yahrzeit/config.phtml b/resources/views/modules/yahrzeit/config.phtml
index 6e8657af13..25ae5e693b 100644
--- a/resources/views/modules/yahrzeit/config.phtml
+++ b/resources/views/modules/yahrzeit/config.phtml
@@ -1,4 +1,3 @@
-<?php use Fisharebest\Webtrees\Bootstrap4; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
 <div class="form-group row">
@@ -18,7 +17,7 @@
         <?= I18N::translate('Presentation style') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($styles, $infoStyle, ['id' => 'infoStyle', 'name' => 'infoStyle']) ?>
+        <?= view('components/select', ['name' => 'infoStyle', 'selected' => $infoStyle, 'values' => $styles]) ?>
     </div>
 </div>
 
@@ -27,6 +26,6 @@
         <?= I18N::translate('Calendar') ?>
     </label>
     <div class="col-sm-9">
-        <?= Bootstrap4::select($calendars, $calendar, ['id' => 'calendar', 'name' => 'calendar']) ?>
+        <?= view('components/select', ['name' => 'calendar', 'selected' => $calendar, 'values' => $calendars]) ?>
     </div>
 </div>