Support Bootstrap 4

[hubgit]

Bootstrap 4 (currently alpha) has a simplified .dropdown-menu .dropdown-item syntax.

http://v4-alpha.getbootstrap.com/components/dropdowns/

There's also no longer a requirement for the markup to be ul + li elements, so the dropdown menu can be simply a div.dropdown-menu container with a.dropdown-item items inside.

[pruimmartin]

When will there be support for bootstrap 4?

[caseyjhol]

I will make Bootstrap 4 a priority after its first official release.

[cubitworx]

The fact that this library doesn't yet support bootstrap 4 forces me to use something else which is very disappointing because it is such a nice implementation.

[kbtz]

@cubitworx Indeed, deal breaker 😢

[arakis]

Yes, i needed bootstrap v4 support in several month ago, too. Here is a "very simple", just working patch:

bootstrap-select.js:

...
Line 283
-    style: 'btn-default',
+    style: 'btn-secondary',
...
Line 477:
-            (typeof classes !== 'undefined' ? ' class="' + classes + '"' : '') +
+            (typeof classes !== 'undefined' ? ' class="dropdown-item ' + classes + '"' : '') +
...
Line 699:
       divider.className = 'divider';
+     a.className = 'dropdown-item';

My bootstrap-select source is from 15. dec 2015. source lines are not valid now, of course.

I vote for bootstrap v4 support too, because i have a huge need, too. But my patch seems to work for my needs, it's not tested in detail. I use a very small feature set of the plugin.

[caseyjhol]

Bootstrap 4 is still in alpha, meaning anything can be changed at any time. It also means that nobody should be using it in a production environment. Once it moves to beta I'll take a closer look as to what's required to support it.

[devopsjosh]

For my application I use the filtered select/multiselect using bootstrap-select 1.12.1:

I got filtered select/multiselect working with v4 by adding the following css to my own custom css:

