Bootstrap 4 multiselect dropdown

0 votes

I have read on many forums that the problem of select and multiselect has been resolved after the beta version of bootstrap 4. Unfortunately I am unable to display the multi select while using bootstrap 3 in bootstrap 4. Have shared my snippets below:-






Bootstrap 3 Snippet

$('select').selectpicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js">
</script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 

</select>

 

Bootstrap 4 Snippet

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
</select>
Feb 22, 2022 in Java by Rahul
• 9,670 points
5,116 views

1 answer to this question.

0 votes

Due to the reason being that the bootstrap-select is a Bootstrap component and therefore you need to include it in your code as you did for your V3. However, please keep in mind that this component only works in bootstrap-4 since version 1.13.0




$('select').selectpicker();


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> 

<select class="selectpicker" multiple data-live-search="true"> 
    <option>Mustard</option> 
  <option>Ketchup</option> 
  <option>Relish</option> 
</select>

answered Feb 22, 2022 by Aditya
• 7,680 points

Related Questions In Java

0 votes
2 answers

How can we assert, that a certain Exception is thrown in JUnit 4 tests?

@Test(expected = IndexOutOfBoundsException.class) public void testIndexOutOfBoundsException() { ...READ MORE

answered Dec 10, 2018 in Java by Sushmita
• 6,910 points
1,196 views
+1 vote
0 answers

Initially autowired object has value,it becomes null after paging(using JSF 2.2 and spring 4.01.)

i'm trying to create basic crud operations ...READ MORE

Jul 5, 2019 in Java by swats
1,498 views
0 votes
0 answers

How can I get bootstrap version via javascript?

Is there any way to get bootstrap ...READ MORE

Apr 13, 2022 in Java by Rahul
• 3,380 points
440 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
972 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
14,121 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
22,369 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,880 points
2,941 views
0 votes
1 answer

How to handle Bootstrap dropdown in Selenium Webdriver?

Hi Neeru, Bootstrap dropdown isn't like traditional ...READ MORE

answered Jul 19, 2019 in Selenium by Anvi
• 14,150 points
4,830 views
0 votes
1 answer

How to implement a dynamic bootstrap 4 accordion, using Jquery

With this you can add dynamic accordion ...READ MORE

answered Jun 7, 2022 in JQuery by Edureka
• 13,670 points
3,346 views
0 votes
1 answer

How to open a Bootstrap 4 modal dialog using jQuery

Use the modal('show') Method You can simply use ...READ MORE

answered Jun 28, 2022 in JQuery by rajatha
• 7,640 points
6,486 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP