bootstrap-select: Option list is empty for bootstrap 4

I did a simple HTML document with bootstrap 4 and the latest bootstrap select. The options list is empty then:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<link rel="stylesheet" href="dist/css/bootstrap-select.min.css">

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="dist/js/bootstrap-select.min.js"></script>
</head>
<body>

<form>
    <select class="selectpicker">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</form>

</body>
</html>

screen

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 9
Comments: 29 (9 by maintainers)

Most upvoted comments

Bootstrap 4 support has officially been added as a part of v1.13.0-beta, available here: https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0-beta. Please post any issues in that repo from now on.

+12

caseyjhol on Feb 12, 2018

@toho64 You’re not loading the bootstrap-select CSS.

caseyjhol on Feb 16, 2018

I figured out that it broke because I had a different style defined as:

<style> .dropdown:hover > .dropdown-menu { display: block; margin: 0px; } </style>

This style is used to automatically open other menu items on hover, but this breaks the selectpicker. Also, maybe I am missing something but the selectpicker does not appear to be selectable by keyboard…

jeanmarc3 on Sep 28, 2018

Bootstrap 4 support has officially been added in v1.13.0!

caseyjhol on Apr 19, 2018

Well, Bootstrap has now exceeded the Beta version, so its definitely high time to make it compatible now…

krystyna93 on Feb 5, 2018

Incompatibility still present February 5, 2018.

arpitux on Feb 5, 2018

@meJevin Please try the latest release to see if your problem is resolved.

caseyjhol on May 12, 2020

There is an issue when i click on select it doesn’t show me dropdown with items. Any idea how to fix this?

dejooo13 on Nov 16, 2018

I am trying to use this plugin with Bootstrap 4 (ASP.NET CORE / Razor) but get the same problem where there is an empty space when the dropdown is hovered on:

<select class="selectpicker"> <option>AAA</option> <option>BBB</option> </select>

This is what I am using: `< link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css” integrity=“sha256-sJQnfQcpMXjRFWGNJ9/BWB1l6q7bkQYsRqToxoHlNJY=” crossorigin=“anonymous” />

Any advice?

Also, how do you style the selectpicker dropdown so it matches the standard Bootstrap 4 controls (white background / blue highlight border on focus)? Thanks

jeanmarc3 on Sep 17, 2018