Vue-tables-2: Bootstrap4 using Bootstrap3 classnames for VueTables__search ?

[seriousme]

• Vue.js version: 2.5.17
• consumed using: webpack
• FULL error message (including stack trace): none (visuals incorrect)
• relevant code:
  https://jsfiddle.net/jklu/vtghx1nk/9/
• steps for reproducing the issue:
  Use options { theme:"bootstrap4" } , include Bootstrap4 stylesheet and watch the searchbox sitting above the pagination dropdown both on the left side of the page.

Inspecting the elements shows:

<div class="col-md-12">
<div class="form-group form-inline pull-left VueTables__search">
<div class="VueTables__search-field">
<label for="VueTables__search_LJbPw" class="">Filter:</label>
<input type="text" value="" placeholder="Search query" id="VueTables__search_LJbPw" class="form-control ">
</div>
</div>
<div class="form-group form-inline pull-right VueTables__limit">
<div class="VueTables__limit-field">
<label for="VueTables__limit_LJbPw" class="">Records:</label>
<select name="limit" value="10" id="VueTables__limit_LJbPw" class="form-control">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
</div>
</div>

The difference between bootstrap 3 & 4 in this case is pull being replaced by float
The definition of bootstrap 4 is correct, however I can't find why this gives me bootstrap 3 classes.

Any hint would be much appreciated.

Cheers,

Hans

[seriousme]

Ok, just found the answer myself:

The trick is to use:

Vue.use(ClientTable, {}, false, 'bootstrap4');

See also: https://jsfiddle.net/jklu/vtghx1nk/10/

[nelson6e65]

It's very confusing in the readme. Thanks, @seriousme