ui.bootstrap.accordion not working with Bootstrap v4

Question

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:

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?

WebDevBooster · Accepted Answer · 2018-02-25 17:20:18Z

2

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

edited Feb 25, 2018 at 17:20

answered Feb 25, 2018 at 17:17

WebDevBooster

15k9 gold badges69 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrian Pop Over a year ago

I know they are not backwards compatible, but the question remains: if I use v4 and want the accordion, what do I do?

Adrian Pop Over a year ago

I knew about collapse, but I thought there might be something from another library, as uib-accordion is. Thanks!

Collectives™ on Stack Overflow

ui.bootstrap.accordion not working with Bootstrap v4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related