Bootstrap 5 support

[maxokorokov]

Latest releases:

• ng-bootstrap 10 with Angular 12 and BS 4.5 (Stable)
• ng-bootstrap 11 with Angular 13 and BS 4.6 → 11.0.0
• ng-bootstrap 12 with Angular 13 and BS 5 → 12.0.0

---

This is an umbrella issue for adding Bootstrap 5 support to ng-bootstrap:

List of PRs related to the Bootstrap migration page sections

v5.0.0

• [x] accordion animation is broken, looks like height is not calculated correctly(?) (#4097)
• [x] demo site has the horizonal scrollbar (#4224)
• [x] datepicker header lost its color (#4096)
• [x] datepicker demo → range selection in a popup → unwanted input is visible (#4230)
• [x] demo site → all since/deprecated badges are not visible at all (#4223)
• [x] nav demo → basic usage → first/second padding to fix (#4228)
• [x] nav demo → dynamic tabs → crosses look strange (#4229)
• [x] table demo → full text search (#4231)
• [x] toast demo → management service is broken (toasts reappearing when navigating between pages)

v5.0.0-beta2:

• [ ] Popover : data-bs-popper="static" / "none" usage

v5.0.0-beta1:

• [x] Components : Positioning classes (#3963)
• [x] Utilities : Utility classes (#3978)
• [x] Utilities : Utilities(#3978)
• [x] Mixins : Nothing to do
• [x] Variables : Nothing to do
• [x] Sass : Nothing to do
• [x] New Utilities : Nothing to do
• [ ] Javascript : See popper 2 section (to be created)
• [x] Breadcrumb : Nothing to do
• [x] Toast : Possible use of the container created

v5.0.0-alpha3

• [x] Browser support : drop Edge legacy. Nothing to do? (maybe update browserslist?)
• Sass, reboot, buttons: nothing to be done

v5.0.0-alpha2:

• [x] Close Button : Alert(#3976), Toast(#3986)
• [x] Utilities : We could use fs- for our portal, PR in progress for the migration, (#3979)
• [ ] Sass,Docs, Layout, Reboot, Color, Forms, Badges, Buttons, Carousel & Pagination (will be fix with sr-only migration see below), Collapse, Dropdown: nothing to be done
• [x] Tooltip/Popover: We actually have no whiteList feature so no API naming migration to be done.
• [x] Toast : (#4032)
  • [x] Change the default timeout
  • [x] Remove the ngb-toasts container in favor of the new Bootstrap one
• [x] Helpers : Helpers(#3982).
• [ ] For Utilities : nothing to be done (but we could use some utilities to clean our portal)

v5.0.0-alpha1

• [ ] Update browser support list
• [x] Sass : Nothing to be done.
• [x] Javascript: Nothing to be done.
• [x] Color system : Nothing to be done.
• [ ] Grid and Layout : Nothing for the library, media is not used. But the layout of the portal can be impacted --> to be verified.
• [ ] Content Reboot : ol ul padding --> verify if changes is needed for the portal. It seems that text-* utils are not using on link so no migration needed to new utils link-*
• [ ] Typography : Links are hover by default (unless in component) (in btn-link underline is set by default --> migration needed for the portal if we want to keep old look).
• [ ] Accordion: is currently using btn-link --> are we happy with the new look? --> Here I think during refactory of the accordion to the new specific class we may no longer have the issue
• [ ] Buttons : We need to migrate to btn-check. Actually the directive may no longer be needed so it raised the question of keeping ex and link to BS docs / keeping an ex with angular forms...
• [ ] Carousel : There is a dark variant, but it's not possible to have a custom class on the carousel container

Notable changes

• [x] Add support for our existing Accordion and deprecate it
• [x] Removed JS Buttons plugin for a CSS-only solution → #4270
• [x] Popper 2 → #3579
• [ ] RTL → to investigate
• [ ] New accordion component (#3898)
• [ ] New offcanvas component
• [x] Dropping IE and legacy Edge support completely → https://v5.getbootstrap.com/docs/5.0/migration/#browser-support-1
• [x] Bootstrap Icons → to investigate
• [x] New look and feel for the website

[bbarry]

Does anyone know what missing edge features are the reason for the drop? Or is it just the reduction of testing costs for a browser almost nobody uses?

I mean if it is CSS related then sure ng-bootstrap dropping support for it is sensible. Does this project really use bootstrap js though?

Now that I think about it I am not sure if Edge 44 (the last legacy Edge was released May 27) is still in a default browserlist of "2 most recent major versions" (last 2 chromium based edge releases were July 16 and October 9).

[maxokorokov]

@bbarry see https://github.com/twbs/bootstrap/pull/31972 for the changes

[thedavidhoffman]

Any ETA on Bootstrap 5 release?

[delafer]

There is a main ng-bootstrap competitor and it's name ngx-bootstrap and I hope so...whey are already working to support a new BS version. new bootstrap version will be released anyway as soon as possible, Bootstrap 5 is already a beta version and where are a lot of youtube tutorials for BS5. Who takes the lead ? ngx-bootstrap or ng-bootstrap ? the one who will faster add a support for BS5. It is a obvious thing.

BS5 Migration GUIDE

[thedavidhoffman]

It's disappointing to hear no official response from this repository.

[MickL]

@delafer @thedavidhoffman I am also very much interested in having ng-boostrap support Bootstrap 5 asap but are you guys aware that this is an open source project with people working and contributing for free? And are you also aware that you could help contributing this project and make Bootstrap 5 support reality right now?

[ffes]

@maxokorokov How does this issue relate to #3667 (with exactly the same name)?

[jnizet]

Without even talking about release dates, what's the plan for Bootstrap 5 and Bootstrap 4 support?

• as soon as a version of ng-bootstrap comes out which depends on Bootstrap 5, then the previous versions depending on Bootstrap 4 are not maintained anymore (i.e. we should try to migrate to Bootstrap 5 ASAP)?
• as soon as a version of ng-bootstrap comes out which depends on Bootstrap 5, then the previous versions depending on Bootstrap 4 are maintained for X months (i.e. we have some time to migrate)? If so, what is the expected value of X?

[delafer]

@delafer @thedavidhoffman I am also very much interested in having ng-boostrap support Bootstrap 5 asap but are you guys aware that this is an open source project with people working and contributing for free? And are you also aware that you could help contributing this project and make Bootstrap 5 support reality right now?

of course I know that this is an open source project and people working for free and I don't claim, demand and request developers to add support for BS5. I only ask if there are such plans and confirm about the interest from people using this framework/library. Is it forbidden? Perhaps you instead of making advices and dislikes under my posts will support such project? That would be pretty constructive, wouldn't it?

[MickL]

@delafer Your comment was not constructive at all. Instead you are trying to make pressure as if this is a competition between the two libraries. There is no competition and no one to take the lead.

I only ask if there are such plans

If you read your comment closely then you will notice that you didnt even ask one question. And if you did then the question has already been asked.

[ayoubkhan558-zz]

Please add support for Bootstrap 5, as it works without jQuery. Its currently v5.0.0-beta1, But I think its right time to update now.

[bbarry]

@ayoubkhan558 this project doesn't use the bootstrap js (yet). You do not need jquery in your angular bootstrap project using this repo and there are no plans for that to ever become a requirement. Currently the maintainers are considering adding a dependency on popper2 (https://github.com/ng-bootstrap/ng-bootstrap/issues/3579) but I am not aware of any plans to utilize any of the bootstrap javascript.

The only reason you might have for taking a dependency on those libraries today would be to silence warnings from npm. I would strongly advise you to add a lint rule to ban $ and jQuery from your code though if you do take such a dependency (disclaimer: I'm just an observer here and contributor to various projects once in a while, not affiliated with this project).

[maxokorokov]

Hey,

1. We can't commit to any dates unfortunately. The work has started in the bootstrap5 branch, we're going through the BS5 migration guide, listing changes in this issue along with related PRs on ng-bootstrap side. Focused community contributions like #3976 are always welcome and CI is green on this branch.
2. The goal is to leave everything working "as-is" for the first 10 beta version (update classes, fix look-and-feel, etc.), then replace our positioning system with popper 2 positioning, then implement new accordion and offcanvas.
3. @jnizet if I understand correctly Bootstrap is following semver, so from our point of view it's just another major release. Like the Angular one. So nothing special for v4 support is planned at the moment. As we have two dependencies (Bootstrap and Angular), I think that even if fix something for Bootstrap 4.x, it will be in ng-bootstrap 9.x.x and only for Angular 11.

[delafer]

If you read your comment closely then you will notice that you didnt even ask one question. And if you did then the question has already been asked.

You have forgotten to like your own post this time. As I have already said, my aim was to confirm user interest. it is not prohibited.

@delafer Your comment was not constructive at all. Instead you are trying to make pressure as if this is a competition between the two libraries. There is no competition and no one to take the lead.

If there is no formal competition, this does not mean that the authors do not observe similar projects to make their own better. This is normal practice. I am very sorry for making non-constructive comments, but I am very glad that your constructive comments correcting such terrifying imbalance. And since I'm not constructive anyway, I would just like to thank the developers for their good job and excellent project.

[delafer]

Hey,

1. We can't commit to any dates unfortunately. The work has started in the `bootstrap5` branch, we're going through the BS5 migration guide, listing changes in this issue along with related PRs on ng-bootstrap side. Focused community contributions like #3976 are always welcome and CI is green on this branch.

2. The goal is to leave everything working "as-is" for the first `10 beta` version (update classes, fix look-and-feel, etc.), then replace our positioning system with popper 2 positioning, then implement new accordion and offcanvas.

3. @jnizet if I understand correctly Bootstrap is following semver, so from our point of view it's just another major release. Like the Angular one. So nothing special for `v4` support is planned at the moment. As we have two dependencies (Bootstrap and Angular), I think that even if fix something for `Bootstrap 4.x`, it will be in `ng-bootstrap 9.x.x` and only for `Angular 11`.

We have seen a new branch already. Good news! From my side, I will try to evaluate and test the new version during development, leaving appropriate feedback. Thanks a lot!

[MickL]

@maxjoehnk If most work is finished, but only a few things missing, I would very much appreciate a pre-alpha release so we could already work with BS5 :)

[imaksp]

3. @jnizet if I understand correctly Bootstrap is following semver, so from our point of view it's just another major release. Like the Angular one. So nothing special for v4 support is planned at the moment. As we have two dependencies (Bootstrap and Angular), I think that even if fix something for Bootstrap 4.x, it will be in ng-bootstrap 9.x.x and only for Angular 11.

@maxokorokov Hi, angular & bootstrap are different you should not force users who just want Angular 12 support to use bootstrap 5 & do the migration, new release with Angular 12 & bootstrap 4 is also needed.

[JustDoItSascha]

Hey! Is it possible to use the current working status of the bs5 status in a regular project? Would it be possible to just push the WIP status to a special tag in npm?

[gauravshah27]

Is there any update on this issue? I see 37 commits on the bs5 branch but don't see any beta tags. Is there a timeline on when we can have a library version based on bootstrap 5? - also noticed that it is still using bootstrap 5.0.0-beta2 whereas bootstrap has released 5.0.0-beta3. We have been using this library for a long time and are early adopters of bootstrap 5 and would like to know if there is an imminent release coming up based on bootstrap 5 beta 3. Thanks.

[Zwergenpunk]

Bootstrap 5 has landed ;) https://blog.getbootstrap.com/2021/05/05/bootstrap-5/

If you need some help, I could help if there is a somewhat clear path what todo

[bjornharvold]

Thank you for a great Angular project. You guys do AMAZING work!!!

Anyone asking for timeline did not read @maxokorokov post above.

Contribute or donate if you're in a hurry :-)

[maxokorokov]

FYI, there is a 11.0.0-beta.1 released with Bootstrap 5 support.

Some known issues:

• schematics are not working
• datepicker header lost its color (fixed by #4096)
• accordion animation seems broken (fixed by #4097)
• no support for new features yet (Offcanvas, Popper 2)

Please report any issues/open PRs at the dedicated bootstrap5 branch.

At the moment beta is still on Angualr 11, but it will change in future. A bit more info here → https://github.com/ng-bootstrap/ng-bootstrap/issues/4093#issuecomment-841091887

[lionel-meunier]

Do you know when the version with bootstrap 5 will be stable? Are you going to be doing the Bootstrap 5 and Angular 12 migration at the same time? Do you need help ?

[skythomp16]

Now that Angular v12 has been merged and is built with bootstrap 4.5, will the 11.x.x beta branch now be updated to Angular 12 w/ bootstrap 5?

[gloriousjob]

Now that Angular v12 has been merged and is built with bootstrap 4.5, will the 11.x.x beta branch now be updated to Angular 12 w/ bootstrap 5?

The comment above answers this: https://github.com/ng-bootstrap/ng-bootstrap/issues/3899#issuecomment-841100503 by pointing to another comment: https://github.com/ng-bootstrap/ng-bootstrap/issues/4093#issuecomment-841091887

However, let things happen in their time. There's a quite a few boxes that still need to be worked listed in the top post.

[Zwergenpunk]

There is some activity in the bootstrap 5 branch, so I assume the release is near ;)

[maxokorokov]

FYI, 11.0.0-beta.2 release moved to Angular 12 and couple of issues were fixed.

Still before for the final 11.0.0 we'd like to at least:

• move to Popper 2 instead of homemade positioning
• ensure that all is fine with RTL support

Offcanvas and new directive-based Accordion will be added in feature 11.x releases

[Quraian]

@maxokorokov If you need any help from an RTL language reader, please don't hesitate to contact me :)

[Hokseed]

Hello, I dont understand this line : "Dropdown: nothing to be done". I'm on Angular 12, ng bootstrap 11 (beta) and bootstrap 5 and I cant make dropdowns work. Is this normal, should I wait further update of ng-bootstrap ?

[fbasso]

Hi @Hokseed, this comment has been written during the migration time, it matched the corresponding Bootstrap section at the time of alphas / betas on their side, and probably there was nothing to be done on ngBootstrap 5 in the v5.0.0-alpha2 for the dropdown.

It's a little bit confusing now the Bootstrap sections are gone for the alphas / betas.

So I would say the dropdowns should work on your side, if you changed the placements left / right to start / end as Bootstrap. If you see something wrong, don't hesitate to open an issue with a minimal stackblitz.