Search code examples
angularjstwitter-bootstrapangular-ui-bootstrapbootstrap-4angular-ui

ui.bootstrap.accordion not working with Bootstrap v4

I tried using the accordion from https://angular-ui.github.io/bootstrap/#!#accordion and after hours of trying and not getting the desired results, I changed the bootstrap version from 4.0.0 to 3.0.0 and everything showed up perfectly. With v4, I get this:

enter image description here

Only some clickable text, like a href tag. By clicking on it, sometimes it shows the content, sometimes not. I used this: 

<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="mt-1" heading="Online friends" is-open="true">
</div>
<div uib-accordion-group class="mt-1" heading="Offline friends" is-open="false">
</div>
</uib-accordion>

Additional info:

  • angular version: 1.6.4
  • ui-bootstrap-tpls 2.5.0
  • jquery 3.2.1
  • bootstrap 4.0.0

What could be the problem?

Solution

  • What could be the problem?

    Bootstrap 4 is almost a complete rewrite of Bootstrap 3.

    So, the two versions are completely incompatible with each other.

    You cannot use Bootstrap 3 code with Bootstrap 4 css and vice versa.

    Reference:

    https://getbootstrap.com/docs/4.0/migration/

    Bootstrap 4 accordion docs:

    https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example