New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Bootstrap 4 #1135

Closed
hubgit opened this Issue Aug 26, 2015 · 77 comments

Comments

Projects
None yet
@hubgit

hubgit commented Aug 26, 2015

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

This comment has been minimized.

Show comment
Hide comment
@pruimmartin

pruimmartin Nov 27, 2015

When will there be support for bootstrap 4?

pruimmartin commented Nov 27, 2015

When will there be support for bootstrap 4?

@caseyjhol

This comment has been minimized.

Show comment
Hide comment
@caseyjhol

caseyjhol Dec 1, 2015

Member

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

Member

caseyjhol commented Dec 1, 2015

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

@cubitworx

This comment has been minimized.

Show comment
Hide comment
@cubitworx

cubitworx Oct 3, 2016

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.

cubitworx commented Oct 3, 2016

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.

@cvsguimaraes

This comment has been minimized.

Show comment
Hide comment
@cvsguimaraes

cvsguimaraes Oct 4, 2016

@cubitworx Indeed, deal breaker 😢

cvsguimaraes commented Oct 4, 2016

@cubitworx Indeed, deal breaker 😢

@Arakis

This comment has been minimized.

Show comment
Hide comment
@Arakis

Arakis Oct 30, 2016

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.

Arakis commented Oct 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@caseyjhol

caseyjhol Nov 4, 2016

Member

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.

Member

caseyjhol commented Nov 4, 2016

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.

@jtesch

This comment has been minimized.

Show comment
Hide comment
@jtesch

jtesch Jan 25, 2017

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.

jtesch commented Jan 25, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gtournie

gtournie Feb 3, 2017

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

gtournie commented Feb 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@rodrigo-martins

rodrigo-martins Apr 7, 2017

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

rodrigo-martins commented Apr 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@grosser

grosser Apr 14, 2017

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;
}

screen shot 2017-04-14 at 4 42 34 pm

screen shot 2017-05-05 at 10 04 37 am

grosser commented Apr 14, 2017

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;
}

screen shot 2017-04-14 at 4 42 34 pm

screen shot 2017-05-05 at 10 04 37 am

@infostreams

This comment has been minimized.

Show comment
Hide comment
@infostreams

infostreams Jun 22, 2017

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

infostreams commented Jun 22, 2017

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

@trusktr

This comment has been minimized.

Show comment
Hide comment
@trusktr

trusktr Aug 11, 2017

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 commented Aug 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@trusktr

trusktr Aug 11, 2017

Works great!

trusktr commented Aug 11, 2017

Works great!

@infostreams

This comment has been minimized.

Show comment
Hide comment
@infostreams

infostreams Aug 11, 2017

infostreams commented Aug 11, 2017

@trusktr

This comment has been minimized.

Show comment
Hide comment
@trusktr

trusktr Aug 11, 2017

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

trusktr commented Aug 11, 2017

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

@treaves

This comment has been minimized.

Show comment
Hide comment
@treaves

treaves Aug 16, 2017

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

yarn add snapappointments/bootstrap-select#1748/head
zsh: no matches found: snapappointments/bootstrap-select#1748/head

treaves commented Aug 16, 2017

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

yarn add snapappointments/bootstrap-select#1748/head
zsh: no matches found: snapappointments/bootstrap-select#1748/head

@gtournie

This comment has been minimized.

Show comment
Hide comment
@gtournie

gtournie Aug 16, 2017

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

gtournie commented Aug 16, 2017

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

@trusktr

This comment has been minimized.

Show comment
Hide comment
@trusktr

trusktr Aug 22, 2017

@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.

trusktr commented Aug 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@treaves

treaves Aug 26, 2017

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

treaves commented Aug 26, 2017

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

@trusktr

This comment has been minimized.

Show comment
Hide comment
@trusktr

trusktr Aug 26, 2017

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

trusktr commented Aug 26, 2017

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

@ghiscoding

This comment has been minimized.

Show comment
Hide comment
@ghiscoding

ghiscoding Jan 18, 2018

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

ghiscoding commented Jan 18, 2018

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

@caseyjhol

This comment has been minimized.

