Support Bootstrap 4

The alpha preview is now live as of today, as per announcement here.

We should investigate supporting this.

supporting the alpha or starting to support BS4 in general?

will need different templates as it sounds like panels have been replaced (don't think we use wells and thumbnails.

This won't be for a while, hence the 2.0 milestone :)

sorry, i meant supporting BS 4 in general...not starting to support it.

Any timeframe on this?

@eduardoinnorway

@eduardoinnorway it's probably going to be a while. some of us only just found out about the alpha release yesterday (and it may have only been released yesterday).

No timeframe currently - given that it has only just reached an alpha state, it will probably not be for at least an year is my guess.

Looking forward to this!

Please do not +1 an issue, it does not add any useful information.

@wesleycho

@wesleycho I would like to +1 your answer to @Gillardo ...

On first glance BS 4.0 has a very good backward compatability. Preliminary testings of BS 4 with angular-ui shows suprisingly satosfactory results!

I'm actually rewriting my company website in bs4 right now, and using angular-ui bootstrap with it mostly for modals.

Haven't had any issues to be honest (apart for the progress html tag, but that's not related to bs4)

The progress tag issue will be fully fixed by 1.0 - we've started namespacing the components & introducing deprecation notices

Yeah saw mentions of that on #4255. Actually, now that I'm trying the progressbar directive itself, it seems like it does not work on BS4.

Sorry to disappoint you, my previous project was merged off and i no longer have access to the code base. On the bright side, my new project also consists of BS4 and NG1, so i'll be happy to share any new trick i learn.

I've since added the definition for .caret but that's not directly used by ui-bootstrap (just used in ui-bootstrap examples).

A new library that will offer angularJS (Angular 1.x) components based on Bootstrap 4 was hatched this weekend. Allow me to introduce -

ng1bs4

Tomorrow's Library with Yesterday's Framework

It's just a youngling now, and I'll do my best to add as many components as possible during the coming weeks, but I can't do it alone. ANY help that any of you can offer will be highly appreciated. Naturally we're in great need for new components, but also feel free to pitch ideas for components, features or anything else you think might make this new library awesome.

And for the bootstrap ui guys - hope i'm not breaking any rules or stepping on any toes with this shameless promotion, please give a chance to a chicklet library.

Thanks, and keep rocking in style!

bootstrap 4 dropdown uses .show class on the parent element when the dropdown is opened, while v3 use .open.

You can add this to you app's config block to change the open class:

angular.module('MyApp', [ui.bootstrap])
  .config(function (uibDropdownConfig) {
    uibDropdownConfig.openClass = 'show';
  });

UPDATE: dependency name is ui.bootstrap

@chan24092005

@chan24092005 nice! didn't know you could config the class. it's a shame uibPaginationConfig doesn't allow the same configuration. =/

@IdanCo's solution is coming along really nicely, btw. It's definitely worth checking out.

if you can set a openClass everywhere, it would be good. 😃

@chan24092005

@chan24092005 is this working for you?

I found that .dropdown-menu would also need a show class :(

@IpsBettry yes it works. Refer to https://github.com/angular-ui/bootstrap/tree/master/src/dropdown#additional-settings-uibdropdownconfig. Just added uibDropdownConfig.openClass = 'show'; to my app's config block and then it works.

@wesleycho

@wesleycho If you, or the powers that be, create a branch for bootstrap4, I'll write and submit the code via PRs.

@chan24092005

@chan24092005 doesn't work for me, just adds the show class to .dropdown and not to .dropdown-menu .. I am using bootstrap@4.0.0-beta.2

https://getbootstrap.com/docs/4.0/components/dropdowns/

hello, I am using bootstrap@4.0.0-beta.3
I have the same problem as @lpsBetty the .show class is added to the .dropdown element and not the .dropdown-menu element

are there any solutions?

@michaeltheb

@michaeltheb I added this in my CSS as temporary fix:

.dropdown.show .dropdown-menu { 
  display: block;
}

Hi! Does anyone know if there is some plan about an official upgrade to Bootstrap 4?

I understand that Angular 1.x is not more important. But at this moment our project is using it and the effort to migrate to Angular 2 is huge.

BS4 is pretty good and UI Bootstrap is very important to Angular 1.x projects.

If the community help with money... Is there any chance of this project to be updated to BS4?

If it is viable... Do you have some idea about the necessary money for that?

Thank you and I beg my pardon if I'm not being polite. It's not my intention.

I am using this temp fix, with the latest bootstrap:

.dropdown.open .dropdown-menu { display: block; }

See this question on Stackoverflow - AngularJS UI Bootstrap - Dropdown button with Bootstrap 4

And this DEMO on PLNKR

Navigation Menu

Repository navigation

Support Bootstrap 4 #4234

25 remaining items

ng1bs4

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support Bootstrap 4 #4234

Description

Activity

icfantv commented on Aug 19, 2015

wesleycho commented on Aug 19, 2015

icfantv commented on Aug 19, 2015

eduardoinnorway commented on Aug 20, 2015

icfantv commented on Aug 20, 2015

wesleycho commented on Aug 20, 2015

felixfbecker commented on Aug 25, 2015

wesleycho commented on Sep 9, 2015

eduardoinnorway commented on Sep 9, 2015

IdanCo commented on Sep 10, 2015

filipesilva commented on Sep 16, 2015

wesleycho commented on Sep 16, 2015

filipesilva commented on Sep 16, 2015

25 remaining items

IdanCo commented on Jun 1, 2017

langdonx commented on Jun 1, 2017

IdanCo commented on Jul 14, 2017

ng1bs4

chan24092005 commented on Aug 2, 2017

langdonx commented on Aug 2, 2017

kukac7 commented on Aug 3, 2017

bettysteger commented on Dec 13, 2017

chan24092005 commented on Dec 13, 2017

toddjcrane commented on Jan 16, 2018

bettysteger commented on Jan 17, 2018

michaeltheb commented on Jan 23, 2018

bettysteger commented on Feb 2, 2018

cesarjr commented on Mar 29, 2018

waltergammarota commented on Apr 30, 2018

georgeawg commented on Jun 24, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions