Update all tests.

44 files changed, 125 insertions, 91 deletions

diff --git a/kvision-modules/kvision-bootstrap-css/build.gradle b/kvision-modules/kvision-bootstrap-css/build.gradle
index 0d47049b..1aca3288 100644
--- a/kvision-modules/kvision-bootstrap-css/build.gradle
+++ b/kvision-modules/kvision-bootstrap-css/build.gradle
@@ -1,5 +1,9 @@
 apply from: "../shared.gradle"
 
-dependencies {
-    compile project(":kvision-modules:kvision-bootstrap")
+kotlinFrontend {
+
+    npm {
+        dependency("bootstrap", "4.3.1")
+    }
+
 }
diff --git a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
index e0da98f8..626346b1 100644
--- a/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
+++ b/kvision-modules/kvision-bootstrap-datetime/src/main/kotlin/pl/treksoft/kvision/form/time/DateTimeInput.kt
@@ -241,7 +241,8 @@ open class DateTimeInput(
 
     override fun afterDestroy() {
         if (initialized) {
-            getElementJQueryD()?.data("DateTimePicker").destroy()
+            val comp = getElementJQueryD()?.data("DateTimePicker")
+            if (comp != null) comp.destroy()
             initialized = false
         }
     }
diff --git a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt
index 877cf650..5cdb68c9 100644
--- a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt
+++ b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeInputSpec.kt
@@ -25,6 +25,7 @@ import pl.treksoft.kvision.form.time.DateTimeInput
 import pl.treksoft.kvision.panel.Root
 import pl.treksoft.kvision.types.toStringF
 import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
 import kotlin.js.Date
 import kotlin.test.Test
 import kotlin.test.assertEquals
@@ -41,10 +42,11 @@ class DateTimeInputSpec : DomSpec {
                 id = "idti"
             }
             root.add(dti)
-            val value = dti.getElementJQuery()?.`val`()
+            val element = document.getElementById("test")
+            val datastr = data.toStringF(dti.format)
             assertEquals(
-                data.toStringF(dti.format),
-                value,
+                "<div class=\"input-group date\" id=\"idti\"><input class=\"form-control\" placeholder=\"place\" type=\"text\" value=\"$datastr\"><div class=\"input-group-append\"><span class=\"input-group-text datepickerbutton\"><span class=\"fas fa-calendar-alt\"></span></span></div></div>",
+                element?.innerHTML,
                 "Should render date time input with correctly formatted value"
             )
         }
diff --git a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt
index eba3ef74..a6714f0c 100644
--- a/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt
+++ b/kvision-modules/kvision-bootstrap-datetime/src/test/kotlin/test/pl/treksoft/kvision/form/time/DateTimeSpec.kt
@@ -46,13 +46,13 @@ class DateTimeSpec : DomSpec {
             val id = ti.input.id
             val datastr = data.toStringF(ti.format)
             assertEqualsHtml(
-                "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control\" id=\"$id\" type=\"text\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" value=\"$datastr\"></div>",
+                "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group date\" id=\"$id\"><input class=\"form-control\" placeholder=\"place\" name=\"name\" disabled=\"\" type=\"text\" value=\"$datastr\"><div class=\"input-group-append\"><span class=\"input-group-text datepickerbutton\"><span class=\"fas fa-calendar-alt\"></span></span></div></div></div>",
                 element?.innerHTML,
                 "Should render correct date time input form control"
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control\" id=\"$id\" type=\"text\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" value=\"$datastr\"><span class=\"help-block small\">Validation Error</span></div>",
+                "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group date is-invalid\" id=\"$id\"><input class=\"form-control is-invalid\" placeholder=\"place\" name=\"name\" disabled=\"\" type=\"text\" value=\"$datastr\"><div class=\"input-group-append\"><span class=\"input-group-text datepickerbutton\"><span class=\"fas fa-calendar-alt\"></span></span></div></div><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct date time input form control with validation error"
             )
diff --git a/kvision-modules/kvision-bootstrap-dialog/webpack.config.d/css.js b/kvision-modules/kvision-bootstrap-dialog/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-dialog/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-bootstrap-select-remote/webpack.config.d/css.js b/kvision-modules/kvision-bootstrap-select-remote/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-select-remote/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt
index bfd93900..0e759896 100644
--- a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt
+++ b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt
@@ -44,7 +44,7 @@ class SelectInputSpec : DomSpec {
             root.add(selectInput)
             val element = document.getElementById("test")
             assertTrue(
-                true == element?.innerHTML?.endsWith("<select class=\"selectpicker\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select></div>"),
+                true == element?.innerHTML?.startsWith("<div class=\"dropdown bootstrap-select show-tick fit-width\"><select class=\"selectpicker\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select>"),
                 "Should render correct select input"
             )
         }
diff --git a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt
index 33c36576..d711301a 100644
--- a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt
+++ b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt
@@ -41,9 +41,9 @@ class SelectOptionSpec : DomSpec {
                 element?.innerHTML,
                 "Should render correct select option"
             )
-            selectOption.icon = "fa-flag"
+            selectOption.icon = "fas fa-flag"
             assertEqualsHtml(
-                "<option value=\"testValue\" data-icon=\"fa fa-flag\">testLabel</option>",
+                "<option value=\"testValue\" data-icon=\"fas fa-flag\">testLabel</option>",
                 element?.innerHTML,
                 "Should render correct select option with icon"
             )
diff --git a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt
index 9eddff81..9ed44f82 100644
--- a/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt
+++ b/kvision-modules/kvision-bootstrap-select/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt
@@ -45,11 +45,7 @@ class SelectSpec : DomSpec {
             val element = document.getElementById("test")
             val id = select.input.id
             assertTrue(
-                true == element?.innerHTML?.startsWith("<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label>"),
-                "Should render correct select form control"
-            )
-            assertTrue(
-                true == element?.innerHTML?.endsWith("<select class=\"form-control selectpicker\" id=\"$id\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select></div></div>"),
+                true == element?.innerHTML?.startsWith("<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"dropdown bootstrap-select show-tick form-control fit-width\"><select class=\"form-control selectpicker\" id=\"$id\" multiple=\"multiple\" data-live-search=\"true\" title=\"Choose ...\" data-style=\"btn-default\" data-width=\"fit\" tabindex=\"-98\"><option value=\"#kvnull\"></option><option value=\"test1\">Test 1</option><option value=\"test2\">Test 2</option></select>"),
                 "Should render correct select form control"
             )
         }
diff --git a/kvision-modules/kvision-bootstrap-select/webpack.config.d/jquery.js b/kvision-modules/kvision-bootstrap-select/webpack.config.d/jquery.js
new file mode 100644
index 00000000..bf5a1a20
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-select/webpack.config.d/jquery.js
@@ -0,0 +1,5 @@
+config.plugins.push(new webpack.ProvidePlugin({
+    $: "jquery",
+    jQuery: "jquery",
+    "window.jQuery": "jquery"
+}));
diff --git a/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt b/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt
index ead19d86..bb090b61 100644
--- a/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt
+++ b/kvision-modules/kvision-bootstrap-spinner/src/test/kotlin/test/pl/treksoft/kvision/form/spinner/SpinnerSpec.kt
@@ -43,13 +43,13 @@ class SpinnerSpec : DomSpec {
             val element = document.getElementById("test")
             val id = ti.input.id
             assertEqualsHtml(
-                "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner-btn-vertical\"><span><div class=\"input-group  bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-default bootstrap-touchspin-up \" type=\"button\"><i class=\"fa fa-caret-up\"></i></button><button class=\"btn btn-default bootstrap-touchspin-down \" type=\"button\"><i class=\"fa fa-caret-down\"></i></button></span></div></span></div></div>",
+                "<div class=\"form-group\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner kv-spinner-btn-vertical\"><span><div class=\"input-group  bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-secondary bootstrap-touchspin-up \" type=\"button\"><i class=\"fas fa-caret-up\"></i></button><button class=\"btn btn-secondary bootstrap-touchspin-down \" type=\"button\"><i class=\"fas fa-caret-down\"></i></button></span></div></span></div></div>",
                 element?.innerHTML,
                 "Should render correct spinner input form control"
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner-btn-vertical\"><span><div class=\"input-group  bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-default bootstrap-touchspin-up \" type=\"button\"><i class=\"fa fa-caret-up\"></i></button><button class=\"btn btn-default bootstrap-touchspin-down \" type=\"button\"><i class=\"fa fa-caret-down\"></i></button></span></div></span></div><span class=\"help-block small\">Validation Error</span></div>",
+                "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"input-group kv-spinner kv-spinner-btn-vertical is-invalid\"><span><div class=\"input-group  bootstrap-touchspin bootstrap-touchspin-injected\"><input class=\"form-control is-invalid\" id=\"$id\" type=\"text\" value=\"13\" placeholder=\"place\" name=\"name\" disabled=\"disabled\"><span class=\"input-group-btn-vertical\"><button class=\"btn btn-secondary bootstrap-touchspin-up \" type=\"button\"><i class=\"fas fa-caret-up\"></i></button><button class=\"btn btn-secondary bootstrap-touchspin-down \" type=\"button\"><i class=\"fas fa-caret-down\"></i></button></span></div></span></div><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct spinner input form control with validation error"
             )
diff --git a/kvision-modules/kvision-bootstrap-upload/webpack.config.d/jquery.js b/kvision-modules/kvision-bootstrap-upload/webpack.config.d/jquery.js
new file mode 100644
index 00000000..bf5a1a20
--- /dev/null
+++ b/kvision-modules/kvision-bootstrap-upload/webpack.config.d/jquery.js
@@ -0,0 +1,5 @@
+config.plugins.push(new webpack.ProvidePlugin({
+    $: "jquery",
+    jQuery: "jquery",
+    "window.jQuery": "jquery"
+}));
diff --git a/kvision-modules/kvision-bootstrap/build.gradle b/kvision-modules/kvision-bootstrap/build.gradle
index 34aa8bb0..fe519014 100644
--- a/kvision-modules/kvision-bootstrap/build.gradle
+++ b/kvision-modules/kvision-bootstrap/build.gradle
@@ -3,6 +3,7 @@ apply from: "../shared.gradle"
 kotlinFrontend {
 
     npm {
+        dependency("popper.js", "1.15.0")
         dependency("bootstrap", "4.3.1")
         dependency("awesome-bootstrap-checkbox", "1.0.1")
         dependency("element-resize-event", "3.0.3")
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
index 1ad97acc..fc3d5242 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
@@ -70,8 +70,8 @@ interface DomSpec : TestSpec {
 
     fun assertEqualsHtml(expected: String?, actual: String?, message: String?) {
         if (expected != null && actual != null) {
-            val exp = jQuery(expected)
-            val act = jQuery(actual)
+            val exp = jQuery(expected.replace("position: ;","position: absolute;"))
+            val act = jQuery(actual.replace("position: ;","position: absolute;"))
             val result = exp[0]?.isEqualNode(act[0])
             if (result == true) {
                 assertTrue(result == true, message)
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt
index 35172267..b467f1ff 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/ContextMenuSpec.kt
@@ -22,6 +22,7 @@
 package test.pl.treksoft.kvision.dropdown
 
 import pl.treksoft.kvision.dropdown.ContextMenu
+import pl.treksoft.kvision.dropdown.ContextMenu.Companion.setContextMenu
 import pl.treksoft.kvision.html.Link.Companion.link
 import pl.treksoft.kvision.panel.Root
 import pl.treksoft.kvision.utils.obj
@@ -43,7 +44,7 @@ class ContextMenuSpec : DomSpec {
             m.show()
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<ul class=\"dropdown-menu\" style=\"display: block;\"><li><a href=\"b\">a</a></li><li><a href=\"d\">c</a></li></ul>",
+                "<div class=\"dropdown-menu\" style=\"display: block;\"><a href=\"b\">a</a><a href=\"d\">c</a></div>",
                 element?.innerHTML,
                 "Should render correct context menu"
             )
@@ -66,7 +67,7 @@ class ContextMenuSpec : DomSpec {
             })
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<ul class=\"dropdown-menu\" style=\"display: block; top: 50px; left: 40px;\"><li><a href=\"b\">a</a></li><li><a href=\"d\">c</a></li></ul>",
+                "<div class=\"dropdown-menu\" style=\"display: block; top: 50px; left: 40px;\"><a href=\"b\">a</a><a href=\"d\">c</a></div>",
                 element?.innerHTML,
                 "Should place context menu in the correct position"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt
index af35fa51..f75331f3 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/DropDownSpec.kt
@@ -22,6 +22,7 @@
 package test.pl.treksoft.kvision.dropdown
 
 import pl.treksoft.kvision.dropdown.DD
+import pl.treksoft.kvision.dropdown.Direction
 import pl.treksoft.kvision.dropdown.DropDown
 import pl.treksoft.kvision.panel.Root
 import test.pl.treksoft.kvision.DomSpec
@@ -37,11 +38,11 @@ class DropDownSpec : DomSpec {
             val root = Root("test", fixed = true)
             val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag")
             root.add(dd)
-            dd.toggle()
+            dd.list.getElementJQueryD()?.dropdown("toggle")
             val element = document.getElementById("test")
             val id = dd.buttonId()
             assertEqualsHtml(
-                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>",
+                "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><a class=\"dropdown-item\" href=\"#!/x\">abc</a><a class=\"dropdown-item\" href=\"#!/y\">def</a></div></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -52,13 +53,13 @@ class DropDownSpec : DomSpec {
     fun renderDropUp() {
         run {
             val root = Root("test", fixed = true)
-            val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag").apply { dropup = true }
+            val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag").apply { direction = Direction.DROPUP }
             root.add(dd)
-            dd.toggle()
+            dd.list.getElementJQueryD()?.dropdown("toggle")
             val element = document.getElementById("test")
             val id = dd.buttonId()
             assertEqualsHtml(
-                "<div class=\"dropup open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li><a href=\"#!/x\">abc</a></li><li><a href=\"#!/y\">def</a></li></ul></div>",
+                "<div class=\"dropup show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"top-start\" aria-expanded=\"true\" style=\"position: ;\"><a class=\"dropdown-item\" href=\"#!/x\">abc</a><a class=\"dropdown-item\" href=\"#!/y\">def</a></div></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -71,11 +72,11 @@ class DropDownSpec : DomSpec {
             val root = Root("test", fixed = true)
             val dd = DropDown("Dropdown", listOf("abc" to DD.HEADER.option), "flag")
             root.add(dd)
-            dd.toggle()
+            dd.list.getElementJQueryD()?.dropdown("toggle")
             val element = document.getElementById("test")
             val id = dd.buttonId()
             assertEqualsHtml(
-                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"dropdown-header\">abc</li></ul></div>",
+                "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><h6 class=\"dropdown-header\">abc</h6></div></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -88,11 +89,11 @@ class DropDownSpec : DomSpec {
             val root = Root("test", fixed = true)
             val dd = DropDown("Dropdown", listOf("abc" to DD.SEPARATOR.option), "flag")
             root.add(dd)
-            dd.toggle()
+            dd.list.getElementJQueryD()?.dropdown("toggle")
             val element = document.getElementById("test")
             val id = dd.buttonId()
             assertEqualsHtml(
-                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"divider\" role=\"separator\"></li></ul></div>",
+                "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><div class=\"dropdown-divider\"></div></div></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -105,11 +106,11 @@ class DropDownSpec : DomSpec {
             val root = Root("test", fixed = true)
             val dd = DropDown("Dropdown", listOf("abc" to DD.DISABLED.option), "flag")
             root.add(dd)
-            dd.toggle()
+            dd.list.getElementJQueryD()?.dropdown("toggle")
             val element = document.getElementById("test")
             val id = dd.buttonId()
             assertEqualsHtml(
-                "<div class=\"dropdown open\"><button class=\"dropdown btn btn-default\" id=\"$id\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" role=\"button\" href=\"#\"><span class=\"glyphicon glyphicon-flag\"></span> Dropdown</button><ul class=\"dropdown-menu\" aria-labelledby=\"$id\" aria-expanded=\"true\"><li class=\"disabled\"><a>abc</a></li></ul></div>",
+                "<div class=\"dropdown show\"><button class=\"btn btn-primary dropdown-toggle\" id=\"$id\" role=\"button\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#\"><i class=\"flag\"></i> Dropdown</button><div class=\"dropdown-menu show\" aria-labelledby=\"$id\" x-placement=\"bottom-start\" aria-expanded=\"true\" style=\"position: ;\"><a class=\"dropdown-item disabled\" tabindex=\"-1\" aria-disabled=\"true\" href=\"javascript:void(0)\">abc</a></div></div>",
                 element?.innerHTML,
                 "Should render correct drop down"
             )
@@ -122,10 +123,10 @@ class DropDownSpec : DomSpec {
             val root = Root("test", fixed = true)
             val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag")
             root.add(dd)
-            val visible = dd.getElementJQuery()?.hasClass("open") ?: false
+            val visible = dd.getElementJQuery()?.hasClass("show") ?: false
             assertTrue("Dropdown menu is not visible before toggle") { !visible }
-            dd.toggle()
-            val visible2 = dd.getElementJQuery()?.hasClass("open") ?: false
+            dd.list.getElementJQueryD()?.dropdown("toggle")
+            val visible2 = dd.getElementJQuery()?.hasClass("show") ?: false
             assertTrue("Dropdown menu is visible after toggle") { visible2 }
         }
     }
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt
index e75baf9e..25ca7a7d 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/HeaderSpec.kt
@@ -37,7 +37,7 @@ class HeaderSpec : DomSpec {
             root.add(h)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<li class=\"dropdown-header\">Test</li>",
+                "<h6 class=\"dropdown-header\">Test</h6>",
                 element?.innerHTML,
                 "Should render correct drop down header"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt
index 86607ec7..36c22a74 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/dropdown/SeparatorSpec.kt
@@ -37,7 +37,7 @@ class SeparatorSpec : DomSpec {
             root.add(s)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<li class=\"divider\" role=\"separator\"></li>",
+                "<div class=\"dropdown-divider\"></div>",
                 element?.innerHTML,
                 "Should render correct drop down separator"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt
index c3d17de9..48a8b5a0 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/modal/AlertSpec.kt
@@ -37,22 +37,22 @@ class AlertSpec : DomSpec {
     fun render() {
         run {
             Root("test", fixed = true)
-            Alert.show("Alert caption", "Alert content")
-            val alert = document.getElementById("test")?.let { jQuery(it).find(".modal")[0] }
+            Alert.show("Alert caption", "Alert content", animation = false)
+            val alert = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal")[0] }
             assertNotNull(alert, "Should show alert window")
-            val title = document.getElementById("test")?.let { jQuery(it).find(".modal-title").html() }
+            val title = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-title").html() }
             assertEquals("Alert caption", title, "Should render alert window with correct caption")
-            val body = document.getElementById("test")?.let { jQuery(it).find(".modal-body").html() }
+            val body = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-body").html() }
             assertEquals("<div>Alert content</div>", body, "Should render alert window with correct content")
-            val footer = document.getElementById("test")?.let { jQuery(it).find(".modal-footer").html() }
+            val footer = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-footer").html() }
             assertEqualsHtml(
-                "<button class=\"btn btn-primary\" type=\"button\"><span class=\"glyphicon glyphicon-ok\"></span> OK</button>",
+                "<button class=\"btn btn-primary\" type=\"button\"><i class=\"fas fa-check\"></i> OK</button>",
                 footer,
                 "Should render alert window with correct footer"
             )
-            val button = document.getElementById("test")?.let { jQuery(it).find(".modal-footer").find("button") }
+            val button = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal-footer").find("button") }
             button?.click()
-            val alert2 = document.getElementById("test")?.let { jQuery(it).find(".modal")[0] }
+            val alert2 = document.getElementById("test")?.let { jQuery(it).parent().parent().find(".modal")[0] }
             assertNull(alert2, "Should hide alert window after clicking OK")
         }
     }
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt
index 40720bcb..8eb7bd5b 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavFormSpec.kt
@@ -37,13 +37,13 @@ class NavFormSpec : DomSpec {
             root.add(navf)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<form class=\"navbar-form navbar-left\"></form>",
+                "<form class=\"form-inline\"></form>",
                 element?.innerHTML,
                 "Should render correct nav form"
             )
             navf.rightAlign = true
             assertEqualsHtml(
-                "<form class=\"navbar-form navbar-right\"></form>",
+                "<form class=\"form-inline ml-auto\"></form>",
                 element?.innerHTML,
                 "Should render correct right aligned nav form"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt
index 988a706d..2e52557f 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavSpec.kt
@@ -37,13 +37,13 @@ class NavSpec : DomSpec {
             root.add(nav)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<ul class=\"nav navbar-nav\"></ul>",
+                "<div class=\"navbar-nav\"></div>",
                 element?.innerHTML,
                 "Should render correct nav"
             )
             nav.rightAlign = true
             assertEqualsHtml(
-                "<ul class=\"nav navbar-nav navbar-right\"></ul>",
+                "<div class=\"navbar-nav ml-auto\"></div>",
                 element?.innerHTML,
                 "Should render correct right aligned nav"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt
index f38a05f9..1658e63c 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/navbar/NavbarSpec.kt
@@ -26,6 +26,7 @@ import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag.Companion.tag
 import pl.treksoft.kvision.navbar.Nav
 import pl.treksoft.kvision.navbar.Navbar
+import pl.treksoft.kvision.navbar.NavbarColor
 import pl.treksoft.kvision.navbar.NavbarType
 import pl.treksoft.kvision.panel.Root
 import test.pl.treksoft.kvision.DomSpec
@@ -43,15 +44,15 @@ class NavbarSpec : DomSpec {
             val element = document.getElementById("test")
             val id = navbar.container.id
             assertEqualsHtml(
-                "<nav class=\"navbar navbar-fixed-top navbar-default\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">TEST</a></div><div class=\"collapse navbar-collapse\" id=\"$id\"></div></div></nav>",
+                "<nav class=\"navbar fixed-top navbar-expand-lg navbar-light bg-light\"><a class=\"navbar-brand\" href=\"#\">TEST</a><button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-controls=\"$id\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"$id\"></div></nav>",
                 element?.innerHTML,
                 "Should render correct navbar"
             )
-            navbar.inverted = true
+            navbar.nColor = NavbarColor.DARK
             assertEqualsHtml(
-                "<nav class=\"navbar navbar-fixed-top navbar-inverse\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">TEST</a></div><div class=\"collapse navbar-collapse\" id=\"$id\"></div></div></nav>",
+                "<nav class=\"navbar fixed-top navbar-expand-lg bg-light navbar-dark\"><a class=\"navbar-brand\" href=\"#\">TEST</a><button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-controls=\"$id\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"$id\"></div></nav>",
                 element?.innerHTML,
-                "Should render correct inverted navbar"
+                "Should render correct dark navbar"
             )
             navbar.add(Nav {
                 tag(TAG.LI) {
@@ -59,7 +60,7 @@ class NavbarSpec : DomSpec {
                 }
             })
             assertEqualsHtml(
-                "<nav class=\"navbar navbar-fixed-top navbar-inverse\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-expanded=\"false\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\">TEST</a></div><div class=\"collapse navbar-collapse\" id=\"$id\"><ul class=\"nav navbar-nav\"><li><a href=\"#!/test\">Test</a></li></ul></div></div></nav>",
+                "<nav class=\"navbar fixed-top navbar-expand-lg bg-light navbar-dark\"><a class=\"navbar-brand\" href=\"#\">TEST</a><button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#$id\" aria-controls=\"$id\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button><div class=\"collapse navbar-collapse\" id=\"$id\"><div class=\"navbar-nav\"><li><a href=\"#!/test\">Test</a></li></div></div></nav>",
                 element?.innerHTML,
                 "Should render correct navbar with nav link"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt
index fcdf9860..1ebac202 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/ResponsiveGridPanelSpec.kt
@@ -41,7 +41,7 @@ class ResponsiveGridPanelSpec : DomSpec {
             rgPanel.add(Span("ghi"), 3, 3)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<div class=\"container-fluid\"><div class=\"row\"></div><div class=\"row\"><div class=\"col-md-3\"></div><div class=\"col-md-3\"><span>abc</span></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div></div><div class=\"row\"><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"><span>def</span></div><div class=\"col-md-3\"></div></div><div class=\"row\"><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"></div><div class=\"col-md-3\"><span>ghi</span></div></div></div>",
+                "<div class=\"container-fluid\"><div class=\"row\"><div class=\"col-md-4\"><span>abc</span></div><div class=\"col-md-4\"></div><div class=\"col-md-4\"></div></div><div class=\"row\"><div class=\"col-md-4\"></div><div class=\"col-md-4\"><span>def</span></div><div class=\"col-md-4\"></div></div><div class=\"row\"><div class=\"col-md-4\"></div><div class=\"col-md-4\"></div><div class=\"col-md-4\"><span>ghi</span></div></div></div>",
                 element?.innerHTML,
                 "Should render correct responsive grid panel"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt
index 9335562f..7a76cde9 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/panel/TabPanelSpec.kt
@@ -43,7 +43,7 @@ class TabPanelSpec : DomSpec {
             tabs.addTab("DEF", label2)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\" class=\"active\"><a href=\"#\">ABC</a></li><li role=\"presentation\"><a href=\"#\">DEF</a></li></ul><div><span>abc</span></div></div>",
+                "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">ABC</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">DEF</a></li></ul><div><span>abc</span></div></div>",
                 element?.innerHTML,
                 "Should render correct tabs"
             )
@@ -63,7 +63,7 @@ class TabPanelSpec : DomSpec {
             tabs.activeIndex = 1
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\" class=\"\"><a href=\"#\">ABC</a></li><li role=\"presentation\" class=\"active\"><a href=\"#\">DEF</a></li></ul><div><span>def</span></div></div>",
+                "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">ABC</a></li><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">DEF</a></li></ul><div><span>def</span></div></div>",
                 element?.innerHTML,
                 "Should change selected tab"
             )
@@ -84,7 +84,7 @@ class TabPanelSpec : DomSpec {
             tabs.removeTab(1)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\" class=\"\"><a href=\"#\">ABC</a></li></ul><div><span>abc</span></div></div>",
+                "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">ABC</a></li></ul><div><span>abc</span></div></div>",
                 element?.innerHTML,
                 "Should remove tab"
             )
@@ -105,10 +105,10 @@ class TabPanelSpec : DomSpec {
             tabs.removeTab(0)
             val label3 = Span("ghi")
             tabs.addTab("GHI", label3)
-            jQuery("#test a")[0]?.click()
+            jQuery("#test a")[1]?.click()
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<div><ul class=\"nav nav-tabs\"><li role=\"presentation\"><a href=\"#\">DEF</a></li><li role=\"presentation\"><a href=\"#\">GHI</a></li></ul><div><span>def</span></div></div>",
+                "<div><ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">DEF</a></li><li class=\"nav-item\"><a class=\"nav-link active\" href=\"#\">GHI</a></li></ul><div><span>ghi</span></div></div>",
                 element?.innerHTML,
                 "Should select correct tab by clicking"
             )
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt
index b324b8ab..b3ddbe40 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/toolbar/ButtonGroupSpec.kt
@@ -24,7 +24,6 @@ package test.pl.treksoft.kvision.toolbar
 import pl.treksoft.kvision.panel.Root
 import pl.treksoft.kvision.toolbar.ButtonGroup
 import pl.treksoft.kvision.toolbar.ButtonGroupSize
-import pl.treksoft.kvision.toolbar.ButtonGroupStyle
 import test.pl.treksoft.kvision.DomSpec
 import kotlin.browser.document
 import kotlin.test.Test
@@ -44,11 +43,11 @@ class ButtonGroupSpec : DomSpec {
                 "Should render correct button group"
             )
             group.size = ButtonGroupSize.LARGE
-            group.style = ButtonGroupStyle.JUSTIFIED
+            group.vertical = true
             assertEqualsHtml(
-                "<div class=\"btn-group btn-group-lg btn-group-justified\" role=\"group\"></div>",
+                "<div class=\"btn-group-lg btn-group-vertical\" role=\"group\"></div>",
                 element?.innerHTML,
-                "Should render correct button group with large and justified buttons"
+                "Should render correct button group with large and vertical buttons"
             )
 
         }
diff --git a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt
index c79b9d32..a65ff7c3 100644
--- a/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt
+++ b/kvision-modules/kvision-bootstrap/src/test/kotlin/test/pl/treksoft/kvision/window/WindowSpec.kt
@@ -35,18 +35,13 @@ class WindowSpec : DomSpec {
             val root = Root("test", fixed = true)
             val window = Window("Window title", isResizable = false)
             root.add(window)
+            window.show()
             val id = window.id
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<div class=\"modal-content kv-window\" id=\"$id\" style=\"width: auto; position: absolute; z-index: 901; overflow: hidden;\"><div class=\"modal-header\"><h4 class=\"modal-title\">Window title</h4></div><div style=\"height: auto; overflow: auto;\"></div></div>",
+                "<div class=\"modal-content kv-window\" id=\"$id\" style=\"width: auto; position: absolute; z-index: 901; overflow: hidden;\"><div class=\"modal-header\"><h5 class=\"modal-title\">Window title</h5><div class=\"kv-window-icons-container\"></div></div><div style=\"height: auto; overflow: auto;\"></div></div>",
                 element?.innerHTML,
-                "Should render floating window without resizable handler"
-            )
-            window.isResizable = true
-            assertEqualsHtml(
-                "<div class=\"modal-content kv-window\" id=\"$id\" style=\"width: auto; position: absolute; z-index: 901; overflow: hidden; resize: both;\"><div class=\"modal-header\"><h4 class=\"modal-title\">Window title</h4></div><div style=\"height: auto; overflow: auto; margin-bottom: 11px;\"></div><object style=\"position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; z-index: -1; opacity: 0;\" class=\"resize-sensor\" tabindex=\"-1\" type=\"text/html\" data=\"about:blank\"></object></div>",
-                element?.innerHTML,
-                "Should render floating window with resizable handler"
+                "Should render floating window"
             )
         }
     }
diff --git a/kvision-modules/kvision-chart/webpack.config.d/css.js b/kvision-modules/kvision-chart/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-chart/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-cordova/webpack.config.d/css.js b/kvision-modules/kvision-cordova/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-cordova/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-datacontainer/webpack.config.d/css.js b/kvision-modules/kvision-datacontainer/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-datacontainer/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-i18n/webpack.config.d/css.js b/kvision-modules/kvision-i18n/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-i18n/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-redux-kotlin/webpack.config.d/css.js b/kvision-modules/kvision-redux-kotlin/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-redux-kotlin/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-redux/webpack.config.d/css.js b/kvision-modules/kvision-redux/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-redux/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/kvision-modules/kvision-richtext/webpack.config.d/jquery.js b/kvision-modules/kvision-richtext/webpack.config.d/jquery.js
new file mode 100644
index 00000000..bf5a1a20
--- /dev/null
+++ b/kvision-modules/kvision-richtext/webpack.config.d/jquery.js
@@ -0,0 +1,5 @@
+config.plugins.push(new webpack.ProvidePlugin({
+    $: "jquery",
+    jQuery: "jquery",
+    "window.jQuery": "jquery"
+}));
diff --git a/kvision-modules/kvision-tabulator-remote/webpack.config.d/css.js b/kvision-modules/kvision-tabulator-remote/webpack.config.d/css.js
new file mode 100644
index 00000000..5d710d35
--- /dev/null
+++ b/kvision-modules/kvision-tabulator-remote/webpack.config.d/css.js
@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });
+
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt
index 4be84d22..785f9a2c 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt
@@ -27,7 +27,7 @@ import test.pl.treksoft.kvision.DomSpec
 import kotlin.browser.document
 import kotlin.test.Test
 
-class HelpBlockSpec : DomSpec {
+class HelpTextSpec : DomSpec {
 
     @Test
     fun render() {
@@ -37,7 +37,7 @@ class HelpBlockSpec : DomSpec {
             root.add(fl)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<span class=\"help-block small\">Form Error</span>",
+                "<small class=\"form-text text-muted\">Form Error</small>",
                 element?.innerHTML,
                 "Should render correct help block"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
index 16da0c70..2c329ffa 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
@@ -45,7 +45,7 @@ class CheckBoxSpec : DomSpec {
             val element = document.getElementById("test")
             val id = ci.input.id
             assertEqualsHtml(
-                "<div class=\"checkbox checkbox-danger checkbox-circle checkbox-inline\"><input class=\"styled\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label for=\"$id\">Label</label></div>",
+                "<div class=\"form-check abc-checkbox abc-checkbox-danger abc-checkbox-circle form-check-inline\"><input class=\"form-check-input\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>",
                 element?.innerHTML,
                 "Should render correct checkbox form control"
             )
@@ -53,7 +53,7 @@ class CheckBoxSpec : DomSpec {
             ci.circled = false
             ci.inline = false
             assertEqualsHtml(
-                "<div class=\"checkbox checkbox-info\"><input class=\"styled\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label for=\"$id\">Label</label></div>",
+                "<div class=\"form-check abc-checkbox abc-checkbox-info\"><input class=\"form-check-input\" id=\"$id\" type=\"checkbox\" checked=\"checked\" name=\"name\" disabled=\"disabled\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>",
                 element?.innerHTML,
                 "Should render correct checkbox form control"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
index 55788c84..020ad529 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
@@ -44,7 +44,7 @@ class RadioGroupInputSpec : DomSpec {
             val rid1 = ci.getChildren().filterIsInstance<Radio>().first().input.id
             val rid2 = ci.getChildren().filterIsInstance<Radio>().last().input.id
             assertEqualsHtml(
-                "<div class=\"form-group kv-radiogroup-inline\"><div class=\"radio\"><input id=\"$rid1\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"a\"><label for=\"$rid1\">A</label></div><div class=\"radio\"><input id=\"$rid2\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"b\"><label for=\"$rid2\">B</label></div></div>",
+                "<div class=\"form-group kv-radiogroup-inline\"><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid1\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"a\"><label class=\"form-check-label\" for=\"$rid1\">A</label></div><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid2\" type=\"radio\" name=\"$name\" disabled=\"disabled\" value=\"b\"><label class=\"form-check-label\" for=\"$rid2\">B</label></div></div>",
                 element?.innerHTML,
                 "Should render correct radio button group form control"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt
index 2ed52b67..77547977 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt
@@ -41,10 +41,10 @@ class RadioGroupSpec : DomSpec {
             root.add(ci)
             val element = document.getElementById("test")
             val id = ci.flabel.forId
-            val rid1 = ci.getChildren().filterIsInstance<Radio>().first().input.id
-            val rid2 = ci.getChildren().filterIsInstance<Radio>().last().input.id
+            val rid1 = ci.container.getChildren().filterIsInstance<Radio>().first().input.id
+            val rid2 = ci.container.getChildren().filterIsInstance<Radio>().last().input.id
             assertEqualsHtml(
-                "<div class=\"form-group kv-radiogroup-inline\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"radio\"><input id=\"$rid1\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"a\"><label for=\"$rid1\">A</label></div><div class=\"radio\"><input id=\"$rid2\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"b\"><label for=\"$rid2\">B</label></div></div>",
+                "<div class=\"form-group kv-radiogroup-inline\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"kv-radiogroup-container\"><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid1\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"a\"><label class=\"form-check-label\" for=\"$rid1\">A</label></div><div class=\"form-check abc-radio\"><input class=\"form-check-input\" id=\"$rid2\" type=\"radio\" name=\"$id\" disabled=\"disabled\" value=\"b\"><label class=\"form-check-label\" for=\"$rid2\">B</label></div></div></div>",
                 element?.innerHTML,
                 "Should render correct radio button group form control"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt
index bd0b3993..c709b548 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioSpec.kt
@@ -44,7 +44,7 @@ class RadioSpec : DomSpec {
             val element = document.getElementById("test")
             val id = ci.input.id
             assertEqualsHtml(
-                "<div class=\"radio radio-danger radio-inline\"><input id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label for=\"$id\">Label</label></div>",
+                "<div class=\"form-check abc-radio abc-radio-danger form-check-inline\"><input class=\"form-check-input\" id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>",
                 element?.innerHTML,
                 "Should render correct radio button form control"
             )
@@ -52,7 +52,7 @@ class RadioSpec : DomSpec {
             ci.squared = true
             ci.inline = false
             assertEqualsHtml(
-                "<div class=\"checkbox checkbox-info\"><input id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label for=\"$id\">Label</label></div>",
+                "<div class=\"form-check abc-checkbox abc-checkbox-info\"><input class=\"form-check-input\" id=\"$id\" type=\"radio\" checked=\"checked\" name=\"name\" disabled=\"disabled\" value=\"abc\"><label class=\"form-check-label\" for=\"$id\">Label</label></div>",
                 element?.innerHTML,
                 "Should render correct radio button form control"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt
index 2bc35a38..02ba7643 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/text/TextSpec.kt
@@ -49,7 +49,7 @@ class TextSpec : DomSpec {
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><span class=\"help-block small\">Validation Error</span></div>",
+                "<div class=\"form-group text-danger\"><label class=\"control-label\" for=\"$id\">Label</label><input class=\"form-control is-invalid\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct input form control with validation error"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt
index 512c3bc2..e807bfd5 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/html/ButtonSpec.kt
@@ -35,13 +35,13 @@ class ButtonSpec : DomSpec {
     fun render() {
         run {
             val root = Root("test", fixed = true)
-            val button = Button("Cancel", "fa-bars", ButtonStyle.PRIMARY)
+            val button = Button("Cancel", "fas fa-bars", ButtonStyle.PRIMARY)
             button.size = ButtonSize.LARGE
             button.block = true
             root.add(button)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<button class=\"btn btn-primary btn-lg btn-block\" type=\"button\"><i class=\"fa fa-bars\"></i> Cancel</button>",
+                "<button class=\"btn btn-primary btn-lg btn-block\" type=\"button\"><i class=\"fas fa-bars\"></i> Cancel</button>",
                 element?.innerHTML,
                 "Should render correct html button"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt
index ea3425c5..9a63c68e 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/html/IconSpec.kt
@@ -33,10 +33,10 @@ class IconSpec : DomSpec {
     fun render() {
         run {
             val root = Root("test", fixed = true)
-            val icon = Icon("fa-check")
+            val icon = Icon("fas fa-check")
             root.add(icon)
             val element = document.getElementById("test")
-            assertEqualsHtml("<span class=\"fa fa-check\"></span>", element?.innerHTML, "Should render correct icon")
+            assertEqualsHtml("<span class=\"fas fa-check\"></span>", element?.innerHTML, "Should render correct icon")
         }
     }
 
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt
index 169575fc..ed3a5347 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/html/ImageSpec.kt
@@ -41,7 +41,7 @@ class ImageSpec : DomSpec {
             root.add(image)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<img class=\"img-responsive center-block img-rounded\" src=\"$res\" alt=\"Image\">",
+                "<img class=\"img-fluid center-block rounded\" src=\"$res\" alt=\"Image\">",
                 element?.innerHTML,
                 "Should render correct html image"
             )
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt
index c312040a..69dc05d3 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/table/TableSpec.kt
@@ -46,7 +46,7 @@ class TableSpec : DomSpec {
             root.add(table)
             val element = document.getElementById("test")
             assertEqualsHtml(
-                "<table class=\"table\"><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>",
+                "<table class=\"table\"><thead><tr><th scope=\"col\">a</th><th scope=\"col\">b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>",
                 element?.innerHTML,
                 "Should render correct table"
             )
@@ -55,7 +55,7 @@ class TableSpec : DomSpec {
             table.types = setOf(TableType.BORDERED)
             val element2 = document.getElementById("test")
             assertEqualsHtml(
-                "<div class=\"table-responsive\"><table class=\"table table-bordered\"><caption>Caption</caption><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table></div>",
+                "<div class=\"table-responsive\"><table class=\"table table-bordered\"><caption>Caption</caption><thead><tr><th scope=\"col\">a</th><th scope=\"col\">b</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table></div>",
                 element2?.innerHTML,
                 "Should render correct responsive table"
             )