diff --git a/Gemfile b/Gemfile
index a4853dc9..ca9375ed 100644
--- a/Gemfile
+++ b/Gemfile
@@ -57,7 +57,7 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 
 # Custom
-gem 'bootstrap', '~> 4.6.0'
+gem 'bootstrap', '~> 5.0.1'
 gem 'inline_svg', '~> 1.7'
 gem 'jquery-rails'
 gem 'kramdown', '~> 2.3'
diff --git a/Gemfile.lock b/Gemfile.lock
index 4484807f..405204eb 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -62,14 +62,14 @@ GEM
       zeitwerk (~> 2.3)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
-    autoprefixer-rails (10.2.0.0)
-      execjs
+    autoprefixer-rails (10.2.5.0)
+      execjs (< 2.8.0)
     bindex (0.8.1)
     bootsnap (1.7.2)
       msgpack (~> 1.0)
-    bootstrap (4.6.0)
+    bootstrap (5.0.1)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.14.3, < 2)
+      popper_js (>= 2.9.2, < 3)
       sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.3)
@@ -89,7 +89,7 @@ GEM
       nokogiri (>= 1.4.3)
     erubi (1.10.0)
     execjs (2.7.0)
-    ffi (1.14.2)
+    ffi (1.15.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     i18n (1.8.10)
@@ -126,7 +126,7 @@ GEM
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     pg (1.2.3)
-    popper_js (1.16.0)
+    popper_js (2.9.2)
     public_suffix (4.0.6)
     puma (5.3.1)
       nio4r (~> 2.0)
@@ -229,7 +229,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap (>= 1.4.4)
-  bootstrap (~> 4.6.0)
+  bootstrap (~> 5.0.1)
   byebug
   capybara (>= 3.26)
   diffy
diff --git a/app/assets/images/custom.png b/app/assets/images/custom.png
deleted file mode 100644
index e7dad6d6..00000000
Binary files a/app/assets/images/custom.png and /dev/null differ
diff --git a/app/assets/javascripts/password_controller.js b/app/assets/javascripts/password_controller.js
index c7221919..a1939aa0 100644
--- a/app/assets/javascripts/password_controller.js
+++ b/app/assets/javascripts/password_controller.js
@@ -1,8 +1,8 @@
 $(document).ready(function() {
   'use strict';
 
-  var $bootstrap = $('#exampleInputPassword').next('.input-group-append');
-  var $simple_form = $('#user_password').next('.input-group-append');
+  var $bootstrap = $("#exampleInputPassword").next(".input-group-text");
+  var $simple_form = $("#user_password").next(".input-group-text");
 
   var $pw_appends = $bootstrap.add($simple_form);
 
@@ -11,10 +11,10 @@ $(document).ready(function() {
     $(this).toggleClass('active');
     if ( $(this).hasClass('active') ) {
       $(this).prev().prop("type", "text");
-      $(this).find('.input-group-text').html("🙈");
+      $(this).text("🙈");
     } else {
       $(this).prev().prop("type", "password");
-      $(this).find('.input-group-text').html("🙊");
+      $(this).text("🙊");
     }
     $(this).prev().focus();
   });
diff --git a/app/assets/javascripts/toggle_controller.js b/app/assets/javascripts/toggle_controller.js
index 9ef1a81b..9938f770 100644
--- a/app/assets/javascripts/toggle_controller.js
+++ b/app/assets/javascripts/toggle_controller.js
@@ -2,8 +2,8 @@ $(document).ready(function() {
   'use strict';
 
   var $grid_target = $('[data-target="toggle.grid"]');
-  var $button      = $('[data-toggle="button"]');
-  var $buttons     = $('[data-toggle="buttons"]');
+  var $button      = $('[data-bs-toggle="button"]');
+  var $buttons     = $('[data-bs-toggle="buttons"]');
 
   // init
   if ( $grid_target.length >= 2 ) {
@@ -18,9 +18,9 @@ $(document).ready(function() {
 
   // stack / split view
   $buttons.click(function(event) {
-    event.preventDefault();
-    if ( $(event.target).hasClass("active") ) { return }
-    $grid_target.toggleClass("col-md-12");
+    if ( $(event.target).hasClass("btn") ) { return; }
+    var stack = $buttons.find(":checked").attr("id") === "stack";
+    $grid_target.toggleClass("col-md-12", stack);
   });
 
   // swap by press "s"
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index baf024db..52197bf5 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,5 +1,56 @@
-$theme-colors: ( "bootstrap": #563d7c, "simpleform": #00617f );
-@import "bootstrap";
+/*
+ * Keep in sync with `assets/stylesheets/_bootstrap.scss` from
+ * `bootstrap-rubygem`.
+ */
+
+@import "bootstrap/functions";
+
+$custom-colors: ( "bootstrap": #563d7c, "simpleform": #00617f );
+
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import "bootstrap/utilities";
+
+// Layout & components
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+@import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+@import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/alert";
+@import "bootstrap/progress";
+@import "bootstrap/list-group";
+@import "bootstrap/close";
+@import "bootstrap/toasts";
+@import "bootstrap/modal";
+@import "bootstrap/tooltip";
+@import "bootstrap/popover";
+@import "bootstrap/carousel";
+@import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+
+// Helpers
+@import "bootstrap/helpers";
+
+// Utilities
+@import "bootstrap/utilities/api";
 
 // App sections
 @import "application/breadcrumb";
diff --git a/app/assets/stylesheets/application/_breadcrumb.scss b/app/assets/stylesheets/application/_breadcrumb.scss
index b205ea40..07e05a9f 100644
--- a/app/assets/stylesheets/application/_breadcrumb.scss
+++ b/app/assets/stylesheets/application/_breadcrumb.scss
@@ -1,6 +1,6 @@
 .app-breadcrumb {
-  [data-toggle] {
-    @include media-breakpoint-down(sm) {
+  [data-bs-toggle] {
+    @include media-breakpoint-down(md) {
       & { display: none; }
     }
   }
diff --git a/app/assets/stylesheets/simple_form-bootstrap/_form_collection_label.scss b/app/assets/stylesheets/simple_form-bootstrap/_form_collection_label.scss
index c9bbcca8..26222836 100644
--- a/app/assets/stylesheets/simple_form-bootstrap/_form_collection_label.scss
+++ b/app/assets/stylesheets/simple_form-bootstrap/_form_collection_label.scss
@@ -7,27 +7,3 @@
     }
   }
 }
-
-// optional custom form spacing
-.custom-control-inline {
-  .custom-control-label {
-    &.collection_check_boxes,
-    &.collection_radio_buttons {
-      margin-right: .265625rem;
-    }
-  }
-}
-
-// required custom form radio button fix
-.form-group.radio_buttons {
-  > .custom-control {
-    @extend .custom-radio;
-  }
-}
-
-// required custom form check box fix
-.form-group.check_boxes {
-  > .custom-control {
-    @extend .custom-checkbox;
-  }
-}
diff --git a/app/assets/stylesheets/simple_form-bootstrap/_form_floating_labels.scss b/app/assets/stylesheets/simple_form-bootstrap/_form_floating_labels.scss
deleted file mode 100644
index 5484b923..00000000
--- a/app/assets/stylesheets/simple_form-bootstrap/_form_floating_labels.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-// extracted from:
-// https://getbootstrap.com/docs/4.3/examples/floating-labels/
-
-$sf-floating-input-padding-x: $input-padding-x !default;
-$sf-floating-input-padding-y: $input-padding-y * 2 !default;
-
-.form-label-group {
-  position: relative;
-  margin-bottom: 1rem;
-}
-
-.form-label-group > input,
-.form-label-group > .custom-select:not([multiple]) {
-  height: 3.125rem;
-}
-
-.form-label-group > textarea,
-.form-label-group > input,
-.form-label-group > select,
-.form-label-group > label {
-  padding: $sf-floating-input-padding-y $sf-floating-input-padding-x;
-}
-
-.form-label-group {
-  > label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    margin-bottom: 0; /* Override default `<label>` margin */
-    line-height: 1.5;
-    color: #495057;
-    cursor: text; /* Match the input under the label */
-    border: 1px solid transparent;
-    border-radius: .25rem;
-    transition: all .1s ease-in-out;
-    user-select: none;
-  }
-
-  textarea,
-  select,
-  input {
-    &::placeholder {
-      color: transparent;
-    }
-
-    &:not(:placeholder-shown) {
-      padding-top: $sf-floating-input-padding-y + $sf-floating-input-padding-y * (2 / 3);
-      padding-bottom: $sf-floating-input-padding-y / 3;
-
-      ~ label {
-        padding-top: $sf-floating-input-padding-y / 3;
-        padding-bottom: $sf-floating-input-padding-y / 3;
-        font-size: 12px;
-        color: #777;
-      }
-    }
-  }
-
-  .custom-select,
-  select.form-control {
-    ~ label {
-      width: auto;
-      padding-right: 0;
-      padding-bottom: 0;
-    }
-  }
-
-  select[multiple] {
-    ~ label {
-      background-color: $input-bg;
-      padding: 0 0 0 $sf-floating-input-padding-x;
-      margin-top: $input-border-width;
-      margin-left: $input-border-width * 2;
-      width: 99%;
-    }
-  }
-}
-
-
-/* Fallback for Edge */
-@supports (-ms-ime-align: auto) {
-  .form-label-group {
-    > label {
-      display: none;
-    }
-    textarea::-ms-input-placeholder,
-    input::-ms-input-placeholder {
-      color: #777;
-    }
-  }
-}
-
-/* Fallback for IE */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .form-label-group {
-    > label {
-      display: none;
-    }
-    textarea:-ms-input-placeholder,
-    input:-ms-input-placeholder {
-      color: #777;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/simple_form-bootstrap/_form_legend_clear.scss b/app/assets/stylesheets/simple_form-bootstrap/_form_legend_clear.scss
new file mode 100644
index 00000000..a2c53003
--- /dev/null
+++ b/app/assets/stylesheets/simple_form-bootstrap/_form_legend_clear.scss
@@ -0,0 +1,10 @@
+// In bootstrap 5 legend floats left and requires the following element
+// to be cleared. In a radio button or checkbox group the element after
+// the legend will be the automatically generated hidden input; the fix
+// in https://github.com/twbs/bootstrap/pull/30345 applies to the hidden
+// input and has no visual effect. Here we try to fix matters by
+// applying the clear to the div wrapping the first following radio button
+// or checkbox.
+legend ~ div.form-check:first-of-type {
+  clear: left;
+}
diff --git a/app/assets/stylesheets/simple_form-bootstrap/_form_multi_select.scss b/app/assets/stylesheets/simple_form-bootstrap/_form_multi_select.scss
index 2b693906..1fb7a1c0 100644
--- a/app/assets/stylesheets/simple_form-bootstrap/_form_multi_select.scss
+++ b/app/assets/stylesheets/simple_form-bootstrap/_form_multi_select.scss
@@ -1,5 +1,4 @@
-.custom-select,
-.form-control {
+.form-select {
   &.date,
   &.datetime,
   &.time {
@@ -7,11 +6,3 @@
     &:last-of-type { margin-right: 0 !important; }
   }
 }
-
-.custom-select {
-  &[multiple],
-  &:only-child {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
diff --git a/app/assets/stylesheets/simple_form-bootstrap/_simple_form-bootstrap.scss b/app/assets/stylesheets/simple_form-bootstrap/_simple_form-bootstrap.scss
index acb23182..8d378ed4 100644
--- a/app/assets/stylesheets/simple_form-bootstrap/_simple_form-bootstrap.scss
+++ b/app/assets/stylesheets/simple_form-bootstrap/_simple_form-bootstrap.scss
@@ -1,5 +1,5 @@
 @import "form_abbr";
 @import "form_button";
 @import "form_collection_label";
-@import "form_floating_labels";
+@import "form_legend_clear";
 @import "form_multi_select";
diff --git a/app/controllers/examples/base_controller.rb b/app/controllers/examples/base_controller.rb
index 5904baa9..7fec6cd4 100644
--- a/app/controllers/examples/base_controller.rb
+++ b/app/controllers/examples/base_controller.rb
@@ -1,5 +1,5 @@
 class Examples::BaseController < ApplicationController
-  TYPES = [:vertical, :horizontal, :inline, :custom, :input_group, :floating_label]
+  TYPES = [:vertical, :horizontal, :inline, :input_group, :floating_label]
 
   private
 
diff --git a/app/controllers/examples/customs_controller.rb b/app/controllers/examples/customs_controller.rb
deleted file mode 100644
index 8b734152..00000000
--- a/app/controllers/examples/customs_controller.rb
+++ /dev/null
@@ -1,15 +0,0 @@
-class Examples::CustomsController < Examples::BaseController
-  def new
-    @user = User.new
-  end
-
-  def create
-    @user = User.new(user_params)
-
-    if @user.valid?
-      redirect_to new_examples_custom_path, flash: { success: 'Form is valid' }
-    else
-      render :new
-    end
-  end
-end
diff --git a/app/helpers/error_messages_helper.rb b/app/helpers/error_messages_helper.rb
index 33a0040c..f165968f 100644
--- a/app/helpers/error_messages_helper.rb
+++ b/app/helpers/error_messages_helper.rb
@@ -18,11 +18,13 @@ def error_messages_for(*objects)
     messages = objects.compact.flat_map { |o| o.errors.full_messages }
     unless messages.empty?
       content_tag(:div, class: "alert alert-danger alert-form alert-dismissible") do
-        content_tag(:div, class: "media") do
-          icon_svg("alerts/error.svg", class: "d-flex mr-3 icon icon-3x") +
-          content_tag(:div, class: "media-body") do
+        content_tag(:div, class: "d-flex") do
+          content_tag(:div, class: "flex-shrink-0") do
+            icon_svg("alerts/error.svg", class: "icon icon-3x")
+          end +
+          content_tag(:div, class: "flex-grow-1 ms-3") do
             list_items = messages.map { |msg| content_tag(:li, msg) }
-            content_tag(:a, "×", href: "#", class: "close", data: { dismiss: "alert" }) +
+            content_tag(:a, "×", href: "#", class: "close", data: { "bs-dismiss": "alert" }) +
             content_tag(:h6, options[:template_header], class: "text-uppercase text-reset my-1") +
             content_tag(:p, options[:template_body]) +
             content_tag(:ul, list_items.join.html_safe, class: "mb-0")
diff --git a/app/views/application/_breadcrumb.html.erb b/app/views/application/_breadcrumb.html.erb
index 68c7cba9..e9dae5cb 100644
--- a/app/views/application/_breadcrumb.html.erb
+++ b/app/views/application/_breadcrumb.html.erb
@@ -1,21 +1,20 @@
 <div class="app-breadcrumb container">
   <div class="d-flex flex-row justify-content-between">
-    <ol class="breadcrumb bg-transparent px-0">
+    <ol class="breadcrumb bg-transparent">
       <%= yield :breadcrumb %>
     </ol>
 
     <div>
-      <button type="button" class="btn btn-sm btn-outline-secondary mt-2 mr-2 d-none" data-tooltip data-placement="bottom" data-trigger="hover" title="compare by clicking fast" data-toggle="button" aria-pressed="false" autocomplete="off">
+      <button type="button" class="btn btn-sm btn-outline-secondary me-2 d-none" data-tooltip data-bs-placement="bottom" title="compare by clicking fast" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
         Swap
       </button>
 
-      <div class="btn-group btn-group-toggle mt-2 d-none" data-toggle="buttons">
-        <label class="btn btn-sm btn-outline-secondary">
-          <input type="radio" name="view" id="stack" autocomplete="off"> Stack
-        </label>
-        <label class="btn btn-sm btn-outline-secondary active">
-          <input type="radio" name="view" id="split" autocomplete="off" checked> Split
-        </label>
+      <div class="btn-group d-none" role="group" data-bs-toggle="buttons">
+        <input type="radio" class="btn-check" name="view" id="stack" autocomplete="off">
+        <label class="btn btn-sm btn-outline-secondary" for="stack">Stack</label>
+
+        <input type="radio" class="btn-check" name="view" id="split" autocomplete="off" checked>
+        <label class="btn btn-sm btn-outline-secondary" for="split">Split</label>
       </div>
     </div>
   </div>
diff --git a/app/views/application/_flash.html.erb b/app/views/application/_flash.html.erb
index e80f54c2..ee46710d 100644
--- a/app/views/application/_flash.html.erb
+++ b/app/views/application/_flash.html.erb
@@ -7,9 +7,11 @@
       <%= content_tag :div, class: "alert alert-#{type} alert-flash" do %>
         <div class="container">
 
-          <div class="media">
-            <%= icon_svg("alerts/#{type}.svg", class: "d-flex mr-3 icon icon-3x") %>
-            <div class="media-body">
+          <div class="d-flex">
+            <div class="flex-shrink-0">
+              <%= icon_svg("alerts/#{type}.svg", class: "icon icon-3x") %>
+            </div>
+            <div class="flex-grow-1 ms-3">
               <%= content_tag(:h6, t(".headline.#{type}"), class: "text-uppercase text-reset my-1") %>
               <% if body.kind_of?(Array) %>
                 <ul class="mb-0">
diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb
index dc36e0cc..702cd493 100644
--- a/app/views/application/_header.html.erb
+++ b/app/views/application/_header.html.erb
@@ -2,23 +2,23 @@
   <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
     <div class="container">
       <%= link_to "Simple Form & Bootstrap", root_path, class: "navbar-brand" %>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
       <div class="collapse navbar-collapse" id="navbar-header">
-        <ul class="navbar-nav ml-auto">
+        <ul class="navbar-nav ms-auto">
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbar-example" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <a class="nav-link dropdown-toggle" href="#" id="navbar-example" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Examples
             </a>
-            <div class="dropdown-menu" aria-labelledby="navbar-example">
-              <%= link_to("Overview", examples_path, class: "dropdown-item") %>
-              <div class="dropdown-divider"></div>
+            <ul class="dropdown-menu" aria-labelledby="navbar-example">
+              <li><%= link_to("Overview", examples_path, class: "dropdown-item") %></li>
+              <li><hr class="dropdown-divider"></li>
               <% Examples::BaseController::TYPES.each do |form| %>
-                <%= link_to t("examples.index.#{form}.link"), [:new, :examples, form], class: "dropdown-item" %>
+                <li><%= link_to t("examples.index.#{form}.link"), [:new, :examples, form], class: "dropdown-item" %></li>
               <% end %>
-            </div>
+            </ul>
           </li>
           <%= content_tag(:li, link_to("Documentation", documentation_path, class: "nav-link"), class: "nav-item #{is_active?(documentation_path)}") %>
         </ul>
diff --git a/app/views/application/_jumbotron.html.erb b/app/views/application/_jumbotron.html.erb
index f508aa21..974201a3 100644
--- a/app/views/application/_jumbotron.html.erb
+++ b/app/views/application/_jumbotron.html.erb
@@ -1,6 +1,6 @@
 <section class="app-jumbotron jumbotron text-center">
   <div class="container">
-    <h1 class="jumbotron-heading">Simple Form 💜 Bootstrap 4</h1>
+    <h1 class="jumbotron-heading">Simple Form 💜 Bootstrap 5</h1>
     <p class="lead text-muted">
       Build responsive, mobile-first HTML Forms with <a href="https://github.com/heartcombo/simple_form">Simple Form</a> and <a href="http://getbootstrap.com/">Bootstrap</a>.
       The world's most popular front-end component library meets easy and simple DSL to build Forms with Rails.
diff --git a/app/views/documentation/index.html.erb b/app/views/documentation/index.html.erb
index b3119b8b..60b343b3 100644
--- a/app/views/documentation/index.html.erb
+++ b/app/views/documentation/index.html.erb
@@ -89,7 +89,7 @@
       <% file_path = 'app/assets/stylesheets/simple_form-bootstrap/_form_collection_label.scss' %>
       <%= render_source File.read(File.join(Rails.root, file_path)), :scss, file_path %>
 
-      <% file_path = 'app/assets/stylesheets/simple_form-bootstrap/_form_floating_labels.scss' %>
+      <% file_path = 'app/assets/stylesheets/simple_form-bootstrap/_form_legend_clear.scss' %>
       <%= render_source File.read(File.join(Rails.root, file_path)), :scss, file_path %>
 
       <% file_path = 'app/assets/stylesheets/simple_form-bootstrap/_form_multi_select.scss' %>
diff --git a/app/views/examples/base/_card_bootstrap.html.erb b/app/views/examples/base/_card_bootstrap.html.erb
index f524116f..b348ca09 100644
--- a/app/views/examples/base/_card_bootstrap.html.erb
+++ b/app/views/examples/base/_card_bootstrap.html.erb
@@ -6,7 +6,7 @@
         <small class="text-muted">Static Bootstrap markup from docs</small>
       </div>
       <div>
-        <button class="btn btn-sm btn-outline-bootstrap" data-toggle="modal" data-target="#modal-bootstrap" data-tooltip title="View form source code">Source</button>
+        <button class="btn btn-sm btn-outline-bootstrap" data-bs-toggle="modal" data-bs-target="#modal-bootstrap" data-tooltip title="View form source code">Source</button>
         <button class="btn btn-sm btn-bootstrap" data-fill="bootstrap" data-tooltip title="Fill form with valid data">Fill</button>
       </div>
     </div>
diff --git a/app/views/examples/base/_card_simple_form.html.erb b/app/views/examples/base/_card_simple_form.html.erb
index 35377c40..1e7b2fc2 100644
--- a/app/views/examples/base/_card_simple_form.html.erb
+++ b/app/views/examples/base/_card_simple_form.html.erb
@@ -6,7 +6,7 @@
         <small class="text-muted">Dynamic markup generated by Simple Form</small>
       </div>
       <div>
-        <button class="btn btn-sm btn-outline-simpleform" data-toggle="modal" data-target="#modal-simpleform" data-tooltip title="View form source code">Source</button>
+        <button class="btn btn-sm btn-outline-simpleform" data-bs-toggle="modal" data-bs-target="#modal-simpleform" data-tooltip title="View form source code">Source</button>
         <button class="btn btn-sm btn-simpleform" data-fill="simpleform" data-tooltip title="Fill form with valid data">Fill</button>
       </div>
     </div>
diff --git a/app/views/examples/customs/_bootstrap.html.erb b/app/views/examples/customs/_bootstrap.html.erb
deleted file mode 100644
index dd931d29..00000000
--- a/app/views/examples/customs/_bootstrap.html.erb
+++ /dev/null
@@ -1,415 +0,0 @@
-<form class="needs-validation" novalidate>
-  <div class="alert alert-danger d-none">Please review the problems below:</div>
-
-  <div class="form-group">
-    <label>Birthday</label>
-    <div class="d-flex flex-row justify-content-between align-items-center">
-      <select id="exampleInputDateYear" class="custom-select mr-1" required>
-        <option></option>
-        <option value="2013">2013</option>
-        <option value="2014">2014</option>
-        <option value="2015">2015</option>
-        <option value="2016">2016</option>
-        <option value="2017">2017</option>
-        <option value="2018">2018</option>
-        <option value="2019">2019</option>
-        <option value="2020">2020</option>
-        <option value="2021">2021</option>
-        <option value="2022">2022</option>
-        <option value="2023">2023</option>
-      </select>
-
-      <select id="exampleInputDateMonth" class="custom-select mx-1" required>
-        <option></option>
-        <option value="1">January</option>
-        <option value="2">February</option>
-        <option value="3">March</option>
-        <option value="4">April</option>
-        <option value="5">May</option>
-        <option value="6">June</option>
-        <option value="7">July</option>
-        <option value="8">August</option>
-        <option value="9">September</option>
-        <option value="10">October</option>
-        <option value="11">November</option>
-        <option value="12">December</option>
-      </select>
-
-      <select id="exampleInputDateDay" class="custom-select ml-1" required>
-        <option></option>
-        <option value="1">1</option>
-        <option value="2">2</option>
-        <option value="3">3</option>
-        <option value="4">4</option>
-        <option value="5">5</option>
-        <option value="6">6</option>
-        <option value="7">7</option>
-        <option value="8">8</option>
-        <option value="9">9</option>
-        <option value="10">10</option>
-        <option value="11">11</option>
-        <option value="12">12</option>
-        <option value="13">13</option>
-        <option value="14">14</option>
-        <option value="15">15</option>
-        <option value="16">16</option>
-        <option value="17">17</option>
-        <option value="18">18</option>
-        <option value="19">19</option>
-        <option value="20">20</option>
-        <option value="21">21</option>
-        <option value="22">22</option>
-        <option value="23">23</option>
-        <option value="24">24</option>
-        <option value="25">25</option>
-        <option value="26">26</option>
-        <option value="27">27</option>
-        <option value="28">28</option>
-        <option value="29">29</option>
-        <option value="30">30</option>
-        <option value="31">31</option>
-      </select>
-    </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Date multi select example</small>
-  </div>
-
-  <div class="form-group">
-    <label for="exampleCustomFile">Avatar</label>
-    <div class="custom-file">
-      <input type="file" class="custom-file-input" id="customFile">
-      <label class="custom-file-label" for="customFile">Choose file</label>
-    </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">File input example</small>
-  </div>
-
-  <fieldset class="form-group">
-    <legend class="col-form-label pt-0">Color</legend>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio1" value="option1" required>
-      <label class="custom-control-label" for="exampleInlineRadio1">Red</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio2" value="option2" required>
-      <label class="custom-control-label" for="exampleInlineRadio2">Pink</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio3" value="option3" required>
-      <label class="custom-control-label" for="exampleInlineRadio3">Violet</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio4" value="option4" required>
-      <label class="custom-control-label" for="exampleInlineRadio4">Indigo</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio5" value="option5" required>
-      <label class="custom-control-label" for="exampleInlineRadio5">Blue</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio6" value="option6" required>
-      <label class="custom-control-label" for="exampleInlineRadio6">Teal</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio7" value="option7" required>
-      <label class="custom-control-label" for="exampleInlineRadio7">Green</label>
-    </div>
-    <div class="custom-control custom-radio custom-control-inline">
-      <input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio8" value="option8" required>
-      <label class="custom-control-label" for="exampleInlineRadio8">Yellow</label>
-    </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection as inline radio buttons example</small>
-  </fieldset>
-
-  <fieldset class="form-group">
-    <legend class="col-form-label pt-0">Fruit</legend>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox1" value="option1" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox1">Apple</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox2" value="option2" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox2">Banana</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox3" value="option3" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox3">Cherry</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox4" value="option4" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox4">Coconut</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox5" value="option5" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox5">Grape</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox6" value="option6" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox6">Lime</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox7" value="option7" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox7">Mango</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox8" value="option8" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox8">Orange</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox9" value="option9" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox9">Pear</label>
-    </div>
-    <div class="custom-control custom-checkbox custom-control-inline">
-      <input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox10" value="option10" required>
-      <label class="custom-control-label" for="exampleInlineCheckbox10">Pineapple</label>
-    </div>
-    <small class="form-text text-muted">Collection as inline check boxes example</small>
-  </fieldset>
-
-  <div class="form-group">
-    <label for="exampleSelectMusic">Music</label>
-    <select multiple="" class="custom-select" id="exampleSelectMusic" required>
-      <option value="rock">Rock</option>
-      <option value="pop">Pop</option>
-      <option value="jazz">Jazz</option>
-      <option value="heavy_metal">Heavy Metal</option>
-      <option value="hip_hop">Hip Hop</option>
-      <option value="house">House</option>
-      <option value="electronic_dance">EDM</option>
-      <option value="dance">Dance</option>
-      <option value="techno">Techno</option>
-    </select>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection multiple select example</small>
-  </div>
-
-  <div class="form-group">
-    <label for="exampleSelectLanguage">Language</label>
-    <select class="custom-select" id="exampleSelectLanguage" required>
-      <option value="">Select your Language</option>
-      <option value="en">English</option>
-      <option value="de">German</option>
-      <option value="es">Spanish</option>
-      <option value="ru">Russian</option>
-    </select>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection select example</small>
-  </div>
-
-  <fieldset class="form-group">
-    <legend class="col-form-label pt-0">Pill</legend>
-    <div class="custom-control custom-radio">
-      <input class="custom-control-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillRed" value="red" required>
-      <label class="custom-control-label" for="exampleRadiosPillRed">
-        Red pill
-      </label>
-    </div>
-    <div class="custom-control custom-radio">
-      <input class="custom-control-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillBlue" value="blue" required>
-      <label class="custom-control-label" for="exampleRadiosPillBlue">
-        Blue pill
-      </label>
-    </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection as radio buttons example</small>
-  </fieldset>
-
-  <fieldset class="form-group">
-    <legend class="col-form-label pt-0">Choises</legend>
-    <div class="custom-control custom-checkbox">
-      <input class="custom-control-input" type="checkbox" id="exampleCheckbox1" value="option1" required>
-      <label class="custom-control-label" for="exampleCheckbox1">Learn the Ruby programming language</label>
-    </div>
-    <div class="custom-control custom-checkbox">
-      <input class="custom-control-input" type="checkbox" id="exampleCheckbox2" value="option1" required>
-      <label class="custom-control-label" for="exampleCheckbox2">Create a Ruby on Rails application</label>
-    </div>
-    <div class="custom-control custom-checkbox">
-      <input class="custom-control-input" type="checkbox" id="exampleCheckbox3" value="option1" required>
-      <label class="custom-control-label" for="exampleCheckbox3">Practice Ruby, Rails, Tests and Simple Form</label>
-    </div>
-    <div class="custom-control custom-checkbox">
-      <input class="custom-control-input" type="checkbox" id="exampleCheckbox4" value="option1" required>
-      <label class="custom-control-label" for="exampleCheckbox4">Deploy your application in the cloud</label>
-    </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection as check boxes example</small>
-  </fieldset>
-
-  <div class="form-group">
-    <label for="exampleRangeMood">Mood</label>
-    <input type="range" class="custom-range" id="exampleRangeMood" step="10" required>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Integer range example</small>
-  </div>
-
-  <div class="form-group">
-    <label>Awake</label>
-    <div class="d-flex flex-row justify-content-between align-items-center">
-      <select id="exampleInputTimeHour" class="custom-select mr-1" required>
-        <option></option>
-        <option value="00">00</option>
-        <option value="01">01</option>
-        <option value="02">02</option>
-        <option value="03">03</option>
-        <option value="04">04</option>
-        <option value="05">05</option>
-        <option value="06">06</option>
-        <option value="07">07</option>
-        <option value="08">08</option>
-        <option value="09">09</option>
-        <option value="10">10</option>
-        <option value="11">11</option>
-        <option value="12">12</option>
-        <option value="13">13</option>
-        <option value="14">14</option>
-        <option value="15">15</option>
-        <option value="16">16</option>
-        <option value="17">17</option>
-        <option value="18">18</option>
-        <option value="19">19</option>
-        <option value="20">20</option>
-        <option value="21">21</option>
-        <option value="22">22</option>
-        <option value="23">23</option>
-      </select>
-      :
-      <select id="exampleInputTimeMinute" class="custom-select ml-1" required>
-        <option></option>
-        <option value="00">00</option>
-        <option value="30">30</option>
-      </select>
-    </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Time multi select example</small>
-  </div>
-
-  <div class="form-group">
-    <label>First kiss</label>
-    <div class="d-flex flex-row justify-content-between align-items-center">
-      <select id="exampleInputDatetimeYear" class="custom-select mr-1" required>
-        <option></option>
-        <option value="2013">2013</option>
-        <option value="2014">2014</option>
-        <option value="2015">2015</option>
-        <option value="2016">2016</option>
-        <option value="2017">2017</option>
-        <option value="2018">2018</option>
-        <option value="2019">2019</option>
-        <option value="2020">2020</option>
-        <option value="2021">2021</option>
-        <option value="2022">2022</option>
-        <option value="2023">2023</option>
-      </select>
-
-      <select id="exampleInputDatetimeMonth" class="custom-select mx-1" required>
-        <option></option>
-        <option value="1">January</option>
-        <option value="2">February</option>
-        <option value="3">March</option>
-        <option value="4">April</option>
-        <option value="5">May</option>
-        <option value="6">June</option>
-        <option value="7">July</option>
-        <option value="8">August</option>
-        <option value="9">September</option>
-        <option value="10">October</option>
-        <option value="11">November</option>
-        <option value="12">December</option>
-      </select>
-
-      <select id="exampleInputDatetimeDay" class="custom-select mx-1" required>
-        <option></option>
-        <option value="1">1</option>
-        <option value="2">2</option>
-        <option value="3">3</option>
-        <option value="4">4</option>
-        <option value="5">5</option>
-        <option value="6">6</option>
-        <option value="7">7</option>
-        <option value="8">8</option>
-        <option value="9">9</option>
-        <option value="10">10</option>
-        <option value="11">11</option>
-        <option value="12">12</option>
-        <option value="13">13</option>
-        <option value="14">14</option>
-        <option value="15">15</option>
-        <option value="16">16</option>
-        <option value="17">17</option>
-        <option value="18">18</option>
-        <option value="19">19</option>
-        <option value="20">20</option>
-        <option value="21">21</option>
-        <option value="22">22</option>
-        <option value="23">23</option>
-        <option value="24">24</option>
-        <option value="25">25</option>
-        <option value="26">26</option>
-        <option value="27">27</option>
-        <option value="28">28</option>
-        <option value="29">29</option>
-        <option value="30">30</option>
-        <option value="31">31</option>
-      </select>
-      —
-      <select id="exampleInputDatetimeHour" class="custom-select mx-1" required>
-        <option></option>
-        <option value="00">00</option>
-        <option value="01">01</option>
-        <option value="02">02</option>
-        <option value="03">03</option>
-        <option value="04">04</option>
-        <option value="05">05</option>
-        <option value="06">06</option>
-        <option value="07">07</option>
-        <option value="08">08</option>
-        <option value="09">09</option>
-        <option value="10">10</option>
-        <option value="11">11</option>
-        <option value="12">12</option>
-        <option value="13">13</option>
-        <option value="14">14</option>
-        <option value="15">15</option>
-        <option value="16">16</option>
-        <option value="17">17</option>
-        <option value="18">18</option>
-        <option value="19">19</option>
-        <option value="20">20</option>
-        <option value="21">21</option>
-        <option value="22">22</option>
-        <option value="23">23</option>
-      </select>
-      :
-      <select id="exampleInputDatetimeMinute" class="custom-select ml-1" required>
-        <option></option>
-        <option value="00">00</option>
-        <option value="30">30</option>
-      </select>
-    </div>
-    <small class="form-text text-muted">Datetime multi select example</small>
-  </div>
-
-  <fieldset class="form-group">
-    <div class="custom-control custom-switch">
-      <input class="custom-control-input" type="checkbox" value="" id="exampleCheckTerms" required>
-      <label class="custom-control-label" for="exampleCheckTerms">Terms</label>
-      <div class="invalid-feedback">Terms must be accepted</div>
-      <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Boolean as check box example</small>
-    </div>
-  </fieldset>
-
-  <button type="submit" class="btn btn-primary">Create User!</button>
-  <button type="reset" class="btn btn-outline-secondary">Cancel</button>
-</form>
diff --git a/app/views/examples/customs/_form.html.erb b/app/views/examples/customs/_form.html.erb
deleted file mode 100644
index 84fc5f52..00000000
--- a/app/views/examples/customs/_form.html.erb
+++ /dev/null
@@ -1,46 +0,0 @@
-<%= simple_form_for @user, url: examples_custom_path,
-  wrapper_mappings: {
-    boolean:       :custom_boolean,
-    check_boxes:   :custom_collection,
-    date:          :custom_multi_select,
-    datetime:      :custom_multi_select,
-    file:          :custom_file,
-    radio_buttons: :custom_collection,
-    range:         :custom_range,
-    time:          :custom_multi_select,
-    select:        :custom_multi_select
-  } do |f| %>
-
-  <%= f.error_notification %>
-
-  <%= render partial: "shared/form_unused_as_hidden", locals: {
-    f: f, fields: [:name, :email, :password, :bio, :active, :friends]
-  } %>
-
-  <%= f.input :birthday %>
-
-  <%= f.input :avatar, as: :file, input_html: { accept: User::AVATAR } %>
-
-  <%= f.input :color, as: :radio_buttons, collection: User::COLOR, wrapper: :custom_collection_inline %>
-
-  <%= f.input :fruit, as: :check_boxes, collection: User::FRUIT, wrapper: :custom_collection_inline %>
-
-  <%= f.input :music, collection: User::MUSIC, input_html: { multiple: true } %>
-
-  <%= f.input :language, collection: User::LANGUAGE, prompt: :translate %>
-
-  <%= f.input :pill, as: :radio_buttons, collection: User::PILL %>
-
-  <%= f.input :choises, as: :check_boxes, collection: User::CHOISES %>
-
-  <%= f.input :mood, as: :range, input_html: { step: 10 } %>
-
-  <%= f.input :awake %>
-
-  <%= f.input :first_kiss %>
-
-  <%= f.input :terms, wrapper: :custom_boolean_switch %>
-
-  <%= f.button :submit, class: "btn-primary" %>
-  <%= f.button :button, "Cancel", type: "reset", class: "btn-outline-secondary" %>
-<% end %>
diff --git a/app/views/examples/customs/new.html.erb b/app/views/examples/customs/new.html.erb
deleted file mode 100644
index 34fc003e..00000000
--- a/app/views/examples/customs/new.html.erb
+++ /dev/null
@@ -1,21 +0,0 @@
-<% content_for :breadcrumb do %>
-  <li class="breadcrumb-item"><%= link_to "Home", root_path %></li>
-  <li class="breadcrumb-item"><%= link_to "Examples", examples_path %></li>
-  <li class="breadcrumb-item active">Custom Form</li>
-<% end %>
-
-<div class="app-example container">
-  <div class="row">
-    <%= render partial: "bootstrap", layout: "card_bootstrap", locals: { title: "Custom Form" } %>
-    <%= render partial: "form",      layout: "card_simple_form", locals: { title: "Custom Form" } %>
-  </div>
-
-  <%= render partial: "shared/tipps" %>
-
-  <%# move modals to bottom %>
-  <%= render partial: "shared/modal", locals: { id: "modal-bootstrap", title: "Bootstrap",
-    content: render_source(File.read(File.join(Rails.root, 'app/views/examples/customs/_bootstrap.html.erb'))) } %>
-
-  <%= render partial: "shared/modal", locals: { id: "modal-simpleform", title: "Simple Form",
-    content: render_source(File.read(File.join(Rails.root, 'app/views/examples/customs/_form.html.erb'))) } %>
-</div>
diff --git a/app/views/examples/floating_labels/_bootstrap.html.erb b/app/views/examples/floating_labels/_bootstrap.html.erb
index 60746774..97f53dc1 100644
--- a/app/views/examples/floating_labels/_bootstrap.html.erb
+++ b/app/views/examples/floating_labels/_bootstrap.html.erb
@@ -1,42 +1,24 @@
 <form class="needs-validation" novalidate>
   <div class="alert alert-danger d-none">Please review the problems below:</div>
 
-  <div class="form-label-group">
+  <div class="form-floating mb-3">
     <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
     <label for="exampleInputEmail">Email</label>
     <div class="invalid-feedback">Email can't be blank</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+    <div class="form-text">We'll never share your email with anyone else.</div>
   </div>
 
-  <div class="form-label-group">
+  <div class="form-floating mb-3">
     <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
     <label for="exampleInputPassword">Password</label>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Password input example</small>
+    <div class="form-text">Password input example</div>
   </div>
 
-  <div class="form-label-group">
-    <select multiple="" class="custom-select" id="exampleSelectMusic" required>
-      <option value="rock">Rock</option>
-      <option value="pop">Pop</option>
-      <option value="jazz">Jazz</option>
-      <option value="heavy_metal">Heavy Metal</option>
-      <option value="hip_hop">Hip Hop</option>
-      <option value="house">House</option>
-      <option value="electronic_dance">EDM</option>
-      <option value="dance">Dance</option>
-      <option value="techno">Techno</option>
-    </select>
-    <label for="exampleSelectMusic">Music</label>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection multiple select example</small>
-  </div>
-
-  <div class="form-label-group">
-    <select class="custom-select" id="exampleSelectLanguage" required>
+  <div class="form-floating mb-3">
+    <select class="form-select" id="exampleSelectLanguage" required>
       <option value="">Select your Language</option>
       <option value="en">English</option>
       <option value="de">German</option>
@@ -46,15 +28,15 @@
     <label for="exampleSelectLanguage">Language</label>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection select example</small>
+    <div class="form-text">Collection select example</div>
   </div>
 
-  <div class="form-label-group">
-    <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
+  <div class="form-floating mb-3">
+    <textarea class="form-control" id="exampleTextareaBio" placeholder="Tell us your story" required></textarea>
     <label for="exampleTextareaBio">Bio</label>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Textarea input example</small>
+    <div class="form-text">Textarea input example</div>
   </div>
 
   <button type="submit" class="btn btn-primary">Create User!</button>
diff --git a/app/views/examples/floating_labels/_form.html.erb b/app/views/examples/floating_labels/_form.html.erb
index 313a0111..020a095c 100644
--- a/app/views/examples/floating_labels/_form.html.erb
+++ b/app/views/examples/floating_labels/_form.html.erb
@@ -14,8 +14,6 @@
 
   <%= f.input :password %>
 
-  <%= f.input :music, collection: User::MUSIC, input_html: { multiple: true } %>
-
   <%= f.input :language, collection: User::LANGUAGE, prompt: :translate %>
 
   <%= f.input :bio %>
diff --git a/app/views/examples/horizontals/_bootstrap.html.erb b/app/views/examples/horizontals/_bootstrap.html.erb
index 8732c6d2..2b8016fe 100644
--- a/app/views/examples/horizontals/_bootstrap.html.erb
+++ b/app/views/examples/horizontals/_bootstrap.html.erb
@@ -1,61 +1,61 @@
 <form class="needs-validation" novalidate>
   <div class="alert alert-danger d-none">Please review the problems below:</div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleInputName" class="col-sm-3 col-form-label">Name</label>
     <div class="col-sm-9">
       <input type="text" class="form-control" id="exampleInputName" placeholder="Your name" required>
       <div class="invalid-feedback">Name can't be blank</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Text input example</small>
+      <div class="form-text">Text input example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleInputEmail" class="col-sm-3 col-form-label">Email</label>
     <div class="col-sm-9">
       <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
       <div class="invalid-feedback">Email can't be blank</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+      <div class="form-text">We'll never share your email with anyone else.</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleInputPassword" class="col-sm-3 col-form-label">Password</label>
     <div class="col-sm-9">
       <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Password input example</small>
+      <div class="form-text">Password input example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleCustomFile" class="col-sm-3 col-form-label">Avatar</label>
     <div class="col-sm-9">
-      <input type="file" class="form-control-file" id="exampleCustomFile" required>
+      <input type="file" class="form-control" id="exampleCustomFile" required>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">File input example</small>
+      <div class="form-text">File input example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleTextareaBio" class="col-sm-3 col-form-label">Bio</label>
     <div class="col-sm-9">
       <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Textarea input example</small>
+      <div class="form-text">Textarea input example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label">Birthday</label>
     <div class="col-sm-9">
       <div class="d-flex flex-row justify-content-between align-items-center">
-        <select id="exampleInputDateYear" class="form-control mr-1" required>
+        <select id="exampleInputDateYear" class="form-select me-1" required>
           <option></option>
           <option value="2013">2013</option>
           <option value="2014">2014</option>
@@ -70,7 +70,7 @@
           <option value="2023">2023</option>
         </select>
 
-        <select id="exampleInputDateMonth" class="form-control mx-1" required>
+        <select id="exampleInputDateMonth" class="form-select mx-1" required>
           <option></option>
           <option value="1">January</option>
           <option value="2">February</option>
@@ -86,7 +86,7 @@
           <option value="12">December</option>
         </select>
 
-        <select id="exampleInputDateDay" class="form-control ml-1" required>
+        <select id="exampleInputDateDay" class="form-select ms-1" required>
           <option></option>
           <option value="1">1</option>
           <option value="2">2</option>
@@ -123,11 +123,11 @@
       </div>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Date multi select example</small>
+      <div class="form-text">Date multi select example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label pt-0">Color</label>
     <div class="col-sm-9">
       <div class="form-check form-check-inline">
@@ -164,11 +164,11 @@
       </div>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Collection as inline radio buttons example</small>
+      <div class="form-text">Collection as inline radio buttons example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label pt-0">Fruit</label>
     <div class="col-sm-9">
       <div class="form-check form-check-inline">
@@ -211,14 +211,14 @@
         <input class="form-check-input" type="checkbox" id="exampleInlineCheckbox10" value="option10" required>
         <label class="form-check-label" for="exampleInlineCheckbox10">Pineapple</label>
       </div>
-      <small class="form-text text-muted">Collection as inline check boxes example</small>
+      <div class="form-text">Collection as inline check boxes example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleSelectMusic" class="col-sm-3 col-form-label">Music</label>
     <div class="col-sm-9">
-      <select multiple="" class="form-control" id="exampleSelectMusic" required>
+      <select multiple="" class="form-select" id="exampleSelectMusic" required>
         <option value="rock">Rock</option>
         <option value="pop">Pop</option>
         <option value="jazz">Jazz</option>
@@ -231,14 +231,14 @@
       </select>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Collection multiple select example</small>
+      <div class="form-text">Collection multiple select example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleSelectLanguage" class="col-sm-3 col-form-label">Language</label>
     <div class="col-sm-9">
-      <select class="form-control" id="exampleSelectLanguage" required>
+      <select class="form-select" id="exampleSelectLanguage" required>
         <option value="">Select your Language</option>
         <option value="en">English</option>
         <option value="de">German</option>
@@ -247,11 +247,11 @@
       </select>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Collection select example</small>
+      <div class="form-text">Collection select example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label pt-0">Pill</label>
     <div class="col-sm-9">
       <div class="form-check">
@@ -268,11 +268,11 @@
       </div>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Collection as radio buttons example</small>
+      <div class="form-text">Collection as radio buttons example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label pt-0">Choises</label>
     <div class="col-sm-9">
       <div class="form-check">
@@ -293,35 +293,35 @@
       </div>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Collection as check boxes example</small>
+      <div class="form-text">Collection as check boxes example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label for="exampleInputFriends" class="col-sm-3 col-form-label">Friends</label>
     <div class="col-sm-9">
       <input type="number" class="form-control" id="exampleInputFriends" placeholder="Number of Friends" required>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Integer input example</small>
+      <div class="form-text">Integer input example</div>
     </div>
   </div>
 
-  <div class="form-group row">
-    <label for="exampleRangeMood" class="col-sm-3 col-form-label">Mood</label>
+  <div class="row mb-3">
+    <label for="exampleRangeMood" class="col-sm-3 col-form-label pt-0">Mood</label>
     <div class="col-sm-9">
-      <input type="range" class="form-control-range" id="exampleRangeMood" required>
+      <input type="range" class="form-range" id="exampleRangeMood" required>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Integer range example</small>
+      <div class="form-text">Integer range example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label">Awake</label>
     <div class="col-sm-9">
       <div class="d-flex flex-row justify-content-between align-items-center">
-        <select id="exampleInputTimeHour" class="form-control mr-1" required>
+        <select id="exampleInputTimeHour" class="form-select me-1" required>
           <option></option>
           <option value="00">00</option>
           <option value="01">01</option>
@@ -349,7 +349,7 @@
           <option value="23">23</option>
         </select>
         :
-        <select id="exampleInputTimeMinute" class="form-control ml-1" required>
+        <select id="exampleInputTimeMinute" class="form-select ms-1" required>
           <option></option>
           <option value="00">00</option>
           <option value="30">30</option>
@@ -357,15 +357,15 @@
       </div>
       <div class="invalid-feedback">Please provide a valid value.</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Time multi select example</small>
+      <div class="form-text">Time multi select example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label">First kiss</label>
     <div class="col-sm-9">
       <div class="d-flex flex-row justify-content-between align-items-center">
-        <select id="exampleInputDatetimeYear" class="form-control mr-1" required>
+        <select id="exampleInputDatetimeYear" class="form-select me-1" required>
           <option></option>
           <option value="2013">2013</option>
           <option value="2014">2014</option>
@@ -380,7 +380,7 @@
           <option value="2023">2023</option>
         </select>
 
-        <select id="exampleInputDatetimeMonth" class="form-control mx-1" required>
+        <select id="exampleInputDatetimeMonth" class="form-select mx-1" required>
           <option></option>
           <option value="1">January</option>
           <option value="2">February</option>
@@ -396,7 +396,7 @@
           <option value="12">December</option>
         </select>
 
-        <select id="exampleInputDatetimeDay" class="form-control mx-1" required>
+        <select id="exampleInputDatetimeDay" class="form-select mx-1" required>
           <option></option>
           <option value="1">1</option>
           <option value="2">2</option>
@@ -431,7 +431,7 @@
           <option value="31">31</option>
         </select>
         —
-        <select id="exampleInputDatetimeHour" class="form-control mx-1" required>
+        <select id="exampleInputDatetimeHour" class="form-select mx-1" required>
           <option></option>
           <option value="00">00</option>
           <option value="01">01</option>
@@ -459,17 +459,17 @@
           <option value="23">23</option>
         </select>
         :
-        <select id="exampleInputDatetimeMinute" class="form-control ml-1" required>
+        <select id="exampleInputDatetimeMinute" class="form-select ms-1" required>
           <option></option>
           <option value="00">00</option>
           <option value="30">30</option>
         </select>
       </div>
-      <small class="form-text text-muted">Datetime multi select example</small>
+      <div class="form-text">Datetime multi select example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <label class="col-sm-3 col-form-label pt-0">Active</label>
     <div class="col-sm-9">
       <div class="form-check">
@@ -482,23 +482,23 @@
       </div>
       <div class="invalid-feedback">Terms must be accepted</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Boolean as radio button example</small>
+      <div class="form-text">Boolean as radio button example</div>
     </div>
   </div>
 
-  <div class="form-group row">
+  <div class="row mb-3">
     <div class="col-sm-9 offset-sm-3">
       <div class="form-check">
         <input class="form-check-input" type="checkbox" value="" id="exampleCheckTerms" required>
         <label class="form-check-label" for="exampleCheckTerms">Terms</label>
         <div class="invalid-feedback">Terms must be accepted</div>
         <div class="valid-feedback">Looks good!</div>
-        <small class="form-text text-muted">Boolean as check box example</small>
+        <div class="form-text">Boolean as check box example</div>
       </div>
     </div>
   </div>
 
-  <div class="form-group row mb-0">
+  <div class="row mb-0">
     <div class="col-sm-9 offset-sm-3">
       <button type="submit" class="btn btn-primary">Create User!</button>
       <button type="reset" class="btn btn-outline-secondary">Cancel</button>
diff --git a/app/views/examples/horizontals/_form.html.erb b/app/views/examples/horizontals/_form.html.erb
index e0e4593c..d1b2ee9c 100644
--- a/app/views/examples/horizontals/_form.html.erb
+++ b/app/views/examples/horizontals/_form.html.erb
@@ -8,7 +8,8 @@
     file:          :horizontal_file,
     radio_buttons: :horizontal_collection,
     range:         :horizontal_range,
-    time:          :horizontal_multi_select
+    time:          :horizontal_multi_select,
+    select:        :horizontal_select
   } do |f| %>
 
   <%= f.error_notification %>
@@ -49,7 +50,7 @@
 
   <%= f.input :terms %>
 
-  <div class="form-group row mb-0">
+  <div class="row mb-0">
     <div class="col-sm-9 offset-sm-3">
       <%= f.button :submit, class: "btn-primary" %>
       <%= f.button :button, "Cancel", type: "reset", class: "btn-outline-secondary" %>
diff --git a/app/views/examples/inlines/_bootstrap.html.erb b/app/views/examples/inlines/_bootstrap.html.erb
index 3ef4a4bd..8094ba53 100644
--- a/app/views/examples/inlines/_bootstrap.html.erb
+++ b/app/views/examples/inlines/_bootstrap.html.erb
@@ -1,20 +1,28 @@
-<form class="form-inline needs-validation" novalidate>
-  <label class="sr-only" for="inline-email">Email</label>
-  <input type="text" class="form-control mb-2 mr-sm-2" id="inline-email" placeholder="Enter email" required>
-  <div class="invalid-feedback">Name can't be blank</div>
-  <div class="valid-feedback">Looks good!</div>
-
-  <label class="sr-only" for="inline-password">Password</label>
-  <input type="password" class="form-control mb-2 mr-sm-2" id="inline-password" placeholder="Password" required>
-  <div class="invalid-feedback">Please provide a valid value.</div>
-  <div class="valid-feedback">Looks good!</div>
+<form class="row row-cols-lg-auto g-3 align-items-center needs-validation" novalidate>
+  <div class="col-12">
+    <label class="visually-hidden" for="inline-email">Email</label>
+    <input type="text" class="form-control" id="inline-email" placeholder="Enter email" required>
+    <div class="invalid-feedback">Name can't be blank</div>
+    <div class="valid-feedback">Looks good!</div>
+  </div>
 
-  <div class="form-check mb-2 mr-sm-2">
-    <input class="form-check-input" type="checkbox" id="inline-check" required>
-    <label class="form-check-label" for="inline-check">Terms</label>
-    <div class="invalid-feedback">Terms must be accepted</div>
+  <div class="col-12">
+    <label class="visually-hidden" for="inline-password">Password</label>
+    <input type="password" class="form-control" id="inline-password" placeholder="Password" required>
+    <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
   </div>
 
-  <button type="submit" class="btn btn-primary mb-2 mr-sm-2">Create User!</button>
+  <div class="col-12">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" id="inline-check" required>
+      <label class="form-check-label" for="inline-check">Terms</label>
+      <div class="invalid-feedback">Terms must be accepted</div>
+      <div class="valid-feedback">Looks good!</div>
+    </div>
+  </div>
+
+  <div class="col-12">
+    <button type="submit" class="btn btn-primary">Create User!</button>
+  </div>
 </form>
diff --git a/app/views/examples/inlines/_form.html.erb b/app/views/examples/inlines/_form.html.erb
index 39b8e216..8936ad6d 100644
--- a/app/views/examples/inlines/_form.html.erb
+++ b/app/views/examples/inlines/_form.html.erb
@@ -1,6 +1,6 @@
 <%= simple_form_for @user, url: examples_inline_path,
   wrapper: :inline_form,
-  html: { class: "form-inline" },
+  html: { class: "row row-cols-lg-auto g-3 align-items-center" },
   wrapper_mappings: {
     boolean: :inline_boolean
   } do |f| %>
@@ -9,11 +9,13 @@
     f: f, fields: [:name, :avatar, :bio, :birthday, :color, :fruit, :music, :language, :pill, :choises, :active, :friends, :mood, :awake, :first_kiss]
   } %>
 
-  <%= f.input :email, input_html: { class: "mb-2 mr-sm-2" } %>
+  <%= f.input :email %>
 
-  <%= f.input :password, input_html: { class: "mb-2 mr-sm-2" } %>
+  <%= f.input :password %>
 
   <%= f.input :terms %>
 
-  <%= f.button :submit, class: "btn-primary mb-2" %>
+  <div class="col-12">
+    <%= f.button :submit, class: "btn-primary" %>
+  </div>
 <% end %>
diff --git a/app/views/examples/input_groups/_bootstrap.html.erb b/app/views/examples/input_groups/_bootstrap.html.erb
index 1d4b5837..07eb1137 100644
--- a/app/views/examples/input_groups/_bootstrap.html.erb
+++ b/app/views/examples/input_groups/_bootstrap.html.erb
@@ -1,59 +1,49 @@
 <form class="needs-validation" novalidate>
   <div class="alert alert-danger d-none">Please review the problems below:</div>
 
-  <div class="form-group">
-    <label for="exampleInputName">Name</label>
-    <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="basic-addon1">@</span>
-      </div>
+  <div class="mb-3">
+    <label for="exampleInputName" class="form-label">Name</label>
+    <div class="input-group has-validation">
+      <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" id="exampleInputName" placeholder="Your name" required>
+      <div class="invalid-feedback">Name can't be blank</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Name can't be blank</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Text input example</small>
+    <div class="form-text">Text input example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleInputEmail">Email</label>
-    <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text" id="basic-addon1">example-</span>
-      </div>
+  <div class="mb-3">
+    <label for="exampleInputEmail" class="form-label">Email</label>
+    <div class="input-group has-validation">
+      <span class="input-group-text" id="basic-addon1">example-</span>
       <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
-      <div class="input-group-append">
-        <span class="input-group-text" id="basic-addon1">@gmail.com</span>
-      </div>
+      <span class="input-group-text" id="basic-addon1">@gmail.com</span>
+      <div class="invalid-feedback">Email can't be blank</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Email can't be blank</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+    <div class="form-text">We'll never share your email with anyone else.</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleInputPassword">Password</label>
-    <div class="input-group">
+  <div class="mb-3">
+    <label for="exampleInputPassword" class="form-label">Password</label>
+    <div class="input-group has-validation">
       <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
-      <div class="input-group-append">
-        <span class="input-group-text" id="basic-addon1">🙊</span>
-      </div>
+      <span class="input-group-text" id="basic-addon1">🙊</span>
+      <div class="invalid-feedback">Please provide a valid value.</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Password input example</small>
+    <div class="form-text">Password input example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleTextareaBio">Bio</label>
-    <div class="input-group">
-      <div class="input-group-prepend">
-        <span class="input-group-text">With textarea</span>
-      </div>
+  <div class="mb-3">
+    <label for="exampleTextareaBio" class="form-label">Bio</label>
+    <div class="input-group has-validation">
+      <span class="input-group-text">With textarea</span>
       <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
+      <div class="invalid-feedback">Please provide a valid value.</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Textarea input example</small>
+    <div class="form-text">Textarea input example</div>
   </div>
 
   <button type="submit" class="btn btn-primary">Create User!</button>
diff --git a/app/views/examples/verticals/_bootstrap.html.erb b/app/views/examples/verticals/_bootstrap.html.erb
index 8c3d1b42..e56153f2 100644
--- a/app/views/examples/verticals/_bootstrap.html.erb
+++ b/app/views/examples/verticals/_bootstrap.html.erb
@@ -1,50 +1,50 @@
 <form class="needs-validation" novalidate>
   <div class="alert alert-danger d-none">Please review the problems below:</div>
 
-  <div class="form-group">
-    <label for="exampleInputName">Name</label>
+  <div class="mb-3">
+    <label for="exampleInputName" class="form-label">Name</label>
     <input type="text" class="form-control" id="exampleInputName" placeholder="Your name" required>
     <div class="invalid-feedback">Name can't be blank</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Text input example</small>
+    <div class="form-text">Text input example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleInputEmail">Email</label>
+  <div class="mb-3">
+    <label for="exampleInputEmail" class="form-label">Email</label>
     <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
     <div class="invalid-feedback">Email can't be blank</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+    <div class="form-text">We'll never share your email with anyone else.</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleInputPassword">Password</label>
+  <div class="mb-3">
+    <label for="exampleInputPassword" class="form-label">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Password input example</small>
+    <div class="form-text">Password input example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleCustomFile">Avatar</label>
-    <input type="file" class="form-control-file" id="exampleCustomFile" required>
+  <div class="mb-3">
+    <label for="exampleCustomFile" class="form-label">Avatar</label>
+    <input type="file" class="form-control" id="exampleCustomFile" required>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">File input example</small>
+    <div class="form-text">File input example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleTextareaBio">Bio</label>
+  <div class="mb-3">
+    <label for="exampleTextareaBio" class="form-label">Bio</label>
     <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Textarea input example</small>
+    <div class="form-text">Textarea input example</div>
   </div>
 
-  <div class="form-group">
-    <label>Birthday</label>
+  <div class="mb-3">
+    <label class="form-label">Birthday</label>
     <div class="d-flex flex-row justify-content-between align-items-center">
-      <select id="exampleInputDateYear" class="form-control mr-1" required>
+      <select id="exampleInputDateYear" class="form-select me-1" required>
         <option></option>
         <option value="2013">2013</option>
         <option value="2014">2014</option>
@@ -59,7 +59,7 @@
         <option value="2023">2023</option>
       </select>
 
-      <select id="exampleInputDateMonth" class="form-control mx-1" required>
+      <select id="exampleInputDateMonth" class="form-select mx-1" required>
         <option></option>
         <option value="1">January</option>
         <option value="2">February</option>
@@ -75,7 +75,7 @@
         <option value="12">December</option>
       </select>
 
-      <select id="exampleInputDateDay" class="form-control ml-1" required>
+      <select id="exampleInputDateDay" class="form-select ms-1" required>
         <option></option>
         <option value="1">1</option>
         <option value="2">2</option>
@@ -112,10 +112,10 @@
     </div>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Date multi select example</small>
+    <div class="form-text">Date multi select example</div>
   </div>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <legend class="col-form-label pt-0">Color</legend>
     <div class="form-check form-check-inline">
       <input class="form-check-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio1" value="option1" required>
@@ -151,10 +151,10 @@
     </div>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection as inline radio buttons example</small>
+    <div class="form-text">Collection as inline radio buttons example</div>
   </fieldset>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <legend class="col-form-label pt-0">Fruit</legend>
     <div class="form-check form-check-inline">
       <input class="form-check-input" type="checkbox" id="exampleInlineCheckbox1" value="option1" required>
@@ -196,12 +196,12 @@
       <input class="form-check-input" type="checkbox" id="exampleInlineCheckbox10" value="option10" required>
       <label class="form-check-label" for="exampleInlineCheckbox10">Pineapple</label>
     </div>
-    <small class="form-text text-muted">Collection as inline check boxes example</small>
+    <div class="form-text">Collection as inline check boxes example</div>
   </fieldset>
 
-  <div class="form-group">
-    <label for="exampleSelectMusic">Music</label>
-    <select multiple="" class="form-control" id="exampleSelectMusic" required>
+  <div class="mb-3">
+    <label for="exampleSelectMusic" class="form-label">Music</label>
+    <select multiple="" class="form-select" id="exampleSelectMusic" required>
       <option value="rock">Rock</option>
       <option value="pop">Pop</option>
       <option value="jazz">Jazz</option>
@@ -214,12 +214,12 @@
     </select>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection multiple select example</small>
+    <div class="form-text">Collection multiple select example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleSelectLanguage">Language</label>
-    <select class="form-control" id="exampleSelectLanguage" required>
+  <div class="mb-3">
+    <label for="exampleSelectLanguage" class="form-label">Language</label>
+    <select class="form-select" id="exampleSelectLanguage" required>
       <option value="">Select your Language</option>
       <option value="en">English</option>
       <option value="de">German</option>
@@ -228,10 +228,10 @@
     </select>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection select example</small>
+    <div class="form-text">Collection select example</div>
   </div>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <legend class="col-form-label pt-0">Pill</legend>
     <div class="form-check">
       <input class="form-check-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillRed" value="red" required>
@@ -247,10 +247,10 @@
     </div>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection as radio buttons example</small>
+    <div class="form-text">Collection as radio buttons example</div>
   </fieldset>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <legend class="col-form-label pt-0">Choises</legend>
     <div class="form-check">
       <input class="form-check-input" type="checkbox" id="exampleCheckbox1" value="option1" required>
@@ -270,29 +270,29 @@
     </div>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Collection as check boxes example</small>
+    <div class="form-text">Collection as check boxes example</div>
   </fieldset>
 
-  <div class="form-group">
-    <label for="exampleInputFriends">Friends</label>
+  <div class="mb-3">
+    <label for="exampleInputFriends" class="form-label">Friends</label>
     <input type="number" class="form-control" id="exampleInputFriends" placeholder="Number of Friends" required>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Integer input example</small>
+    <div class="form-text">Integer input example</div>
   </div>
 
-  <div class="form-group">
-    <label for="exampleRangeMood">Mood</label>
-    <input type="range" class="form-control-range" id="exampleRangeMood" required>
+  <div class="mb-3">
+    <label for="exampleRangeMood" class="form-label">Mood</label>
+    <input type="range" class="form-range" id="exampleRangeMood" required>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Integer range example</small>
+    <div class="form-text">Integer range example</div>
   </div>
 
-  <div class="form-group">
-    <label>Awake</label>
+  <div class="mb-3">
+    <label class="form-label">Awake</label>
     <div class="d-flex flex-row justify-content-between align-items-center">
-      <select id="exampleInputTimeHour" class="form-control mr-1" required>
+      <select id="exampleInputTimeHour" class="form-select me-1" required>
         <option></option>
         <option value="00">00</option>
         <option value="01">01</option>
@@ -320,7 +320,7 @@
         <option value="23">23</option>
       </select>
       :
-      <select id="exampleInputTimeMinute" class="form-control ml-1" required>
+      <select id="exampleInputTimeMinute" class="form-select ms-1" required>
         <option></option>
         <option value="00">00</option>
         <option value="30">30</option>
@@ -328,13 +328,13 @@
     </div>
     <div class="invalid-feedback">Please provide a valid value.</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Time multi select example</small>
+    <div class="form-text">Time multi select example</div>
   </div>
 
-  <div class="form-group">
-    <label>First kiss</label>
+  <div class="mb-3">
+    <label class="form-label">First kiss</label>
     <div class="d-flex flex-row justify-content-between align-items-center">
-      <select id="exampleInputDatetimeYear" class="form-control mr-1" required>
+      <select id="exampleInputDatetimeYear" class="form-select me-1" required>
         <option></option>
         <option value="2013">2013</option>
         <option value="2014">2014</option>
@@ -349,7 +349,7 @@
         <option value="2023">2023</option>
       </select>
 
-      <select id="exampleInputDatetimeMonth" class="form-control mx-1" required>
+      <select id="exampleInputDatetimeMonth" class="form-select mx-1" required>
         <option></option>
         <option value="1">January</option>
         <option value="2">February</option>
@@ -365,7 +365,7 @@
         <option value="12">December</option>
       </select>
 
-      <select id="exampleInputDatetimeDay" class="form-control mx-1" required>
+      <select id="exampleInputDatetimeDay" class="form-select mx-1" required>
         <option></option>
         <option value="1">1</option>
         <option value="2">2</option>
@@ -400,7 +400,7 @@
         <option value="31">31</option>
       </select>
       —
-      <select id="exampleInputDatetimeHour" class="form-control mx-1" required>
+      <select id="exampleInputDatetimeHour" class="form-select mx-1" required>
         <option></option>
         <option value="00">00</option>
         <option value="01">01</option>
@@ -428,16 +428,16 @@
         <option value="23">23</option>
       </select>
       :
-      <select id="exampleInputDatetimeMinute" class="form-control ml-1" required>
+      <select id="exampleInputDatetimeMinute" class="form-select me-1" required>
         <option></option>
         <option value="00">00</option>
         <option value="30">30</option>
       </select>
     </div>
-    <small class="form-text text-muted">Datetime multi select example</small>
+    <div class="form-text">Datetime multi select example</div>
   </div>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <legend class="col-form-label pt-0">Active</legend>
     <div class="form-check">
       <input class="form-check-input" type="radio" name="exampleBooleanRadio" id="exampleBooleanRadioYes" value="red" required>
@@ -449,16 +449,16 @@
     </div>
     <div class="invalid-feedback">Terms must be accepted</div>
     <div class="valid-feedback">Looks good!</div>
-    <small class="form-text text-muted">Boolean as radio button example</small>
+    <div class="form-text">Boolean as radio button example</div>
   </fieldset>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <div class="form-check">
       <input class="form-check-input" type="checkbox" value="" id="exampleCheckTerms" required>
       <label class="form-check-label" for="exampleCheckTerms">Terms</label>
       <div class="invalid-feedback">Terms must be accepted</div>
       <div class="valid-feedback">Looks good!</div>
-      <small class="form-text text-muted">Boolean as check box example</small>
+      <div class="form-text">Boolean as check box example</div>
     </div>
   </fieldset>
 
diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb
index ce1493ce..1866dc5a 100644
--- a/app/views/shared/_modal.html.erb
+++ b/app/views/shared/_modal.html.erb
@@ -3,15 +3,13 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title"><%= title %> Source</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body p-0">
         <%= content %>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/config/initializers/simple_form_bootstrap.rb b/config/initializers/simple_form_bootstrap.rb
index d86ace72..9b70b91c 100644
--- a/config/initializers/simple_form_bootstrap.rb
+++ b/config/initializers/simple_form_bootstrap.rb
@@ -49,7 +49,7 @@
   # vertical forms
   #
   # vertical default_wrapper
-  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_form, class: 'mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -57,90 +57,100 @@
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label
+    b.use :label, class: 'form-label'
     b.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :full_error, wrap_with: { class: 'invalid-feedback' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
   # vertical input for boolean
-  config.wrappers :vertical_boolean, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_boolean, tag: 'fieldset', class: 'mb-3' do |b|
     b.use :html5
     b.optional :readonly
-    b.wrapper :form_check_wrapper, tag: 'div', class: 'form-check' do |bb|
+    b.wrapper :form_check_wrapper, class: 'form-check' do |bb|
       bb.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
       bb.use :label, class: 'form-check-label'
-      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+      bb.use :full_error, wrap_with: { class: 'invalid-feedback' }
+      bb.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
   # vertical input for radio buttons and check boxes
-  config.wrappers :vertical_collection, item_wrapper_class: 'form-check', item_label_class: 'form-check-label', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_collection, item_wrapper_class: 'form-check', item_label_class: 'form-check-label', tag: 'fieldset', class: 'mb-3' do |b|
     b.use :html5
     b.optional :readonly
     b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
       ba.use :label_text
     end
     b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :full_error, wrap_with: { class: 'invalid-feedback d-block' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
   # vertical input for inline radio buttons and check boxes
-  config.wrappers :vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', item_label_class: 'form-check-label', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', item_label_class: 'form-check-label', tag: 'fieldset', class: 'mb-3' do |b|
     b.use :html5
     b.optional :readonly
     b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
       ba.use :label_text
     end
     b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :full_error, wrap_with: { class: 'invalid-feedback d-block' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
   # vertical file input
-  config.wrappers :vertical_file, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_file, class: 'mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
     b.optional :readonly
-    b.use :label
-    b.use :input, class: 'form-control-file', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :label, class: 'form-label'
+    b.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.use :full_error, wrap_with: { class: 'invalid-feedback' }
+    b.use :hint, wrap_with: { class: 'form-text' }
+  end
+
+  # vertical select input
+  config.wrappers :vertical_select, class: 'mb-3' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'form-label'
+    b.use :input, class: 'form-select', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.use :full_error, wrap_with: { class: 'invalid-feedback' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
   # vertical multi select
-  config.wrappers :vertical_multi_select, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_multi_select, class: 'mb-3' do |b|
     b.use :html5
     b.optional :readonly
-    b.use :label
-    b.wrapper tag: 'div', class: 'd-flex flex-row justify-content-between align-items-center' do |ba|
-      ba.use :input, class: 'form-control mx-1', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.use :label, class: 'form-label'
+    b.wrapper class: 'd-flex flex-row justify-content-between align-items-center' do |ba|
+      ba.use :input, class: 'form-select mx-1', error_class: 'is-invalid', valid_class: 'is-valid'
     end
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :full_error, wrap_with: { class: 'invalid-feedback d-block' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
   # vertical range input
-  config.wrappers :vertical_range, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :vertical_range, class: 'mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :readonly
     b.optional :step
-    b.use :label
-    b.use :input, class: 'form-control-range', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :label, class: 'form-label'
+    b.use :input, class: 'form-range', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.use :full_error, wrap_with: { class: 'invalid-feedback' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
 
   # horizontal forms
   #
   # horizontal default_wrapper
-  config.wrappers :horizontal_form, tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_form, class: 'row mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -149,94 +159,103 @@
     b.optional :min_max
     b.optional :readonly
     b.use :label, class: 'col-sm-3 col-form-label'
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |ba|
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
       ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
   # horizontal input for boolean
-  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_boolean, class: 'row mb-3' do |b|
     b.use :html5
     b.optional :readonly
-    b.wrapper tag: 'label', class: 'col-sm-3' do |ba|
-      ba.use :label_text
-    end
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |wr|
-      wr.wrapper :form_check_wrapper, tag: 'div', class: 'form-check' do |bb|
+    b.wrapper :grid_wrapper, class: 'col-sm-9 offset-sm-3' do |wr|
+      wr.wrapper :form_check_wrapper, class: 'form-check' do |bb|
         bb.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
         bb.use :label, class: 'form-check-label'
-        bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-        bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+        bb.use :full_error, wrap_with: { class: 'invalid-feedback' }
+        bb.use :hint, wrap_with: { class: 'form-text' }
       end
     end
   end
 
   # horizontal input for radio buttons and check boxes
-  config.wrappers :horizontal_collection, item_wrapper_class: 'form-check', item_label_class: 'form-check-label', tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_collection, item_wrapper_class: 'form-check', item_label_class: 'form-check-label', class: 'row mb-3' do |b|
     b.use :html5
     b.optional :readonly
     b.use :label, class: 'col-sm-3 col-form-label pt-0'
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |ba|
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
       ba.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback d-block' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
   # horizontal input for inline radio buttons and check boxes
-  config.wrappers :horizontal_collection_inline, item_wrapper_class: 'form-check form-check-inline', item_label_class: 'form-check-label', tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_collection_inline, item_wrapper_class: 'form-check form-check-inline', item_label_class: 'form-check-label', class: 'row mb-3' do |b|
     b.use :html5
     b.optional :readonly
     b.use :label, class: 'col-sm-3 col-form-label pt-0'
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |ba|
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
       ba.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback d-block' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
   # horizontal file input
-  config.wrappers :horizontal_file, tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_file, class: 'row mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
     b.optional :readonly
     b.use :label, class: 'col-sm-3 col-form-label'
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |ba|
-      ba.use :input, error_class: 'is-invalid', valid_class: 'is-valid'
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
+      ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
+    end
+  end
+
+  # horizontal select input
+  config.wrappers :horizontal_select, class: 'row mb-3' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'col-sm-3 col-form-label'
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
+      ba.use :input, class: 'form-select', error_class: 'is-invalid', valid_class: 'is-valid'
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
   # horizontal multi select
-  config.wrappers :horizontal_multi_select, tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_multi_select, class: 'row mb-3' do |b|
     b.use :html5
     b.optional :readonly
     b.use :label, class: 'col-sm-3 col-form-label'
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |ba|
-      ba.wrapper tag: 'div', class: 'd-flex flex-row justify-content-between align-items-center' do |bb|
-        bb.use :input, class: 'form-control mx-1', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
+      ba.wrapper class: 'd-flex flex-row justify-content-between align-items-center' do |bb|
+        bb.use :input, class: 'form-select mx-1', error_class: 'is-invalid', valid_class: 'is-valid'
       end
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback d-block' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
   # horizontal range input
-  config.wrappers :horizontal_range, tag: 'div', class: 'form-group row', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :horizontal_range, class: 'row mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :readonly
     b.optional :step
-    b.use :label, class: 'col-sm-3 col-form-label'
-    b.wrapper :grid_wrapper, tag: 'div', class: 'col-sm-9' do |ba|
-      ba.use :input, class: 'form-control-range', error_class: 'is-invalid', valid_class: 'is-valid'
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :label, class: 'col-sm-3 col-form-label pt-0'
+    b.wrapper :grid_wrapper, class: 'col-sm-9' do |ba|
+      ba.use :input, class: 'form-range', error_class: 'is-invalid', valid_class: 'is-valid'
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback' }
+      ba.use :hint, wrap_with: { class: 'form-text' }
     end
   end
 
@@ -244,7 +263,7 @@
   # inline forms
   #
   # inline default_wrapper
-  config.wrappers :inline_form, tag: 'span', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :inline_form, class: 'col-12' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -252,118 +271,29 @@
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label, class: 'sr-only'
+    b.use :label, class: 'visually-hidden'
 
     b.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    b.optional :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :error, wrap_with: { class: 'invalid-feedback' }
+    b.optional :hint, wrap_with: { class: 'form-text' }
   end
 
   # inline input for boolean
-  config.wrappers :inline_boolean, tag: 'span', class: 'form-check mb-2 mr-sm-2', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.optional :readonly
-    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :label, class: 'form-check-label'
-    b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    b.optional :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-  end
-
-
-  # bootstrap custom forms
-  #
-  # custom input for boolean
-  config.wrappers :custom_boolean, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.optional :readonly
-    b.wrapper :form_check_wrapper, tag: 'div', class: 'custom-control custom-checkbox' do |bb|
-      bb.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid'
-      bb.use :label, class: 'custom-control-label'
-      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-    end
-  end
-
-  # custom input switch for boolean
-  config.wrappers :custom_boolean_switch, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.optional :readonly
-    b.wrapper :form_check_wrapper, tag: 'div', class: 'custom-control custom-switch' do |bb|
-      bb.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid'
-      bb.use :label, class: 'custom-control-label'
-      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-    end
-  end
-
-  # custom input for radio buttons and check boxes
-  config.wrappers :custom_collection, item_wrapper_class: 'custom-control', item_label_class: 'custom-control-label', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :inline_boolean, class: 'col-12' do |b|
     b.use :html5
     b.optional :readonly
-    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
-      ba.use :label_text
-    end
-    b.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-  end
-
-  # custom input for inline radio buttons and check boxes
-  config.wrappers :custom_collection_inline, item_wrapper_class: 'custom-control custom-control-inline', item_label_class: 'custom-control-label', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.optional :readonly
-    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
-      ba.use :label_text
-    end
-    b.use :input, class: 'custom-control-input', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-  end
-
-  # custom file input
-  config.wrappers :custom_file, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :maxlength
-    b.optional :minlength
-    b.optional :readonly
-    b.use :label
-    b.wrapper :custom_file_wrapper, tag: 'div', class: 'custom-file' do |ba|
-      ba.use :input, class: 'custom-file-input', error_class: 'is-invalid', valid_class: 'is-valid'
-      ba.use :label, class: 'custom-file-label'
-      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    end
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-  end
-
-  # custom multi select
-  config.wrappers :custom_multi_select, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.optional :readonly
-    b.use :label
-    b.wrapper tag: 'div', class: 'd-flex flex-row justify-content-between align-items-center' do |ba|
-      ba.use :input, class: 'custom-select mx-1', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.wrapper :form_check_wrapper, class: 'form-check' do |bb|
+      bb.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
+      bb.use :label, class: 'form-check-label'
+      bb.use :error, wrap_with: { class: 'invalid-feedback' }
+      bb.optional :hint, wrap_with: { class: 'form-text' }
     end
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
-  end
-
-  # custom range input
-  config.wrappers :custom_range, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :readonly
-    b.optional :step
-    b.use :label
-    b.use :input, class: 'custom-range', error_class: 'is-invalid', valid_class: 'is-valid'
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
   end
 
 
   # Input Group - custom component
   # see example app and config at https://github.com/heartcombo/simple_form-bootstrap
-  config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :input_group, class: 'mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -371,21 +301,21 @@
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label
-    b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
+    b.use :label, class: 'form-label'
+    b.wrapper :input_group_tag, class: 'input-group has-validation' do |ba|
       ba.optional :prepend
       ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
       ba.optional :append
+      ba.use :full_error, wrap_with: { class: 'invalid-feedback' }
     end
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
 
   # Floating Labels form
   #
   # floating labels default_wrapper
-  config.wrappers :floating_labels_form, tag: 'div', class: 'form-label-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :floating_labels_form, class: 'form-floating mb-3' do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -395,18 +325,18 @@
     b.optional :readonly
     b.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
     b.use :label
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :full_error, wrap_with: { class: 'invalid-feedback' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
   # custom multi select
-  config.wrappers :floating_labels_select, tag: 'div', class: 'form-label-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+  config.wrappers :floating_labels_select, class: 'form-floating mb-3' do |b|
     b.use :html5
     b.optional :readonly
-    b.use :input, class: 'custom-select', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.use :input, class: 'form-select', error_class: 'is-invalid', valid_class: 'is-valid'
     b.use :label
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
-    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    b.use :full_error, wrap_with: { class: 'invalid-feedback' }
+    b.use :hint, wrap_with: { class: 'form-text' }
   end
 
 
@@ -423,18 +353,7 @@
     file:          :vertical_file,
     radio_buttons: :vertical_collection,
     range:         :vertical_range,
-    time:          :vertical_multi_select
+    time:          :vertical_multi_select,
+    select:        :vertical_select
   }
-
-  # enable custom form wrappers
-  # config.wrapper_mappings = {
-  #   boolean:       :custom_boolean,
-  #   check_boxes:   :custom_collection,
-  #   date:          :custom_multi_select,
-  #   datetime:      :custom_multi_select,
-  #   file:          :custom_file,
-  #   radio_buttons: :custom_collection,
-  #   range:         :custom_range,
-  #   time:          :custom_multi_select
-  # }
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2f22061d..590a2c57 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -53,10 +53,6 @@ en:
               blacklist: Rock is forbidden.
   examples:
     index:
-      custom:
-        link: Custom Form
-        subtitle: Reference Examples
-        title: Custom Form
       floating_label:
         link: Floating Labels Form
         subtitle: Reference Examples
diff --git a/config/routes.rb b/config/routes.rb
index ad97c4f3..3090b500 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -5,7 +5,6 @@
 
   resources :examples, only: :index
   namespace :examples, path_names: { new: '' } do
-    resource :custom,           only: [:new, :create]
     resource :floating_label,   only: [:new, :create]
     resource :input_group,      only: [:new, :create]
     resource :vertical,         only: [:new, :create]
diff --git a/lib/components/input_group_component.rb b/lib/components/input_group_component.rb
index 2024aa45..0706741b 100644
--- a/lib/components/input_group_component.rb
+++ b/lib/components/input_group_component.rb
@@ -1,13 +1,11 @@
 # custom component requires input group wrapper
 module InputGroup
   def prepend(wrapper_options = nil)
-    span_tag = content_tag(:span, options[:prepend], class: "input-group-text")
-    template.content_tag(:div, span_tag, class: "input-group-prepend")
+    template.content_tag(:span, options[:prepend], class: "input-group-text")
   end
 
   def append(wrapper_options = nil)
-    span_tag = content_tag(:span, options[:append], class: "input-group-text")
-    template.content_tag(:div, span_tag, class: "input-group-append")
+    template.content_tag(:span, options[:append], class: "input-group-text")
   end
 end
 
diff --git a/test/helpers/error_messages_helper_test.rb b/test/helpers/error_messages_helper_test.rb
index 477fd52a..74d75af0 100644
--- a/test/helpers/error_messages_helper_test.rb
+++ b/test/helpers/error_messages_helper_test.rb
@@ -9,7 +9,7 @@ class ErrorMessagesHelperTest < ActionView::TestCase
 
     it "display error messages as html" do
       _(error_messages_for(@model)).must_match '<div class="alert alert-danger alert-form alert-dismissible">'
-      _(error_messages_for(@model)).must_match '<a href="#" class="close" data-dismiss="alert">×</a>'
+      _(error_messages_for(@model)).must_match '<a href="#" class="close" data-bs-dismiss="alert">×</a>'
       _(error_messages_for(@model)).must_match '<h6 class="text-uppercase text-reset my-1">'
       _(error_messages_for(@model)).must_match '<p>There were problems with the'
       _(error_messages_for(@model)).must_match '<li>Name is too short (minimum is 3 characters)</li>'
diff --git a/test/simple_form-bootstrap/custom_fields_test.rb b/test/simple_form-bootstrap/custom_fields_test.rb
deleted file mode 100644
index ac721492..00000000
--- a/test/simple_form-bootstrap/custom_fields_test.rb
+++ /dev/null
@@ -1,193 +0,0 @@
-require 'test_helper'
-
-class CustomFieldsTest < ActionView::TestCase
-  setup do
-    @user    = User.new
-    wrapper_mappings = {
-      boolean:       :custom_boolean,
-      check_boxes:   :custom_collection,
-      date:          :custom_multi_select,
-      datetime:      :custom_multi_select,
-      file:          :custom_file,
-      radio_buttons: :custom_collection,
-      range:         :custom_range,
-      time:          :custom_multi_select
-    }
-    @builder = SimpleForm::FormBuilder.new(:user, @user, self, wrapper: :vertical_form, wrapper_mappings: wrapper_mappings)
-  end
-
-  def test_file_field
-    actual = @builder.input(:avatar, as: :file)
-    expected = <<-HTML
-      <div class="form-group file required user_avatar">
-        <label class="file required" for="user_avatar">Avatar <abbr title="required">*</abbr></label>
-        <div class="custom-file">
-          <input class="custom-file-input file required" id="user_avatar" name="user[avatar]" type="file"/>
-          <label class="custom-file-label file required" for="user_avatar">Avatar <abbr title="required">*</abbr></label>
-        </div>
-        <small class="form-text text-muted">File input example</small>
-      </div>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_collection_as_radio_buttons_inline
-    actual = @builder.input(:color, as: :radio_buttons, collection: [:a, :b], wrapper: :custom_collection_inline)
-    expected = <<-HTML
-      <fieldset class="form-group radio_buttons required user_color">
-        <legend class="col-form-label pt-0">Color <abbr title="required">*</abbr></legend>
-        <input name="user[color]" type="hidden" value=""/>
-        <div class="custom-control custom-control-inline">
-          <input class="custom-control-input radio_buttons required" id="user_color_a" name="user[color]" type="radio" value="a"/>
-          <label class="custom-control-label collection_radio_buttons" for="user_color_a">a</label>
-        </div>
-        <div class="custom-control custom-control-inline">
-          <input class="custom-control-input radio_buttons required" id="user_color_b" name="user[color]" type="radio" value="b"/>
-          <label class="custom-control-label collection_radio_buttons" for="user_color_b">b</label>
-        </div>
-        <small class="form-text text-muted">Collection as inline radio buttons example</small>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_collection_as_radio_buttons
-    actual = @builder.input(:pill, as: :radio_buttons, collection: [:a, :b])
-    expected = <<-HTML
-      <fieldset class="form-group radio_buttons optional user_pill">
-        <legend class="col-form-label pt-0">Pill</legend>
-        <input name="user[pill]" type="hidden" value=""/>
-        <div class="custom-control">
-          <input class="custom-control-input radio_buttons optional" id="user_pill_a" name="user[pill]" type="radio" value="a"/>
-          <label class="custom-control-label collection_radio_buttons" for="user_pill_a">a</label>
-        </div>
-        <div class="custom-control">
-          <input class="custom-control-input radio_buttons optional" id="user_pill_b" name="user[pill]" type="radio" value="b"/>
-          <label class="custom-control-label collection_radio_buttons" for="user_pill_b">b</label>
-        </div>
-        <small class="form-text text-muted">Collection as radio buttons example</small>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_collection_as_radio_buttons_without_label
-    actual = @builder.input(:pill, as: :radio_buttons, collection: [:a, :b], legend_tag: false)
-    expected = <<-HTML
-      <fieldset class="form-group radio_buttons optional user_pill">
-        <input name="user[pill]" type="hidden" value=""/>
-        <div class="custom-control">
-          <input class="custom-control-input radio_buttons optional" id="user_pill_a" name="user[pill]" type="radio" value="a"/>
-          <label class="custom-control-label collection_radio_buttons" for="user_pill_a">a</label>
-        </div>
-        <div class="custom-control">
-          <input class="custom-control-input radio_buttons optional" id="user_pill_b" name="user[pill]" type="radio" value="b"/>
-          <label class="custom-control-label collection_radio_buttons" for="user_pill_b">b</label>
-        </div>
-        <small class="form-text text-muted">Collection as radio buttons example</small>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_collection_as_check_boxes_inline
-    actual = @builder.input(:fruit, as: :check_boxes, collection: [:a, :b], wrapper: :custom_collection_inline)
-    expected = <<-HTML
-      <fieldset class="form-group check_boxes required user_fruit">
-        <legend class="col-form-label pt-0">Fruit <abbr title="required">*</abbr></legend>
-        <input name="user[fruit][]" type="hidden" value=""/>
-        <div class="custom-control custom-control-inline">
-          <input class="custom-control-input check_boxes required" id="user_fruit_a" name="user[fruit][]" type="checkbox" value="a"/>
-          <label class="custom-control-label collection_check_boxes" for="user_fruit_a">a</label>
-        </div>
-        <div class="custom-control custom-control-inline">
-          <input class="custom-control-input check_boxes required" id="user_fruit_b" name="user[fruit][]" type="checkbox" value="b"/>
-          <label class="custom-control-label collection_check_boxes" for="user_fruit_b">b</label>
-        </div>
-        <small class="form-text text-muted">Collection as inline check boxes example</small>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_collection_as_check_boxes
-    actual = @builder.input(:choises, as: :check_boxes, collection: %w(a b))
-    expected = <<-HTML
-      <fieldset class="form-group check_boxes required user_choises">
-        <legend class="col-form-label pt-0">Choises <abbr title="required">*</abbr></legend>
-        <input name="user[choises][]" type="hidden" value=""/>
-        <div class="custom-control">
-          <input class="custom-control-input check_boxes required" id="user_choises_a" name="user[choises][]" type="checkbox" value="a"/>
-          <label class="custom-control-label collection_check_boxes" for="user_choises_a">a</label>
-        </div>
-        <div class="custom-control">
-          <input class="custom-control-input check_boxes required" id="user_choises_b" name="user[choises][]" type="checkbox" value="b"/>
-          <label class="custom-control-label collection_check_boxes" for="user_choises_b">b</label>
-        </div>
-        <small class="form-text text-muted">Collection as check boxes example</small>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_collection_as_check_boxes_without_legend
-    actual = @builder.input(:choises, as: :check_boxes, collection: %w(a b), legend_tag: false)
-    expected = <<-HTML
-      <fieldset class="form-group check_boxes required user_choises">
-        <input name="user[choises][]" type="hidden" value=""/>
-        <div class="custom-control">
-          <input class="custom-control-input check_boxes required" id="user_choises_a" name="user[choises][]" type="checkbox" value="a"/>
-          <label class="custom-control-label collection_check_boxes" for="user_choises_a">a</label>
-        </div>
-        <div class="custom-control">
-          <input class="custom-control-input check_boxes required" id="user_choises_b" name="user[choises][]" type="checkbox" value="b"/>
-          <label class="custom-control-label collection_check_boxes" for="user_choises_b">b</label>
-        </div>
-        <small class="form-text text-muted">Collection as check boxes example</small>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_boolean_as_check_box
-    actual = @builder.input(:terms)
-    expected = <<-HTML
-      <fieldset class="form-group boolean optional user_terms">
-        <div class="custom-control custom-checkbox">
-          <input name="user[terms]" type="hidden" value="0"/>
-          <input class="custom-control-input boolean optional" id="user_terms" name="user[terms]" type="checkbox" value="1"/>
-          <label class="custom-control-label boolean optional" for="user_terms">Terms</label>
-          <small class="form-text text-muted">Boolean as check box example</small>
-        </div>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_boolean_as_switch
-    actual = @builder.input(:terms, wrapper: :custom_boolean_switch)
-    expected = <<-HTML
-      <fieldset class="form-group boolean optional user_terms">
-        <div class="custom-control custom-switch">
-          <input name="user[terms]" type="hidden" value="0"/>
-          <input class="custom-control-input boolean optional" id="user_terms" name="user[terms]" type="checkbox" value="1"/>
-          <label class="custom-control-label boolean optional" for="user_terms">Terms</label>
-          <small class="form-text text-muted">Boolean as check box example</small>
-        </div>
-      </fieldset>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_range_field
-    actual = @builder.input(:mood, as: :range)
-    expected = <<-HTML
-      <div class="form-group range optional user_mood">
-        <label class="range optional" for="user_mood">Mood</label>
-        <input class="custom-range numeric range optional" id="user_mood" name="user[mood]" step="1" type="range"/>
-        <small class="form-text text-muted">Integer range example</small>
-      </div>
-    HTML
-    assert_xml_equal expected, actual
-  end
-end
diff --git a/test/simple_form-bootstrap/date_fields_test.rb b/test/simple_form-bootstrap/date_fields_test.rb
index 3b452bac..29e8218d 100644
--- a/test/simple_form-bootstrap/date_fields_test.rb
+++ b/test/simple_form-bootstrap/date_fields_test.rb
@@ -14,10 +14,10 @@ class DateFieldsTest < ActionView::TestCase
   def test_date
     actual = @builder.input(:birthday)
     expected = <<-HTML
-      <div class="form-group date required user_birthday">
-        <label class="date required" for="user_birthday_1i">Birthday <abbr title="required">*</abbr></label>
+      <div class="mb-3 date required user_birthday">
+        <label class="form-label date required" for="user_birthday_1i">Birthday <abbr title="required">*</abbr></label>
         <div class="d-flex flex-row justify-content-between align-items-center">
-          <select class="form-control mx-1 date required" id="user_birthday_1i" name="user[birthday(1i)]">
+          <select class="form-select mx-1 date required" id="user_birthday_1i" name="user[birthday(1i)]">
             <option value="2010">2010</option>
             <option value="2011">2011</option>
             <option value="2012">2012</option>
@@ -30,7 +30,7 @@ def test_date
             <option value="2019">2019</option>
             <option value="2020">2020</option>
           </select>
-          <select class="form-control mx-1 date required" id="user_birthday_2i" name="user[birthday(2i)]">
+          <select class="form-select mx-1 date required" id="user_birthday_2i" name="user[birthday(2i)]">
             <option value="1">January</option>
             <option value="2">February</option>
             <option value="3">March</option>
@@ -44,7 +44,7 @@ def test_date
             <option value="11">November</option>
             <option value="12">December</option>
           </select>
-          <select class="form-control mx-1 date required" id="user_birthday_3i" name="user[birthday(3i)]">
+          <select class="form-select mx-1 date required" id="user_birthday_3i" name="user[birthday(3i)]">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
@@ -78,7 +78,7 @@ def test_date
             <option value="31">31</option>
           </select>
         </div>
-        <small class="form-text text-muted">Date multi select example</small>
+        <div class="form-text">Date multi select example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -87,13 +87,13 @@ def test_date
   def test_datetime
     actual = @builder.input(:first_kiss, minute_step: 30)
     expected = <<-HTML
-      <div class="form-group datetime required user_first_kiss">
-        <label class="datetime required" for="user_first_kiss_1i">First kiss <abbr title="required">*</abbr></label>
-        <div class="d-flex flex-row justify-content-between align-items-center"><select class="form-control mx-1 datetime required" id="user_first_kiss_1i" name="user[first_kiss(1i)]"><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option selected="selected" value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option></select><select class="form-control mx-1 datetime required" id="user_first_kiss_2i" name="user[first_kiss(2i)]"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option selected="selected" value="10">October</option><option value="11">November</option><option value="12">December</option></select><select class="form-control mx-1 datetime required" id="user_first_kiss_3i" name="user[first_kiss(3i)]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option selected="selected" value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
-        <select class="form-control mx-1 datetime required" id="user_first_kiss_4i" name="user[first_kiss(4i)]"><option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option selected="selected" value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select>
-        : <select class="form-control mx-1 datetime required" id="user_first_kiss_5i" name="user[first_kiss(5i)]"><option value="00">00</option><option value="30">30</option></select>
+      <div class="mb-3 datetime required user_first_kiss">
+        <label class="form-label datetime required" for="user_first_kiss_1i">First kiss <abbr title="required">*</abbr></label>
+        <div class="d-flex flex-row justify-content-between align-items-center"><select class="form-select mx-1 datetime required" id="user_first_kiss_1i" name="user[first_kiss(1i)]"><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option selected="selected" value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option></select><select class="form-select mx-1 datetime required" id="user_first_kiss_2i" name="user[first_kiss(2i)]"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option selected="selected" value="10">October</option><option value="11">November</option><option value="12">December</option></select><select class="form-select mx-1 datetime required" id="user_first_kiss_3i" name="user[first_kiss(3i)]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option selected="selected" value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
+        <select class="form-select mx-1 datetime required" id="user_first_kiss_4i" name="user[first_kiss(4i)]"><option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option selected="selected" value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select>
+        : <select class="form-select mx-1 datetime required" id="user_first_kiss_5i" name="user[first_kiss(5i)]"><option value="00">00</option><option value="30">30</option></select>
         </div>
-        <small class="form-text text-muted">Datetime multi select example</small>
+        <div class="form-text">Datetime multi select example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -102,12 +102,12 @@ def test_datetime
   def test_time
     actual = @builder.input(:awake, minute_step: 30)
     expected = <<-HTML
-      <div class="form-group time required user_awake">
-        <label class="time required" for="user_awake_4i">Awake <abbr title="required">*</abbr></label>
-        <div class="d-flex flex-row justify-content-between align-items-center"><input id="user_awake_1i" name="user[awake(1i)]" type="hidden" value="2015"/><input id="user_awake_2i" name="user[awake(2i)]" type="hidden" value="10"/><input id="user_awake_3i" name="user[awake(3i)]" type="hidden" value="21"/><select class="form-control mx-1 time required" id="user_awake_4i" name="user[awake(4i)]"><option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option selected="selected" value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select>
-        : <select class="form-control mx-1 time required" id="user_awake_5i" name="user[awake(5i)]"><option value="00">00</option><option value="30">30</option></select>
+      <div class="mb-3 time required user_awake">
+        <label class="form-label time required" for="user_awake_4i">Awake <abbr title="required">*</abbr></label>
+        <div class="d-flex flex-row justify-content-between align-items-center"><input id="user_awake_1i" name="user[awake(1i)]" type="hidden" value="2015"/><input id="user_awake_2i" name="user[awake(2i)]" type="hidden" value="10"/><input id="user_awake_3i" name="user[awake(3i)]" type="hidden" value="21"/><select class="form-select mx-1 time required" id="user_awake_4i" name="user[awake(4i)]"><option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option selected="selected" value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select>
+        : <select class="form-select mx-1 time required" id="user_awake_5i" name="user[awake(5i)]"><option value="00">00</option><option value="30">30</option></select>
         </div>
-        <small class="form-text text-muted">Time multi select example</small>
+        <div class="form-text">Time multi select example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
diff --git a/test/simple_form-bootstrap/fields_with_errors_test.rb b/test/simple_form-bootstrap/fields_with_errors_test.rb
index ac9c3a36..126bd5b2 100644
--- a/test/simple_form-bootstrap/fields_with_errors_test.rb
+++ b/test/simple_form-bootstrap/fields_with_errors_test.rb
@@ -18,11 +18,11 @@ class FieldsWithErrorsTest < ActionView::TestCase
   def test_required_email_field_with_error
     actual = @builder.input(:email)
     expected = <<-HTML
-      <div class="form-group email required user_email form-group-invalid">
-        <label class="email required" for="user_email">Email <abbr title="required">*</abbr></label>
+      <div class="mb-3 email required user_email">
+        <label class="form-label email required" for="user_email">Email <abbr title="required">*</abbr></label>
         <input aria-invalid="true" class="form-control is-invalid string email required" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
         <div class="invalid-feedback">Email is invalid</div>
-        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+        <div class="form-text">We'll never share your email with anyone else.</div>
       </div>
     HTML
     assert_xml_equal expected, actual
diff --git a/test/simple_form-bootstrap/floating_labels_test.rb b/test/simple_form-bootstrap/floating_labels_test.rb
index 7db4ec40..05ee4bdf 100644
--- a/test/simple_form-bootstrap/floating_labels_test.rb
+++ b/test/simple_form-bootstrap/floating_labels_test.rb
@@ -12,10 +12,10 @@ class FloatingLabelsFormTest < ActionView::TestCase
   def test_email_field
     actual = @builder.input(:email)
     expected = <<-HTML
-      <div class="form-label-group email required user_email">
+      <div class="form-floating mb-3 email required user_email">
         <input class="form-control string email required" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
         <label class="email required" for="user_email">Email <abbr title="required">*</abbr></label>
-        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+        <div class="form-text">We'll never share your email with anyone else.</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -24,10 +24,10 @@ def test_email_field
   def test_password_field
     actual = @builder.input(:password)
     expected = <<-HTML
-      <div class="form-label-group password optional user_password">
+      <div class="form-floating mb-3 password optional user_password">
         <input class="form-control password optional" id="user_password" name="user[password]" placeholder="Password" type="password"/>
         <label class="password optional" for="user_password">Password</label>
-        <small class="form-text text-muted">Password input example</small>
+        <div class="form-text">Password input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -36,30 +36,14 @@ def test_password_field
   def test_select_field
     actual = @builder.input(:language, collection: %w(a b))
     expected = <<-HTML
-      <div class="form-label-group select optional user_language">
-        <select class="custom-select select optional" id="user_language" name="user[language]">
+      <div class="form-floating mb-3 select optional user_language">
+        <select class="form-select select optional" id="user_language" name="user[language]">
           <option label=" " value=""/>
           <option value="a">a</option>
           <option value="b">b</option>
         </select>
         <label class="select optional" for="user_language">Language</label>
-        <small class="form-text text-muted">Collection select example</small>
-      </div>
-    HTML
-    assert_xml_equal expected, actual
-  end
-
-  def test_select_multi_field
-    actual = @builder.input(:music, collection: %w(a b), input_html: { multiple: true })
-    expected = <<-HTML
-      <div class="form-label-group select required user_music">
-        <input name="user[music][]" type="hidden" value=""/>
-        <select class="custom-select select required" id="user_music" multiple="multiple" name="user[music][]">
-          <option value="a">a</option>
-          <option value="b">b</option>
-        </select>
-        <label class="select required" for="user_music">Music <abbr title="required">*</abbr></label>
-        <small class="form-text text-muted">Collection multiple select example</small>
+        <div class="form-text">Collection select example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -68,10 +52,10 @@ def test_select_multi_field
   def test_textarea_field
     actual = @builder.input(:bio)
     expected = <<-HTML
-      <div class="form-label-group text optional user_bio">
+      <div class="form-floating mb-3 text optional user_bio">
         <textarea class="form-control text optional" id="user_bio" name="user[bio]" placeholder="Tell us your story"></textarea>
         <label class="text optional" for="user_bio">Bio</label>
-        <small class="form-text text-muted">Textarea input example</small>
+        <div class="form-text">Textarea input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
diff --git a/test/simple_form-bootstrap/horizontal_form_test.rb b/test/simple_form-bootstrap/horizontal_form_test.rb
index bc248a44..da07d830 100644
--- a/test/simple_form-bootstrap/horizontal_form_test.rb
+++ b/test/simple_form-bootstrap/horizontal_form_test.rb
@@ -11,7 +11,8 @@ class HorizontalFormTest < ActionView::TestCase
       file:          :horizontal_file,
       radio_buttons: :horizontal_collection,
       range:         :horizontal_range,
-      time:          :horizontal_multi_select
+      time:          :horizontal_multi_select,
+      select:        :horizontal_select
     }
     @builder = SimpleForm::FormBuilder.new(:user, @user, self, wrapper: :horizontal_form, wrapper_mappings: wrapper_mappings)
   end
@@ -19,11 +20,11 @@ class HorizontalFormTest < ActionView::TestCase
   def test_required_email_field
     actual = @builder.input(:email)
     expected = <<-HTML
-      <div class="form-group row email required user_email">
+      <div class="row mb-3 email required user_email">
         <label class="col-sm-3 col-form-label email required" for="user_email">Email <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input class="form-control string email required" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
-          <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+          <div class="form-text">We'll never share your email with anyone else.</div>
         </div>
       </div>
     HTML
@@ -33,7 +34,7 @@ def test_required_email_field
   def test_collection_as_radio_buttons_inline
     actual = @builder.input(:color, as: :radio_buttons, collection: [:a, :b], wrapper: :horizontal_collection_inline)
     expected = <<-HTML
-      <div class="form-group row radio_buttons required user_color">
+      <div class="row mb-3 radio_buttons required user_color">
         <label class="col-sm-3 col-form-label pt-0 radio_buttons required">Color <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input name="user[color]" type="hidden" value=""/>
@@ -45,7 +46,7 @@ def test_collection_as_radio_buttons_inline
             <input class="form-check-input radio_buttons required" id="user_color_b" name="user[color]" type="radio" value="b"/>
             <label class="form-check-label collection_radio_buttons" for="user_color_b">b</label>
           </div>
-          <small class="form-text text-muted">Collection as inline radio buttons example</small>
+          <div class="form-text">Collection as inline radio buttons example</div>
         </div>
       </div>
     HTML
@@ -55,7 +56,7 @@ def test_collection_as_radio_buttons_inline
   def test_collection_as_radio_buttons
     actual = @builder.input(:pill, as: :radio_buttons, collection: [:a, :b])
     expected = <<-HTML
-      <div class="form-group row radio_buttons optional user_pill">
+      <div class="row mb-3 radio_buttons optional user_pill">
         <label class="col-sm-3 col-form-label pt-0 radio_buttons optional">Pill</label>
         <div class="col-sm-9">
           <input name="user[pill]" type="hidden" value=""/>
@@ -67,7 +68,7 @@ def test_collection_as_radio_buttons
             <input class="form-check-input radio_buttons optional" id="user_pill_b" name="user[pill]" type="radio" value="b"/>
             <label class="form-check-label collection_radio_buttons" for="user_pill_b">b</label>
           </div>
-          <small class="form-text text-muted">Collection as radio buttons example</small>
+          <div class="form-text">Collection as radio buttons example</div>
         </div>
       </div>
     HTML
@@ -77,7 +78,7 @@ def test_collection_as_radio_buttons
   def test_collection_as_radio_buttons_without_label
     actual = @builder.input(:pill, as: :radio_buttons, collection: [:a, :b], legend_tag: false)
     expected = <<-HTML
-      <div class="form-group row radio_buttons optional user_pill">
+      <div class="row mb-3 radio_buttons optional user_pill">
         <label class="col-sm-3 col-form-label pt-0 radio_buttons optional">Pill</label>
         <div class="col-sm-9">
           <input name="user[pill]" type="hidden" value=""/>
@@ -89,7 +90,7 @@ def test_collection_as_radio_buttons_without_label
             <input class="form-check-input radio_buttons optional" id="user_pill_b" name="user[pill]" type="radio" value="b"/>
             <label class="form-check-label collection_radio_buttons" for="user_pill_b">b</label>
           </div>
-          <small class="form-text text-muted">Collection as radio buttons example</small>
+          <div class="form-text">Collection as radio buttons example</div>
         </div>
       </div>
     HTML
@@ -99,7 +100,7 @@ def test_collection_as_radio_buttons_without_label
   def test_collection_as_check_boxes_inline
     actual = @builder.input(:fruit, as: :check_boxes, collection: [:a, :b], wrapper: :horizontal_collection_inline)
     expected = <<-HTML
-      <div class="form-group row check_boxes required user_fruit">
+      <div class="row mb-3 check_boxes required user_fruit">
         <label class="col-sm-3 col-form-label pt-0 check_boxes required">Fruit <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input name="user[fruit][]" type="hidden" value=""/>
@@ -111,7 +112,7 @@ def test_collection_as_check_boxes_inline
             <input class="form-check-input check_boxes required" id="user_fruit_b" name="user[fruit][]" type="checkbox" value="b"/>
             <label class="form-check-label collection_check_boxes" for="user_fruit_b">b</label>
           </div>
-          <small class="form-text text-muted">Collection as inline check boxes example</small>
+          <div class="form-text">Collection as inline check boxes example</div>
         </div>
       </div>
     HTML
@@ -121,7 +122,7 @@ def test_collection_as_check_boxes_inline
   def test_collection_as_check_boxes
     actual = @builder.input(:choises, as: :check_boxes, collection: %w(a b))
     expected = <<-HTML
-      <div class="form-group row check_boxes required user_choises">
+      <div class="row mb-3 check_boxes required user_choises">
         <label class="col-sm-3 col-form-label pt-0 check_boxes required">Choises <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input name="user[choises][]" type="hidden" value=""/>
@@ -133,7 +134,7 @@ def test_collection_as_check_boxes
             <input class="form-check-input check_boxes required" id="user_choises_b" name="user[choises][]" type="checkbox" value="b"/>
             <label class="form-check-label collection_check_boxes" for="user_choises_b">b</label>
           </div>
-          <small class="form-text text-muted">Collection as check boxes example</small>
+          <div class="form-text">Collection as check boxes example</div>
         </div>
       </div>
     HTML
@@ -143,7 +144,7 @@ def test_collection_as_check_boxes
   def test_collection_as_check_boxes_without_legend
     actual = @builder.input(:choises, as: :check_boxes, collection: %w(a b), legend_tag: false)
     expected = <<-HTML
-      <div class="form-group row check_boxes required user_choises">
+      <div class="row mb-3 check_boxes required user_choises">
         <label class="col-sm-3 col-form-label pt-0 check_boxes required">Choises <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input name="user[choises][]" type="hidden" value=""/>
@@ -155,7 +156,7 @@ def test_collection_as_check_boxes_without_legend
             <input class="form-check-input check_boxes required" id="user_choises_b" name="user[choises][]" type="checkbox" value="b"/>
             <label class="form-check-label collection_check_boxes" for="user_choises_b">b</label>
           </div>
-          <small class="form-text text-muted">Collection as check boxes example</small>
+          <div class="form-text">Collection as check boxes example</div>
         </div>
       </div>
     HTML
@@ -165,7 +166,7 @@ def test_collection_as_check_boxes_without_legend
   def test_boolean_as_radio_button
     actual = @builder.input(:active, as: :radio_buttons)
     expected = <<-HTML
-      <div class="form-group row radio_buttons required user_active">
+      <div class="row mb-3 radio_buttons required user_active">
         <label class="col-sm-3 col-form-label pt-0 radio_buttons required">Active <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input name="user[active]" type="hidden" value=""/>
@@ -177,7 +178,7 @@ def test_boolean_as_radio_button
             <input class="form-check-input radio_buttons required" id="user_active_false" name="user[active]" readonly="readonly" type="radio" value="false"/>
             <label class="form-check-label collection_radio_buttons" for="user_active_false">No</label>
           </div>
-          <small class="form-text text-muted">Boolean as radio button example</small>
+          <div class="form-text">Boolean as radio button example</div>
         </div>
       </div>
     HTML
@@ -187,14 +188,13 @@ def test_boolean_as_radio_button
   def test_boolean_as_check_box
     actual = @builder.input(:terms)
     expected = <<-HTML
-      <div class="form-group row boolean optional user_terms">
-        <label class="col-sm-3">Terms</label>
-        <div class="col-sm-9">
+      <div class="row mb-3 boolean optional user_terms">
+        <div class="col-sm-9 offset-sm-3">
           <div class="form-check">
             <input name="user[terms]" type="hidden" value="0"/>
             <input class="form-check-input boolean optional" id="user_terms" name="user[terms]" type="checkbox" value="1"/>
             <label class="form-check-label boolean optional" for="user_terms">Terms</label>
-            <small class="form-text text-muted">Boolean as check box example</small>
+            <div class="form-text">Boolean as check box example</div>
           </div>
         </div>
       </div>
@@ -205,11 +205,11 @@ def test_boolean_as_check_box
   def test_file_field
     actual = @builder.input(:avatar, as: :file)
     expected = <<-HTML
-      <div class="form-group row file required user_avatar">
+      <div class="row mb-3 file required user_avatar">
         <label class="col-sm-3 col-form-label file required" for="user_avatar">Avatar <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
-          <input class="file required" id="user_avatar" name="user[avatar]" type="file"/>
-          <small class="form-text text-muted">File input example</small>
+          <input class="form-control file required" id="user_avatar" name="user[avatar]" type="file"/>
+          <div class="form-text">File input example</div>
         </div>
       </div>
     HTML
@@ -219,11 +219,11 @@ def test_file_field
   def test_number_field
     actual = @builder.input(:friends)
     expected = <<-HTML
-      <div class="form-group row integer optional user_friends">
+      <div class="row mb-3 integer optional user_friends">
         <label class="col-sm-3 col-form-label integer optional" for="user_friends">Friends</label>
         <div class="col-sm-9">
           <input class="form-control numeric integer optional" id="user_friends" name="user[friends]" placeholder="Number of Friends" step="1" type="number"/>
-          <small class="form-text text-muted">Integer input example</small>
+          <div class="form-text">Integer input example</div>
         </div>
       </div>
     HTML
@@ -233,11 +233,11 @@ def test_number_field
   def test_password_field
     actual = @builder.input(:password)
     expected = <<-HTML
-      <div class="form-group row password optional user_password">
+      <div class="row mb-3 password optional user_password">
         <label class="col-sm-3 col-form-label password optional" for="user_password">Password</label>
         <div class="col-sm-9">
           <input class="form-control password optional" id="user_password" name="user[password]" placeholder="Password" type="password"/>
-          <small class="form-text text-muted">Password input example</small>
+          <div class="form-text">Password input example</div>
         </div>
       </div>
     HTML
@@ -247,11 +247,11 @@ def test_password_field
   def test_range_field
     actual = @builder.input(:mood, as: :range)
     expected = <<-HTML
-      <div class="form-group row range optional user_mood">
-        <label class="col-sm-3 col-form-label range optional" for="user_mood">Mood</label>
+      <div class="row mb-3 range optional user_mood">
+        <label class="col-sm-3 col-form-label pt-0 range optional" for="user_mood">Mood</label>
         <div class="col-sm-9">
-          <input class="form-control-range numeric range optional" id="user_mood" name="user[mood]" step="1" type="range"/>
-          <small class="form-text text-muted">Integer range example</small>
+          <input class="form-range numeric range optional" id="user_mood" name="user[mood]" step="1" type="range"/>
+          <div class="form-text">Integer range example</div>
         </div>
       </div>
     HTML
@@ -261,15 +261,15 @@ def test_range_field
   def test_select_field
     actual = @builder.input(:language, collection: %w(a b))
     expected = <<-HTML
-      <div class="form-group row select optional user_language">
+      <div class="row mb-3 select optional user_language">
         <label class="col-sm-3 col-form-label select optional" for="user_language">Language</label>
         <div class="col-sm-9">
-          <select class="form-control select optional" id="user_language" name="user[language]">
+          <select class="form-select select optional" id="user_language" name="user[language]">
             <option label=" " value=""/>
             <option value="a">a</option>
             <option value="b">b</option>
           </select>
-          <small class="form-text text-muted">Collection select example</small>
+          <div class="form-text">Collection select example</div>
         </div>
       </div>
     HTML
@@ -279,15 +279,15 @@ def test_select_field
   def test_select_multi_field
     actual = @builder.input(:music, collection: %w(a b), input_html: { multiple: true })
     expected = <<-HTML
-      <div class="form-group row select required user_music">
+      <div class="row mb-3 select required user_music">
         <label class="col-sm-3 col-form-label select required" for="user_music">Music <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input name="user[music][]" type="hidden" value=""/>
-          <select class="form-control select required" id="user_music" multiple="multiple" name="user[music][]">
+          <select class="form-select select required" id="user_music" multiple="multiple" name="user[music][]">
             <option value="a">a</option>
             <option value="b">b</option>
           </select>
-          <small class="form-text text-muted">Collection multiple select example</small>
+          <div class="form-text">Collection multiple select example</div>
         </div>
       </div>
     HTML
@@ -297,11 +297,11 @@ def test_select_multi_field
   def test_text_field
     actual = @builder.input(:name)
     expected = <<-HTML
-      <div class="form-group row string required user_name">
+      <div class="row mb-3 string required user_name">
         <label class="col-sm-3 col-form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
         <div class="col-sm-9">
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
-          <small class="form-text text-muted">Text input example</small>
+          <div class="form-text">Text input example</div>
         </div>
       </div>
     HTML
@@ -311,11 +311,11 @@ def test_text_field
   def test_textarea_field
     actual = @builder.input(:bio)
     expected = <<-HTML
-      <div class="form-group row text optional user_bio">
+      <div class="row mb-3 text optional user_bio">
         <label class="col-sm-3 col-form-label text optional" for="user_bio">Bio</label>
         <div class="col-sm-9">
           <textarea class="form-control text optional" id="user_bio" name="user[bio]" placeholder="Tell us your story"></textarea>
-          <small class="form-text text-muted">Textarea input example</small>
+          <div class="form-text">Textarea input example</div>
         </div>
       </div>
     HTML
diff --git a/test/simple_form-bootstrap/inline_form_test.rb b/test/simple_form-bootstrap/inline_form_test.rb
index 2a52977d..168b14d2 100644
--- a/test/simple_form-bootstrap/inline_form_test.rb
+++ b/test/simple_form-bootstrap/inline_form_test.rb
@@ -10,20 +10,20 @@ class InlineFormTest < ActionView::TestCase
   end
 
   def test_required_email_field
-    actual = @builder.input(:email, input_html: { class: "mb-2 mr-sm-2" })
+    actual = @builder.input(:email)
     expected = <<-HTML
-      <span class="email required user_email">
-        <label class="sr-only email required" for="user_email">Email <abbr title="required">*</abbr></label>
-        <input class="form-control string email required mb-2 mr-sm-2" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
-      </span>
+      <div class="col-12 email required user_email">
+        <label class="visually-hidden email required" for="user_email">Email <abbr title="required">*</abbr></label>
+        <input class="form-control string email required" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
+      </div>
     HTML
     assert_xml_equal expected, actual
   end
 
   def test_input_field
-    actual = @builder.input_field(:email, class: "form-control mb-2 mr-sm-2")
+    actual = @builder.input_field(:email, class: "form-control")
     expected = <<-HTML
-      <input class="string email required form-control mb-2 mr-sm-2" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
+      <input class="string email required form-control" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
     HTML
     assert_xml_equal expected, actual
   end
@@ -31,11 +31,13 @@ def test_input_field
   def test_boolean_as_check_box
     actual = @builder.input(:terms)
     expected = <<-HTML
-      <span class="form-check mb-2 mr-sm-2 boolean optional user_terms">
-        <input name="user[terms]" type="hidden" value="0"/>
-        <input class="form-check-input boolean optional" id="user_terms" name="user[terms]" type="checkbox" value="1"/>
-        <label class="form-check-label boolean optional" for="user_terms">Terms</label>
-      </span>
+      <div class="col-12 boolean optional user_terms">
+        <div class="form-check">
+          <input name="user[terms]" type="hidden" value="0"/>
+          <input class="form-check-input boolean optional" id="user_terms" name="user[terms]" type="checkbox" value="1"/>
+          <label class="form-check-label boolean optional" for="user_terms">Terms</label>
+        </div>
+      </div>
     HTML
     assert_xml_equal expected, actual
   end
diff --git a/test/simple_form-bootstrap/input_group_test.rb b/test/simple_form-bootstrap/input_group_test.rb
index 0c2d9389..9a33bf87 100644
--- a/test/simple_form-bootstrap/input_group_test.rb
+++ b/test/simple_form-bootstrap/input_group_test.rb
@@ -9,15 +9,13 @@ class InputGroupFormTest < ActionView::TestCase
   def test_input_group_prepend
     actual = @builder.input(:name, wrapper: :input_group, prepend: "$")
     expected = <<-HTML
-      <div class="form-group string required user_name">
-        <label class="string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text">$</span>
-          </div>
+      <div class="mb-3 string required user_name">
+        <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
+        <div class="input-group has-validation">
+          <span class="input-group-text">$</span>
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
         </div>
-        <small class="form-text text-muted">Text input example</small>
+        <div class="form-text">Text input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -26,15 +24,13 @@ def test_input_group_prepend
   def test_input_group_append
     actual = @builder.input(:name, wrapper: :input_group, append: ".00")
     expected = <<-HTML
-      <div class="form-group string required user_name">
-        <label class="string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+      <div class="mb-3 string required user_name">
+        <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
+        <div class="input-group has-validation">
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
-          <div class="input-group-append">
-            <span class="input-group-text">.00</span>
-          </div>
+          <span class="input-group-text">.00</span>
         </div>
-        <small class="form-text text-muted">Text input example</small>
+        <div class="form-text">Text input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -43,18 +39,14 @@ def test_input_group_append
   def test_input_group_prepend_and_append
     actual = @builder.input(:name, wrapper: :input_group, prepend: "$", append: ".00")
     expected = <<-HTML
-      <div class="form-group string required user_name">
-        <label class="string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text">$</span>
-          </div>
+      <div class="mb-3 string required user_name">
+        <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
+        <div class="input-group has-validation">
+          <span class="input-group-text">$</span>
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
-          <div class="input-group-append">
-            <span class="input-group-text">.00</span>
-          </div>
+          <span class="input-group-text">.00</span>
         </div>
-        <small class="form-text text-muted">Text input example</small>
+        <div class="form-text">Text input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
diff --git a/test/simple_form-bootstrap/vertical_form_test.rb b/test/simple_form-bootstrap/vertical_form_test.rb
index ac2512c5..712b531b 100644
--- a/test/simple_form-bootstrap/vertical_form_test.rb
+++ b/test/simple_form-bootstrap/vertical_form_test.rb
@@ -9,10 +9,10 @@ class VerticalFormTest < ActionView::TestCase
   def test_required_email_field
     actual = @builder.input(:email)
     expected = <<-HTML
-      <div class="form-group email required user_email">
-        <label class="email required" for="user_email">Email <abbr title="required">*</abbr></label>
+      <div class="mb-3 email required user_email">
+        <label class="form-label email required" for="user_email">Email <abbr title="required">*</abbr></label>
         <input class="form-control string email required" id="user_email" name="user[email]" placeholder="Enter email" type="email"/>
-        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
+        <div class="form-text">We'll never share your email with anyone else.</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -21,7 +21,7 @@ def test_required_email_field
   def test_collection_as_radio_buttons_inline
     actual = @builder.input(:color, as: :radio_buttons, collection: [:a, :b], wrapper: :vertical_collection_inline)
     expected = <<-HTML
-      <fieldset class="form-group radio_buttons required user_color">
+      <fieldset class="mb-3 radio_buttons required user_color">
         <legend class="col-form-label pt-0">Color <abbr title="required">*</abbr></legend>
         <input name="user[color]" type="hidden" value=""/>
         <div class="form-check form-check-inline">
@@ -32,7 +32,7 @@ def test_collection_as_radio_buttons_inline
           <input class="form-check-input radio_buttons required" id="user_color_b" name="user[color]" type="radio" value="b"/>
           <label class="form-check-label collection_radio_buttons" for="user_color_b">b</label>
         </div>
-        <small class="form-text text-muted">Collection as inline radio buttons example</small>
+        <div class="form-text">Collection as inline radio buttons example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -41,7 +41,7 @@ def test_collection_as_radio_buttons_inline
   def test_collection_as_radio_buttons
     actual = @builder.input(:pill, as: :radio_buttons, collection: [:a, :b])
     expected = <<-HTML
-      <fieldset class="form-group radio_buttons optional user_pill">
+      <fieldset class="mb-3 radio_buttons optional user_pill">
         <legend class="col-form-label pt-0">Pill</legend>
         <input name="user[pill]" type="hidden" value=""/>
         <div class="form-check">
@@ -52,7 +52,7 @@ def test_collection_as_radio_buttons
           <input class="form-check-input radio_buttons optional" id="user_pill_b" name="user[pill]" type="radio" value="b"/>
           <label class="form-check-label collection_radio_buttons" for="user_pill_b">b</label>
         </div>
-        <small class="form-text text-muted">Collection as radio buttons example</small>
+        <div class="form-text">Collection as radio buttons example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -61,7 +61,7 @@ def test_collection_as_radio_buttons
   def test_collection_as_radio_buttons_without_label
     actual = @builder.input(:pill, as: :radio_buttons, collection: [:a, :b], legend_tag: false)
     expected = <<-HTML
-      <fieldset class="form-group radio_buttons optional user_pill">
+      <fieldset class="mb-3 radio_buttons optional user_pill">
         <input name="user[pill]" type="hidden" value=""/>
         <div class="form-check">
           <input class="form-check-input radio_buttons optional" id="user_pill_a" name="user[pill]" type="radio" value="a"/>
@@ -71,7 +71,7 @@ def test_collection_as_radio_buttons_without_label
           <input class="form-check-input radio_buttons optional" id="user_pill_b" name="user[pill]" type="radio" value="b"/>
           <label class="form-check-label collection_radio_buttons" for="user_pill_b">b</label>
         </div>
-        <small class="form-text text-muted">Collection as radio buttons example</small>
+        <div class="form-text">Collection as radio buttons example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -80,7 +80,7 @@ def test_collection_as_radio_buttons_without_label
   def test_collection_as_check_boxes_inline
     actual = @builder.input(:fruit, as: :check_boxes, collection: [:a, :b], wrapper: :vertical_collection_inline)
     expected = <<-HTML
-      <fieldset class="form-group check_boxes required user_fruit">
+      <fieldset class="mb-3 check_boxes required user_fruit">
         <legend class="col-form-label pt-0">Fruit <abbr title="required">*</abbr></legend>
         <input name="user[fruit][]" type="hidden" value=""/>
         <div class="form-check form-check-inline">
@@ -91,7 +91,7 @@ def test_collection_as_check_boxes_inline
           <input class="form-check-input check_boxes required" id="user_fruit_b" name="user[fruit][]" type="checkbox" value="b"/>
           <label class="form-check-label collection_check_boxes" for="user_fruit_b">b</label>
         </div>
-        <small class="form-text text-muted">Collection as inline check boxes example</small>
+        <div class="form-text">Collection as inline check boxes example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -100,7 +100,7 @@ def test_collection_as_check_boxes_inline
   def test_collection_as_check_boxes
     actual = @builder.input(:choises, as: :check_boxes, collection: %w(a b))
     expected = <<-HTML
-      <fieldset class="form-group check_boxes required user_choises">
+      <fieldset class="mb-3 check_boxes required user_choises">
         <legend class="col-form-label pt-0">Choises <abbr title="required">*</abbr></legend>
         <input name="user[choises][]" type="hidden" value=""/>
         <div class="form-check">
@@ -111,7 +111,7 @@ def test_collection_as_check_boxes
           <input class="form-check-input check_boxes required" id="user_choises_b" name="user[choises][]" type="checkbox" value="b"/>
           <label class="form-check-label collection_check_boxes" for="user_choises_b">b</label>
         </div>
-        <small class="form-text text-muted">Collection as check boxes example</small>
+        <div class="form-text">Collection as check boxes example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -120,7 +120,7 @@ def test_collection_as_check_boxes
   def test_collection_as_check_boxes_without_legend
     actual = @builder.input(:choises, as: :check_boxes, collection: %w(a b), legend_tag: false)
     expected = <<-HTML
-      <fieldset class="form-group check_boxes required user_choises">
+      <fieldset class="mb-3 check_boxes required user_choises">
         <input name="user[choises][]" type="hidden" value=""/>
         <div class="form-check">
           <input class="form-check-input check_boxes required" id="user_choises_a" name="user[choises][]" type="checkbox" value="a"/>
@@ -130,7 +130,7 @@ def test_collection_as_check_boxes_without_legend
           <input class="form-check-input check_boxes required" id="user_choises_b" name="user[choises][]" type="checkbox" value="b"/>
           <label class="form-check-label collection_check_boxes" for="user_choises_b">b</label>
         </div>
-        <small class="form-text text-muted">Collection as check boxes example</small>
+        <div class="form-text">Collection as check boxes example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -139,7 +139,7 @@ def test_collection_as_check_boxes_without_legend
   def test_boolean_as_radio_button
     actual = @builder.input(:active, as: :radio_buttons)
     expected = <<-HTML
-      <fieldset class="form-group radio_buttons required user_active">
+      <fieldset class="mb-3 radio_buttons required user_active">
         <legend class="col-form-label pt-0">Active <abbr title="required">*</abbr></legend>
         <input name="user[active]" type="hidden" value=""/>
         <div class="form-check">
@@ -150,7 +150,7 @@ def test_boolean_as_radio_button
           <input class="form-check-input radio_buttons required" id="user_active_false" name="user[active]" readonly="readonly" type="radio" value="false"/>
           <label class="form-check-label collection_radio_buttons" for="user_active_false">No</label>
         </div>
-        <small class="form-text text-muted">Boolean as radio button example</small>
+        <div class="form-text">Boolean as radio button example</div>
       </fieldset>
     HTML
     assert_xml_equal expected, actual
@@ -159,12 +159,12 @@ def test_boolean_as_radio_button
   def test_boolean_as_check_box
     actual = @builder.input(:terms)
     expected = <<-HTML
-      <fieldset class="form-group boolean optional user_terms">
+      <fieldset class="mb-3 boolean optional user_terms">
         <div class="form-check">
           <input name="user[terms]" type="hidden" value="0"/>
           <input class="form-check-input boolean optional" id="user_terms" name="user[terms]" type="checkbox" value="1"/>
           <label class="form-check-label boolean optional" for="user_terms">Terms</label>
-          <small class="form-text text-muted">Boolean as check box example</small>
+          <div class="form-text">Boolean as check box example</div>
         </div>
       </fieldset>
     HTML
@@ -174,10 +174,10 @@ def test_boolean_as_check_box
   def test_file_field
     actual = @builder.input(:avatar, as: :file)
     expected = <<-HTML
-      <div class="form-group file required user_avatar">
-        <label class="file required" for="user_avatar">Avatar <abbr title="required">*</abbr></label>
-        <input class="form-control-file file required" id="user_avatar" name="user[avatar]" type="file"/>
-        <small class="form-text text-muted">File input example</small>
+      <div class="mb-3 file required user_avatar">
+        <label class="form-label file required" for="user_avatar">Avatar <abbr title="required">*</abbr></label>
+        <input class="form-control file required" id="user_avatar" name="user[avatar]" type="file"/>
+        <div class="form-text">File input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -186,10 +186,10 @@ def test_file_field
   def test_number_field
     actual = @builder.input(:friends)
     expected = <<-HTML
-      <div class="form-group integer optional user_friends">
-        <label class="integer optional" for="user_friends">Friends</label>
+      <div class="mb-3 integer optional user_friends">
+        <label class="form-label integer optional" for="user_friends">Friends</label>
         <input class="form-control numeric integer optional" id="user_friends" name="user[friends]" placeholder="Number of Friends" step="1" type="number"/>
-        <small class="form-text text-muted">Integer input example</small>
+        <div class="form-text">Integer input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -198,10 +198,10 @@ def test_number_field
   def test_password_field
     actual = @builder.input(:password)
     expected = <<-HTML
-      <div class="form-group password optional user_password">
-        <label class="password optional" for="user_password">Password</label>
+      <div class="mb-3 password optional user_password">
+        <label class="form-label password optional" for="user_password">Password</label>
         <input class="form-control password optional" id="user_password" name="user[password]" placeholder="Password" type="password"/>
-        <small class="form-text text-muted">Password input example</small>
+        <div class="form-text">Password input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -210,10 +210,10 @@ def test_password_field
   def test_range_field
     actual = @builder.input(:mood, as: :range)
     expected = <<-HTML
-      <div class="form-group range optional user_mood">
-        <label class="range optional" for="user_mood">Mood</label>
-        <input class="form-control-range numeric range optional" id="user_mood" name="user[mood]" step="1" type="range"/>
-        <small class="form-text text-muted">Integer range example</small>
+      <div class="mb-3 range optional user_mood">
+        <label class="form-label range optional" for="user_mood">Mood</label>
+        <input class="form-range numeric range optional" id="user_mood" name="user[mood]" step="1" type="range"/>
+        <div class="form-text">Integer range example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -222,14 +222,14 @@ def test_range_field
   def test_select_field
     actual = @builder.input(:language, collection: %w(a b))
     expected = <<-HTML
-      <div class="form-group select optional user_language">
-        <label class="select optional" for="user_language">Language</label>
-        <select class="form-control select optional" id="user_language" name="user[language]">
+      <div class="mb-3 select optional user_language">
+        <label class="form-label select optional" for="user_language">Language</label>
+        <select class="form-select select optional" id="user_language" name="user[language]">
           <option label=" " value=""/>
           <option value="a">a</option>
           <option value="b">b</option>
         </select>
-        <small class="form-text text-muted">Collection select example</small>
+        <div class="form-text">Collection select example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -238,14 +238,14 @@ def test_select_field
   def test_select_multi_field
     actual = @builder.input(:music, collection: %w(a b), input_html: { multiple: true })
     expected = <<-HTML
-      <div class="form-group select required user_music">
-        <label class="select required" for="user_music">Music <abbr title="required">*</abbr></label>
+      <div class="mb-3 select required user_music">
+        <label class="form-label select required" for="user_music">Music <abbr title="required">*</abbr></label>
         <input name="user[music][]" type="hidden" value=""/>
-        <select class="form-control select required" id="user_music" multiple="multiple" name="user[music][]">
+        <select class="form-select select required" id="user_music" multiple="multiple" name="user[music][]">
           <option value="a">a</option>
           <option value="b">b</option>
         </select>
-        <small class="form-text text-muted">Collection multiple select example</small>
+        <div class="form-text">Collection multiple select example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -254,10 +254,10 @@ def test_select_multi_field
   def test_text_field
     actual = @builder.input(:name)
     expected = <<-HTML
-      <div class="form-group string required user_name">
-        <label class="string required" for="user_name">Name <abbr title="required">*</abbr></label>
+      <div class="mb-3 string required user_name">
+        <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
         <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
-        <small class="form-text text-muted">Text input example</small>
+        <div class="form-text">Text input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual
@@ -266,10 +266,10 @@ def test_text_field
   def test_textarea_field
     actual = @builder.input(:bio)
     expected = <<-HTML
-      <div class="form-group text optional user_bio">
-        <label class="text optional" for="user_bio">Bio</label>
+      <div class="mb-3 text optional user_bio">
+        <label class="form-label text optional" for="user_bio">Bio</label>
         <textarea class="form-control text optional" id="user_bio" name="user[bio]" placeholder="Tell us your story"></textarea>
-        <small class="form-text text-muted">Textarea input example</small>
+        <div class="form-text">Textarea input example</div>
       </div>
     HTML
     assert_xml_equal expected, actual