diff --git a/src/containers/editable-popover5.js b/src/containers/editable-popover5.js
new file mode 100644
index 0000000..50d86ff
--- /dev/null
+++ b/src/containers/editable-popover5.js
@@ -0,0 +1,226 @@
+/**
+* Editable Popover3 (for Bootstrap 3)
+* ---------------------
+* requires bootstrap-popover.js
+*/
+(function ($) {
+ "use strict";
+
+ //extend methods
+ $.extend($.fn.editableContainer.Popup.prototype, {
+ containerName: 'popover',
+ containerDataName: 'bs.popover',
+ innerCss: '.popover-content',
+ defaults: $.fn.popover.Constructor.DEFAULTS,
+
+ initContainer: function(){
+ $.extend(this.containerOptions, {
+ trigger: 'manual',
+ selector: false,
+ content: ' ',
+ template: this.defaults.template
+ });
+
+ //as template property is used in inputs, hide it from popover
+ var t;
+ if(this.$element.data('template')) {
+ t = this.$element.data('template');
+ this.$element.removeData('template');
+ }
+
+ this.call(this.containerOptions);
+
+ if(t) {
+ //restore data('template')
+ this.$element.data('template', t);
+ }
+ },
+
+ /* show */
+ innerShow: function () {
+ this.call('show');
+ },
+
+ /* hide */
+ innerHide: function () {
+ this.call('hide');
+ },
+
+ /* destroy */
+ innerDestroy: function() {
+ this.call('destroy');
+ },
+
+ setContainerOption: function(key, value) {
+ this.container().options[key] = value;
+ },
+
+ /**
+ * move popover to new position. This function mainly copied from bootstrap-popover.
+ */
+ /*jshint laxcomma: true, eqeqeq: false*/
+ setPosition: function () {
+
+ (function() {
+ /*
+ var $tip = this.tip()
+ , inside
+ , pos
+ , actualWidth
+ , actualHeight
+ , placement
+ , tp
+ , tpt
+ , tpb
+ , tpl
+ , tpr;
+
+ placement = typeof this.options.placement === 'function' ?
+ this.options.placement.call(this, $tip[0], this.$element[0]) :
+ this.options.placement;
+
+ inside = /in/.test(placement);
+
+ $tip
+ // .detach()
+ //vitalets: remove any placement class because otherwise they dont influence on re-positioning of visible popover
+ .removeClass('top right bottom left')
+ .css({ top: 0, left: 0, display: 'block' });
+ // .insertAfter(this.$element);
+
+ pos = this.getPosition(inside);
+
+ actualWidth = $tip[0].offsetWidth;
+ actualHeight = $tip[0].offsetHeight;
+
+ placement = inside ? placement.split(' ')[1] : placement;
+
+ tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2};
+ tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2};
+ tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth};
+ tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width};
+
+ switch (placement) {
+ case 'bottom':
+ if ((tpb.top + actualHeight) > ($(window).scrollTop() + $(window).height())) {
+ if (tpt.top > $(window).scrollTop()) {
+ placement = 'top';
+ } else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
+ placement = 'right';
+ } else if (tpl.left > $(window).scrollLeft()) {
+ placement = 'left';
+ } else {
+ placement = 'right';
+ }
+ }
+ break;
+ case 'top':
+ if (tpt.top < $(window).scrollTop()) {
+ if ((tpb.top + actualHeight) < ($(window).scrollTop() + $(window).height())) {
+ placement = 'bottom';
+ } else if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
+ placement = 'right';
+ } else if (tpl.left > $(window).scrollLeft()) {
+ placement = 'left';
+ } else {
+ placement = 'right';
+ }
+ }
+ break;
+ case 'left':
+ if (tpl.left < $(window).scrollLeft()) {
+ if ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width())) {
+ placement = 'right';
+ } else if (tpt.top > $(window).scrollTop()) {
+ placement = 'top';
+ } else if (tpt.top > $(window).scrollTop()) {
+ placement = 'bottom';
+ } else {
+ placement = 'right';
+ }
+ }
+ break;
+ case 'right':
+ if ((tpr.left + actualWidth) > ($(window).scrollLeft() + $(window).width())) {
+ if (tpl.left > $(window).scrollLeft()) {
+ placement = 'left';
+ } else if (tpt.top > $(window).scrollTop()) {
+ placement = 'top';
+ } else if (tpt.top > $(window).scrollTop()) {
+ placement = 'bottom';
+ }
+ }
+ break;
+ }
+
+ switch (placement) {
+ case 'bottom':
+ tp = tpb;
+ break;
+ case 'top':
+ tp = tpt;
+ break;
+ case 'left':
+ tp = tpl;
+ break;
+ case 'right':
+ tp = tpr;
+ break;
+ }
+
+ $tip
+ .offset(tp)
+ .addClass(placement)
+ .addClass('in');
+ */
+
+
+ var $tip = this.tip();
+
+ var placement = typeof this.options.placement == 'function' ?
+ this.options.placement.call(this, $tip[0], this.$element[0]) :
+ this.options.placement;
+
+ var autoToken = /\s?auto?\s?/i;
+ var autoPlace = autoToken.test(placement);
+ if (autoPlace) {
+ placement = placement.replace(autoToken, '') || 'top';
+ }
+
+
+ var pos = this.getPosition();
+ var actualWidth = $tip[0].offsetWidth;
+ var actualHeight = $tip[0].offsetHeight;
+
+ if (autoPlace) {
+ var $parent = this.$element.parent();
+
+ var orgPlacement = placement;
+ var docScroll = document.documentElement.scrollTop || document.body.scrollTop;
+ var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth();
+ var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight();
+ var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left;
+
+ placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' :
+ placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' :
+ placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' :
+ placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' :
+ placement;
+
+ $tip
+ .removeClass(orgPlacement)
+ .addClass(placement);
+ }
+
+
+ var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
+
+ this.applyPlacement(calculatedOffset, placement);
+
+
+ }).call(this.container());
+ /*jshint laxcomma: false, eqeqeq: true*/
+ }
+ });
+
+}(window.jQuery));
diff --git a/src/editable-form/editable-form-bootstrap5.js b/src/editable-form/editable-form-bootstrap5.js
new file mode 100644
index 0000000..39f61d7
--- /dev/null
+++ b/src/editable-form/editable-form-bootstrap5.js
@@ -0,0 +1,64 @@
+/*
+Editableform based on Twitter Bootstrap 3
+*/
+(function ($) {
+ "use strict";
+
+ //store parent methods
+ var pInitInput = $.fn.editableform.Constructor.prototype.initInput;
+
+ $.extend($.fn.editableform.Constructor.prototype, {
+ initTemplate: function() {
+ this.$form = $($.fn.editableform.template);
+ this.$form.find('.control-group').addClass('form-group');
+ this.$form.find('.editable-error-block').addClass('help-block');
+ },
+ initInput: function() {
+ pInitInput.apply(this);
+
+ //for bs3 set default class `input-sm` to standard inputs
+ var emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
+ var defaultClass = 'input-sm';
+
+ //bs3 add `form-control` class to standard inputs
+ var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time,typeaheadjs'.split(',');
+ if(~$.inArray(this.input.type, stdtypes)) {
+ this.input.$input.addClass('form-control');
+ if(emptyInputClass) {
+ this.input.options.inputclass = defaultClass;
+ this.input.$input.addClass(defaultClass);
+ }
+ }
+
+ //apply bs3 size class also to buttons (to fit size of control)
+ var $btn = this.$form.find('.editable-buttons');
+ var classes = emptyInputClass ? [defaultClass] : this.input.options.inputclass.split(' ');
+ for(var i=0; i<classes.length; i++) {
+ // `btn-sm` is default now
+ /*
+ if(classes[i].toLowerCase() === 'input-sm') {
+ $btn.find('button').addClass('btn-sm');
+ }
+ */
+ if(classes[i].toLowerCase() === 'input-lg') {
+ $btn.find('button').removeClass('btn-sm').addClass('btn-lg');
+ }
+ }
+ }
+ });
+
+ //buttons
+ $.fn.editableform.buttons =
+ '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
+ '<i class="glyphicon glyphicon-ok"></i>'+
+ '</button>'+
+ '<button type="button" class="btn btn-default btn-sm editable-cancel">'+
+ '<i class="glyphicon glyphicon-remove"></i>'+
+ '</button>';
+
+ //error classes
+ $.fn.editableform.errorGroupClass = 'has-error';
+ $.fn.editableform.errorBlockClass = null;
+ //engine
+ $.fn.editableform.engine = 'bs3';
+}(window.jQuery));
\ No newline at end of file
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..460f760
--- /dev/null
+++ b/test.js
@@ -0,0 +1,11 @@
+import $ from 'jquery';
+window.jQuery = window.$ = $;
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap';
+
+$(document).ready(function () {
+ $('#testButton').click(function () {
+ alert('Bootstrap 3.4.1 and jQuery are working!');
+ });
+});
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..e69de29