Option/Select Menu is not displayed HTML/Bootstrap

Question

I have a very simple HTML file which should offer the user a select box where he/she can select multiple options.

I actually copy& paste the code from the documentary but I have nothing displayed

This is the code displayed in the browser, all links to styles and css are working

<!DOCTYPE html>

<!--TODO make this xmlns entries inserted by the IDE at HTML creation-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr>
            <td>BMW</td>
        </tr>
        <tr>
            <td>Mercedes</td>
        </tr>
        <tr>
            <td>Audi</td>
        </tr>

    </table>
</div>
</body>

<footer>
    <script src="/webjars/jquery/3.3.1-1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <!--    <script th:src="@{/mainpage.js}"></script>-->
    <link href="/webjars/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

</footer>
<!-- Latest compiled and minified CSS -->

</html>

and here the IDE HTML

<!DOCTYPE html>

<!--TODO make this xmlns entries available per default creation-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${cars}">
            <td th:text="${prod}">Onions</td>
        </tr>

    </table>
</div>
</body>

<footer th:replace="template :: footer"></footer>
<!-- Latest compiled and minified CSS -->

</html>

source

Any idea what is the issue here?

enter link description here

score 1 · Accepted Answer · 2018-07-21 21:47:41Z

1

You need to add the Bootstrap CSS stylesheet and Javascript file to your document.

<!DOCTYPE html>

<!--TODO make this xmlns entries available per default creation-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-*.min.js"></script>


<div class="jumbotron jumbotron-fluid">
    <div class="container text-center"><h2>Select</h2></div>
</div>
<div class="container">
    <div class="text-center">List</div>
    <form method="post">
        <select title="select" class="selectpicker" multiple>
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
        </select>

    </form>
</div>
<br>
<div class="container">
    <table>
        <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
        </tr>
        <tr th:each="prod : ${cars}">
            <td th:text="${prod}">Onions</td>
        </tr>

    </table>
</div>
</body>

<footer th:replace="template :: footer"></footer>
<!-- Latest compiled and minified CSS -->

</html>

edited Jul 21, 2018 at 21:47

answered Jul 21, 2018 at 21:39

user10108359

Sign up to request clarification or add additional context in comments.

4 Comments

Anna Klein Over a year ago

Ty. Mhm, first of all I have all these js and css files already in my HTML doc (look footer). Second, this should be used with bootstrap 4. I tried it with your suggestion (replaced with bootstrap 4) and now I see at least a select field but clicking on it, it doesn't open.

user10108359 Over a year ago

@AnnaKlein I changed to Bootstrap4.

Anna Klein Over a year ago

It is working now, thank you a lot. But I still don't understand why it didn't work before. As you can see in my browser HTML document, I have the same dependencies of Jquery, Bootstrap etc loaded, but only in the footer. Does this made the difference? The firefox web documentation says actually, it doesn't usually matters?!

user10108359 Over a year ago

@AnnaKlein If they are at the bottom of the page, the styles won't be applied to any elements above them. Remember that HTML documents are parsed from top to bottom.

Collectives™ on Stack Overflow

Option/Select Menu is not displayed HTML/Bootstrap

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related