-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Support Bootstrap 4 #4234
Comments
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 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 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 |
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 |
Rewriting our website at the moment, had a couple issues with tabset putting css in wrong places and buttons (btn-default instead of btn-secondary). I just wrote a simple gulp file that fixes my issues when i build my js files, happy to share if needed. |
Haven't yet ran into stuff that grave, but wouldn't it be easier to make a fork of this repo and fixing it there for the time being? |
@filipesilva +1 Not sure if it's worth forking, but i'm creating allot of little 'ports' to allow angular-ui to work with BS4 seamlessly. for example, this one solves all the tabs issues - ul.nav-tabs {
li {
@extend .nav-item;
a {
@extend .nav-link;
}
&.active {
a {
@extend .active;
}
}
}
} btw, this 'port' is required because one of the major changes in BS4, is that now it's element agnostic. meaning it does'nt assume you'll use |
+1 for a bs4 fork
|
Guys, I'm kind of shocked to see so many people saying +1 for a fork... Do you mean to fork the entire project? Why not centralize the effort here??? We could definitively create a bs4-specific branch so people really carrying about bs4 support could send PRs. The interesting topic to discuss would be also ng2 support and its prioritization vs. other efforts... |
I only really meant fork as in 'collection of makeshift fixes', not a real fork, that would be silly :D |
I don't think any time should be spent getting Bootstrap 4 to work with Angular 1.x.... (IMO) |
Well angular2 isn't out yet, and when it is adoption is bound to be incremental (and in some cases not at all). I don't foresee that people angular1 use will stop in the next few years so it's still a very high value proposition to have bootstrap4 support for it. |
We will look into it when it matures some more and other important tasks get addressed. We will still be maintaining this library when Angular 2 comes out - the Angular 2 version will support Bootstrap 4 out of the box though. It does not really make sense to support Bootstrap 4 until it reaches beta for UI Bootstrap IMO, because this is a more mature library with a guarantee of Bootstrap 3 support. Any harmless changes in the library to accommodate both are welcomed though. |
So after prior discussion, Bootstrap 4 support will be only in the Angular 2 version - we do not have the bandwidth for ng1 support of Bootstrap 4. Thankfully, most of the functionality should be intact if using UI Bootstrap with appropriate tweaks, so this is doable if a user wants to use Bootstrap 4 with this library. |
Is anyone working on this in a fork? The network graph is to big to be displayed. |
Any news on this? |
@johannds on our side (angular-ui/bootstrap team) we are working full speed on the Bootstrap 4 implementation for Angular 2 here: https://ng-bootstrap.github.io |
ui-bootstrap is important for our Angular 1.x projects and we intend to move to Bootstrap 4 soon. @wesleycho you mention that
Can you describe roughly what tweaks would be needed to make bootstrap 4 work with the latest ui-bootstrap? Are you speaking primarily about bootstrap 3 -> 4 class name migrations? Thanks to anyone who can help to shed light on what's needed to make this work. |
I'm using Bootstrap 4 with Angular UI but have hit an issue with modals. Here are two simplified fiddles: Bootstrap 3: https://jsfiddle.net/qLy7gk3f/4/ The modal just doesn't show in Bootstrap 4. All other code is identical. Is Bootstrap 4 now incompatible with Angular UI? Some of the comments above suggest it's workable. |
@capesean It does modal, just missing a |
Thanks @kukac7 - you're spot on. I needed to add the Bootstrap 3 classes for
|
Another possibility is to do some code change - --- src/modal/modal.js (revision a2dee1bdeb2af58cc5b85cc518d9f85bcea222ec)
+++ src/modal/modal.js (revision )
@@ -428,7 +428,7 @@
'class': 'modal-backdrop',
'ng-style': '{\'z-index\': 1040 + (index && 1 || 0) + index*10}',
'uib-modal-animation-class': 'fade',
- 'modal-in-class': 'in'
+ 'modal-in-class': 'show'
});
if (modal.backdropClass) {
backdropDomEl.addClass(modal.backdropClass);
@@ -477,7 +477,7 @@
'ng-style': '{\'z-index\': 1050 + $$topModalIndex*10, display: \'block\'}',
'tabindex': -1,
'uib-modal-animation-class': 'fade',
- 'modal-in-class': 'in'
+ 'modal-in-class': 'show'
}).append(content);
if (modal.windowClass) {
angularDomEl.addClass(modal.windowClass); |
@IdanCo you still using 4.0 with ui-boostrap for AngularJS? can you share those few dozen lines of CSS you mentioned earlier? |
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 |
A new library that will offer angularJS (Angular 1.x) components based on Bootstrap 4 was hatched this weekend. Allow me to introduce - ng1bs4Tomorrow'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 You can add this to you app's config block to change the open class:
UPDATE: dependency name is ui.bootstrap |
@chan24092005 nice! didn't know you could config the class. it's a shame @IdanCo's solution is coming along really nicely, btw. It's definitely worth checking out. |
if you can set a |
@chan24092005 is this working for you? I found that .dropdown-menu would also need a |
@IpsBettry yes it works. Refer to https://github.com/angular-ui/bootstrap/tree/master/src/dropdown#additional-settings-uibdropdownconfig. Just added |
@wesleycho If you, or the powers that be, create a branch for bootstrap4, I'll write and submit the code via PRs. |
@chan24092005 doesn't work for me, just adds the |
hello, I am using [email protected] are there any solutions? |
@michaeltheb I added this in my CSS as temporary fix:
|
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:
|
See this question on Stackoverflow - AngularJS UI Bootstrap - Dropdown button with Bootstrap 4 And this DEMO on PLNKR |
The alpha preview is now live as of today, as per announcement here.
We should investigate supporting this.
The text was updated successfully, but these errors were encountered: