Support Bootstrap 4

[wesleycho]

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

We should investigate supporting this.

[icfantv]

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.

[wesleycho]

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

[icfantv]

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

[eduardoinnorway]

Any timeframe on this?

[icfantv]

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

[wesleycho]

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.

[felixfbecker]

Looking forward to this!

[wesleycho]

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

[eduardoinnorway]

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

[IdanCo]

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

[filipesilva]

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)

[wesleycho]

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

[filipesilva]

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.

[Gillardo]

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.

[filipesilva]

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?

[IdanCo]

@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 <li> as your nav-items, so you'll have to specify it.

[Gillardo]

+1 for a bs4 fork
On 16 Sep 2015 5:42 pm, "Idan Cohen" notifications@github.com wrote:

@filipesilva https://github.com/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;
}
}
}
}

—
Reply to this email directly or view it on GitHub
#4234 (comment)
.

[pkozlowski-opensource]

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

[filipesilva]

I only really meant fork as in 'collection of makeshift fixes', not a real fork, that would be silly :D

[jd-carroll]

I don't think any time should be spent getting Bootstrap 4 to work with Angular 1.x.... (IMO)
Rather, I think time would be better spent getting Bootstrap 4 + Angular 2.x in better working order. Or at the very least, a clear discussion should be had on where the priorities are and what will and will not be supported.

[filipesilva]

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.

[wesleycho]

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.

[wesleycho]

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.

[sbaechler]

Is anyone working on this in a fork? The network graph is to big to be displayed.

[ghost]

Any news on this?

[pkozlowski-opensource]

@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

[megahirt]

ui-bootstrap is important for our Angular 1.x projects and we intend to move to Bootstrap 4 soon.

@wesleycho you mention that

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.

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.

[IdanCo]

@megahirt I've used bootstrap 4 with the current version of angular-ui with very minimal tweaks - roughly few dozen lines of css.

I haven't mapped each one because we tweaked it as we went along, but all in all it was fairly easy and the outcome looked great.

[capesean]

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/
Bootstrap 4: https://jsfiddle.net/qLy7gk3f/3/

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.

[kukac7]

@capesean It does modal, just missing a show class of the modal and backdrop.

[capesean]

Thanks @kukac7 - you're spot on. I needed to add the Bootstrap 3 classes for .in, as Bootstrap 4 uses .show.

.fade.in {
    opacity: 1;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

[IdanCo]

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

[langdonx]

@IdanCo you still using 4.0 with ui-boostrap for AngularJS? can you share those few dozen lines of CSS you mentioned earlier?

[sannyjacobsson]

@IdanCo @langdonx
I would also be interested in your "modifications"

[IdanCo]

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.

[langdonx]

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

[IdanCo]

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!

[chan24092005]

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

[langdonx]

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

[kukac7]

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

[bettysteger]

@chan24092005 is this working for you?

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

[chan24092005]

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

[toddjcrane]

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

[bettysteger]

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

[michaeltheb]

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?

[bettysteger]

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

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

[cesarjr]

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.

[waltergammarota]

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

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

[georgeawg]

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

And this DEMO on PLNKR