diff --git a/grails-app/assets/components/javascript/multi-input.js b/grails-app/assets/components/javascript/multi-input.js
index 88355db0..fabade86 100644
--- a/grails-app/assets/components/javascript/multi-input.js
+++ b/grails-app/assets/components/javascript/multi-input.js
@@ -3,6 +3,7 @@ ko.components.register('multi-input', {
         var self = this;
 
         self.observableValues = ko.observableArray();
+        self.addValueText = params.addValueText;
 
         // This method updates the values parameter with the contents of the managed array.
         function syncValues() {
diff --git a/grails-app/assets/components/template/multi-input.html b/grails-app/assets/components/template/multi-input.html
index 72f60e5f..f509921e 100644
--- a/grails-app/assets/components/template/multi-input.html
+++ b/grails-app/assets/components/template/multi-input.html
@@ -1,8 +1,11 @@
 <div data-bind="foreach: observableValues">
-    <div class="input-append">
-        <span data-bind="template:{nodes:$componentTemplateNodes}"></span><span class="add-on"
-                                                                                data-bind="click:$parent.removeValue"><i
-            class="fa fa-remove"></i></span>
+    <div class="input-group mb-1">
+        <!-- ko template: { nodes: $componentTemplateNodes } -->
+        <!-- /ko -->
+        <div class="input-group-append">
+            <span class="input-group-text" data-bind="click:$parent.removeValue"><i class="fa fa-remove"></i></span>
+        </div>
+
     </div>
 </div>
-<i class="fa fa-plus" data-bind="click:addValue"></i>
\ No newline at end of file
+<span><i class="fa fa-plus" data-bind="click:addValue"></i> <span data-bind="text:addValueText || 'Click to add'"></span></span>
\ No newline at end of file