Bootstrap selectpicker in bootstrap 4

Asked

Viewed 6,751 times

1

Bootstrap selectpicker works with bootstrap version 4?

Is there incompatibility between them? There is another similar "plugin"?

I’m testing it like this:

CSS imported:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

Imported scripts:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Code used:

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Everything as the documentation explains. The difference is the bootstrap that is newer.

bootstrap-4

  • You have already tested?

  • yes, it didn’t work...

  • I tested on BS4 and it didn’t work, it doesn’t open Select

  • Load this . js before bootstrap . js and run a test: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

  • @hugocsl this same, I’ll wait to see if someone gives some hint :/

  • @dvd same thing, does not open select

  • Check it out: https://jsfiddle.net/ohhhryL3/

  • https://github.com/ublaboo/datagrid/issues/416 look here

  • @dvd does not work as it should

  • @hugocsl saw that they released the beta version of bootstrap-select with bootstrap 4 support, but still could not make it work :/

  • I think I’ll give up and use ajax requests. I’ll still leave the topic open if someone comes up with a solution

Show 6 more comments

1 answer

3


There is no incompatibility between bootstrap-select and bootstrap 4.
The problem is that not including the UMD version of Popper.js before bootstrap.min.js does not work!
You can also use bootstrap.bundle.min.js instead of Popper.js and bootstrap.min.js, because it already includes the Popper code.!
Below an example with the states of Brazil and search option!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<style>
body { background: seagreen; }
</style>

<br><br>

<div class="container">
  <select class="selectpicker" data-width="40%" title="Estados do Brasil" data-live-search="true">
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
  </select>
</div>

Pen with the same example:

Codepen

Browser other questions tagged bootstrap-4

You are not signed in. Login or sign up in order to post.