.bootstrap-select.show>.dropdown-menu>.dropdown-menu {
    display: block;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden{
    display:none;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li a{
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: 400;
    color: #292b2c;
    text-align: inherit;
    white-space: nowrap;
    background: 0 0;
    border: 0;
}

You may be able to get a temporary fix for your use case by simply adding your own css to your css file.
Like caseyjhol said, v4 is in alpha and shouldn't be used for production. Any changes to either bootstrap-select plugin or Bootstrap 4 framework can break any temporary fixes such as the one above.

[gtournie]

What would be great is to be able to tweak it without having to fork the project.
I mean if we could configure the template a little bit (changing the classes, the type of tags...), everybody could use it with any version of Bootstrap

[rodrigo-martins]

https://github.com/rodrigo-martins/bootstrap-select.git

Hi guys,

I made a small changes in dist/js and dist/css for my application and it is working Okay. I didn't check if it is working for full compatibility on bootstrap 4.

PS.: Fontawesome are requered for multselect

-Inserted dropdown-item on <li> and <a> elements
-Update all divider to dropdown-divider
-Removed dropdown-menu on <ul> elements
-Small changed of .css

Best regards

[grosser]

Using this ... @jtesch patch + fix for btn-default

/*
Make bootstrap-select work with bootstrap 4 see:
https://github.com/silviomoreto/bootstrap-select/issues/1135
*/
.dropdown-toggle.btn-default {
  color: #292b2c;
  background-color: #fff;
  border-color: #ccc;
}

.bootstrap-select.show>.dropdown-menu>.dropdown-menu {
  display: block;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden{
  display:none;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li a{
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
}

.dropdown-menu > li.active > a {
  color: #fff !important;
  background-color: #337ab7 !important;
}

.bootstrap-select .check-mark::after {
  content: "✓";
}

.bootstrap-select button {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Make filled out selects be the same size as empty selects */
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline !important;
}

[infostreams]

I've submitted a new pull request here #1748 that works with the Bootstrap4 alpha-6, which you can install as follows.

[trusktr]

Hello Everyone, just replace your link and script tags with these to use @infostreams's version with Bootstrap v4-alpha6:

  <!-- bootstrap-select -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/infostreams/bootstrap-select/fd227d46de2afed300d97fd0962de80fa71afb3b/dist/css/bootstrap-select.min.css" />
  <script src="https://cdn.rawgit.com/infostreams/bootstrap-select/fd227d46de2afed300d97fd0962de80fa71afb3b/dist/js/bootstrap-select.min.js"></script>

[trusktr]

Works great!

[infostreams]

Hi all, I don't think it's wise to link directly to the files in my pull request. Referencing them within a package.json is one thing, but referencing them in production code is quite another. What if I decide to delete the pull request once (if ever) it gets merged? That your site then breaks is not on me :-) Cheers, Ed

…

On 11 Aug 2017, at 04:19, Joseph Orbegoso Pea ***@***.***> wrote: Works great! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[trusktr]

True. Download the files asap and host in your own project

[treaves]

I'm trying to install with the info from the link info streams provided, but, it does not seem to work.

yarn add #1748/head
zsh: no matches found: #1748/head

[gtournie]

FYI bootstrap 4 is in beta: https://getbootstrap.com/

[trusktr]

@treaves I don't think #1748/head is a valid ref? I think the format is yarn add silviomoreto/bootstrap-select#<ref> where <ref> is replaced with a commit hash, branch name, or tag name. At least that is the syntax with npm and I think yarn is probably similar.

[treaves]

Well, I was following the yarn docs. Regardless, even without the '/head', I still get 'no matches found: #1748'

[trusktr]

Hello @treaves, 1748 is not a commit that exists. Look at the pull request's commits tab and use an existing commit number.

[ghiscoding]

FYI Bootstrap 4.0 official release will land today. It was announced in one of the Bootstrap Github issue.

[caseyjhol]

Sorry for the delay, guys! Hopeful it could be next week (Jan 22-26).

[jfm-dnd]

Hi all, adding the following
.open > .dropdown-menu { display: block; }
fixed size issue with bootstrap 4 for me.

[mkraha]

Hope for tomorrow!

[pete-woods]

I'd be happy to be surprised! :) (apologies to Casey)

[mkraha]

I thought 1.13 at this year Jan between 22-26.. 👎

[Luca4k4]

Have you an idea about when Bootstrap v4 support will be added?

[pete-woods]

I guess I'm puzzled about where dev for this project happens? The v1.13.0-dev branch doesn't have any activity for 6 months.

[Moxh3]

@caseyjhol Any idea yet?

[mkraha]

@caseyjhol Checking daily but no news about b4 support..

[Undo1]

This is the only thing holding me back from a BS4 rollout. I'm very excited for bootstrap-select to gain BS4 compatibility, but we all have to understand that it's a volunteer project.

On that note, though, are there any forks supporting BS4? I looked around a little but didn't find any good working ones.

[ghiscoding]

@Undo1 have you tried the patch that I provided (just scroll higher), it works good for me. It's not 100% functional but it might be around 90% there, so it's that far off.

[jmchauv]

Yep. I definitely appreciate the developer's efforts as this is a volunteer project. I am just hoping to hear of a timeline on BS4 support so that I can plan accordingly if possible.

[pkelleher1984]

Was having issues with this myself! No patches above worked :(

BUT this worked: http://select2.org/

[caseyjhol]

Bootstrap 4 support has 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.

[krystyna93]

I will be waiting for the non beta version, thanks.

[tomalakgeretkal]

@krystyna93 Or you could help the rest of us test it so that it gets out of beta more quickly.

[krystyna93]

@tomalakgeretkal that is true.

[mdczaplicki]

This is how it looks using BS4 and with these attributes: htmlAttributes: new { @class = "selectpicker", multiple = "multiple", data_width = "fit", title = "Select roles" }
Kinda too high I think. Also padding is broken IMO.

Removing "fit" makes it look good.

[krystyna93]

That is interesting, because I have a similar issue when the text is too short, the tick icon overlaps the text!.. Anyway of fixing this behaviour when the text is short ??

[ko06]

why new repository?

[caseyjhol]

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