Show comment
Hide comment
@caseyjhol

caseyjhol Jan 20, 2018

Member

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

Member

caseyjhol commented Jan 20, 2018

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

@jfm-dnd

This comment has been minimized.

Show comment
Hide comment
@jfm-dnd

jfm-dnd Jan 20, 2018

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

jfm-dnd commented Jan 20, 2018

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

@krahamath

This comment has been minimized.

Show comment
Hide comment
@krahamath

krahamath Jan 25, 2018

Hope for tomorrow!

krahamath commented Jan 25, 2018

Hope for tomorrow!

@pete-woods

This comment has been minimized.

Show comment
Hide comment
@pete-woods

pete-woods Jan 25, 2018

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

pete-woods commented Jan 25, 2018

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

@krahamath

This comment has been minimized.

Show comment
Hide comment
@krahamath

krahamath Jan 29, 2018

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

krahamath commented Jan 29, 2018

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

@Luca4k4

This comment has been minimized.

Show comment
Hide comment
@Luca4k4

Luca4k4 Jan 29, 2018

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

Luca4k4 commented Jan 29, 2018

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

@pete-woods

This comment has been minimized.

Show comment
Hide comment
@pete-woods

pete-woods Feb 4, 2018

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.

pete-woods commented Feb 4, 2018

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

This comment has been minimized.

Show comment
Hide comment
@Moxh3

Moxh3 Feb 5, 2018

@caseyjhol Any idea yet?

Moxh3 commented Feb 5, 2018

@caseyjhol Any idea yet?

@krahamath

This comment has been minimized.

Show comment
Hide comment
@krahamath

krahamath Feb 8, 2018

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

krahamath commented Feb 8, 2018

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

@Undo1

This comment has been minimized.

Show comment
Hide comment
@Undo1

Undo1 Feb 8, 2018

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.

Undo1 commented Feb 8, 2018

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

This comment has been minimized.

Show comment
Hide comment
@ghiscoding

ghiscoding Feb 8, 2018

@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.

ghiscoding commented Feb 8, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@jmchauv

jmchauv Feb 8, 2018

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.

jmchauv commented Feb 8, 2018

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

This comment has been minimized.

Show comment
Hide comment
@pkelleher1984

pkelleher1984 Feb 9, 2018

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

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

pkelleher1984 commented Feb 9, 2018

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

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

@caseyjhol

This comment has been minimized.

Show comment
Hide comment
@caseyjhol

caseyjhol Feb 12, 2018

Member

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.

Member

caseyjhol commented Feb 12, 2018

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.

@caseyjhol caseyjhol closed this Feb 12, 2018

@krystyna93

This comment has been minimized.

Show comment
Hide comment
@krystyna93

krystyna93 Feb 13, 2018

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

krystyna93 commented Feb 13, 2018

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

@tomalakgeretkal

This comment has been minimized.

Show comment
Hide comment
@tomalakgeretkal

tomalakgeretkal Feb 13, 2018

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

tomalakgeretkal commented Feb 13, 2018

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

@krystyna93

This comment has been minimized.

Show comment
Hide comment
@krystyna93

krystyna93 commented Feb 13, 2018

@tomalakgeretkal that is true.

@caseyjhol caseyjhol removed the WIP label Feb 13, 2018

@mdczaplicki

This comment has been minimized.

Show comment
Hide comment
@mdczaplicki

mdczaplicki Feb 24, 2018

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.
image
Removing "fit" makes it look good.
image

mdczaplicki commented Feb 24, 2018

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.
image
Removing "fit" makes it look good.
image

@krystyna93

This comment has been minimized.

Show comment
Hide comment
@krystyna93

krystyna93 Feb 25, 2018

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 ??

krystyna93 commented Feb 25, 2018

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

This comment has been minimized.

Show comment
Hide comment
@ko06

ko06 Mar 10, 2018

why new repository?

ko06 commented Mar 10, 2018

why new repository?

@caseyjhol

This comment has been minimized.

Show comment
Hide comment
@caseyjhol

caseyjhol Apr 19, 2018

Member

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

Member

caseyjhol commented Apr 19, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment