diff --git a/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx
index 125e27a982..56d7ecbdef 100644
--- a/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -30,7 +30,10 @@ export default function BaseInputTemplate<
   children,
   extraProps,
 }: WidgetProps<T, S, F>) {
-  const inputProps = { ...extraProps, ...getInputProps(schema, type, options) };
+  const inputProps = {
+    ...extraProps,
+    ...getInputProps<T, S, F>(schema, type, options),
+  };
   const _onChange = ({
     target: { value },
   }: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx b/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx
index 6cf006906f..74fec64cce 100644
--- a/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx
+++ b/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx
@@ -28,7 +28,7 @@ export default function CheckboxWidget<
   // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
-  const required = schemaRequiresTrueValue(schema);
+  const required = schemaRequiresTrueValue<S>(schema);
 
   const _onChange = ({
     target: { checked },
diff --git a/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx b/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx
index 6b48e2ac31..0bd033e3cb 100644
--- a/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx
+++ b/packages/bootstrap-4/src/SelectWidget/SelectWidget.tsx
@@ -64,19 +64,19 @@ export default function SelectWidget<
         onBlur &&
         ((event: React.FocusEvent) => {
           const newValue = getValue(event, multiple);
-          onBlur(id, processSelectValue(schema, newValue, options));
+          onBlur(id, processSelectValue<T, S, F>(schema, newValue, options));
         })
       }
       onFocus={
         onFocus &&
         ((event: React.FocusEvent) => {
           const newValue = getValue(event, multiple);
-          onFocus(id, processSelectValue(schema, newValue, options));
+          onFocus(id, processSelectValue<T, S, F>(schema, newValue, options));
         })
       }
       onChange={(event: React.ChangeEvent) => {
         const newValue = getValue(event, multiple);
-        onChange(processSelectValue(schema, newValue, options));
+        onChange(processSelectValue<T, S, F>(schema, newValue, options));
       }}
     >
       {!multiple && schema.default === undefined && (
diff --git a/packages/bootstrap-4/src/TitleField/TitleField.tsx b/packages/bootstrap-4/src/TitleField/TitleField.tsx
index 6c67933adb..fdbbd742e6 100644
--- a/packages/bootstrap-4/src/TitleField/TitleField.tsx
+++ b/packages/bootstrap-4/src/TitleField/TitleField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {
   FormContextType,
+  getUiOptions,
   RJSFSchema,
   StrictRJSFSchema,
   TitleFieldProps,
@@ -11,12 +12,11 @@ export default function TitleField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >({ id, title, uiSchema }: TitleFieldProps<T, S, F>) {
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
   return (
-    <>
-      <div id={id} className="my-1">
-        <h5>{(uiSchema && uiSchema["ui:title"]) || title}</h5>
-        <hr className="border-0 bg-secondary" style={{ height: "1px" }} />
-      </div>
-    </>
+    <div id={id} className="my-1">
+      <h5>{uiOptions.title || title}</h5>
+      <hr className="border-0 bg-secondary" style={{ height: "1px" }} />
+    </div>
   );
 }