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

• accordion animation is broken, looks like height is not calculated correctly(?) (fix(accordion): broken collapse animation #4097)
• demo site has the horizonal scrollbar (demo: fixing -15px margins (which removes horizontal scroll bar) #4224)
• datepicker header lost its color (fix(datepicker): header colors #4096)
• datepicker demo → range selection in a popup → unwanted input is visible (demo: unexpected input in range selection in a popup #4230)
• demo site → all since/deprecated badges are not visible at all (demo: replacing badge-info by bg-info (and similar classes) #4223)
• nav demo → basic usage → first/second padding to fix (demo: removing custom padding in overview alerts #4228)
• nav demo → dynamic tabs → crosses look strange (demo: fixing display of dynamic navs #4229)
• table demo → full text search (demo: reducing width of full text search field in table examples #4231)
• 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:

• Components : Positioning classes (Bs5 positioning classes (BREAKING CHANGE) #3963)
• Utilities : Utility classes (Migration/bs5utils #3978)
• Utilities : Utilities(Migration/bs5utils #3978)
• Mixins : Nothing to do
• Variables : Nothing to do
• Sass : Nothing to do
• New Utilities : Nothing to do
• Javascript : See popper 2 section (to be created)
• Breadcrumb : Nothing to do
• Toast : Possible use of the container created

v5.0.0-alpha3

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

v5.0.0-alpha2:

• Close Button : Alert(fix(alert): new css class for close button #3976), Toast(fix(toast): new css class for btn-close #3986)
• Utilities : We could use fs- for our portal, PR in progress for the migration, (fix: renamed .font-weight- utilities as .fw- #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
• Tooltip/Popover: We actually have no whiteList feature so no API naming migration to be done.
• Toast : (fix(toast): default delay and toasts container removal #4032)
  • Change the default timeout
  • Remove the ngb-toasts container in favor of the new Bootstrap one
• Helpers : Helpers(fix: renamed .sr-only to .visually-hidden #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
• Sass : Nothing to be done.
• Javascript: Nothing to be done.
• 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

• Add support for our existing Accordion and deprecate it
• Removed JS Buttons plugin for a CSS-only solution → docs(buttons): mark button directives as deprecated #4270
• Popper 2 → Add Popper 2 as a dependency #3579
• RTL → to investigate
• New accordion component (New Accordion in Bootstrap 5 #3898)
• New offcanvas component
• Dropping IE and legacy Edge support completely → https://v5.getbootstrap.com/docs/5.0/migration/#browser-support-1
• Bootstrap Icons → to investigate
• 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 twbs/bootstrap#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 (#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 fix(alert): new css class for close button #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 fix(datepicker): header colors #4096)
• accordion animation seems broken (fixed by fix(accordion): broken collapse animation #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 → #4093 (comment)

[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 ?

[lucas-labs]

Hi! I'll start working on an offcanvas implementation. Are you guys already working on it? Are you accepting PRs fot this task?

[OrangeDog]

The NPM page still says that 11.0.0-beta.x is for Angular 11, not Angular 12.

[vkirienko]

I understand that people have day jobs and etc. but given current state of affairs (even with provided PRs) it seems like it is time to jump the ship.

@maxokorokov, I think honest assessment of your current abilities/willingness to continue development/need for help will be beneficial for everyone who is using this great package. Thank you for your great work all these years.

[shipwreckedinanoffice]

This does not move at the speed anymore we require for dependencies in our product. We are moving on. Thank you for your efforts until now!

[Zwergenpunk]

There were some action in the PR in the last days/weeks #4129
I think when this pr is resolved, a stable version is on the horizon. At least that's what I'm hoping for ;)
Thanks @fbasso =)

[terencehonles]

@maxokorokov the release https://github.com/ng-bootstrap/ng-bootstrap/releases/tag/12.0.0-beta.3 should probably be marked as a pre-release (this probably applies to the 11x pre-releases too)

[suer85]

What is left to do here before this can be released?

[GarethBlain]

What is left to do here before this can be released?

If you look at the top of the issue you can see all the tasks and the completed ones are ticked.

[suer85]

What is left to do here before this can be released?

If you look at the top of the issue you can see all the tasks and the completed ones are ticked.

Only demo site things if I understand correctly?

[GarethBlain]

Only demo site things if I understand correctly?

I read it as all the un-ticked stuff is still not complete regardless of the version it was meant to be released on. So everything unticked at the top still needs doing. The Demo ones at the top were just the lowest priority and intended to be done last in the final V5.0.0 release after all the BETAs have gone out. 🙂
(So like 26 odd left to do. A lot are important)

[markwilk]

Any thoughts on Bootstrap 5 support being ready for release in the next 5 months? Porting a large-ish AngularJS project to Angular right now and would really like to use Bootstrap 5 (and ng-bootstrap). Happy to work with the beta during development of the port, but won't be able to release our app as long as ng-bootstrap is beta.

Thanks for your efforts!

[suer85]

Any thoughts on Bootstrap 5 support being ready for release in the next 5 months? Porting a large-ish AngularJS project to Angular right now and would really like to use Bootstrap 5 (and ng-bootstrap). Happy to work with the beta during development of the port, but won't be able to release our app as long as ng-bootstrap is beta.

Thanks for your efforts!

We are on the same journey so that was also why I was wondering :)

[fbasso]

Hi !

It's true that we were not very active these last weeks, as we are a little bit overloaded in different tasks.

To give a status, the migration to Bootstrap 5 should be finished (at least for the core). We need to check the points given in this issue (mainly check the demo site). It is always hard to give a date, but finishing this task is main priority on this project, I hope we will be able to do a release soon.

[jecraig]

Hey all,

Any update on bringing this to a close? Are we thinking days, weeks, months?

[terencehonles]

Since there hasn't been any comments or updates here, I just wanted to make people aware in case they weren't that there has been a bit of activity on the BS5 branch.

So while there hasn't been a response it doesn't mean the question is "completely" unanswered or that the project is not being maintained. I've not made any changes on the branch, but I was wondering about ^^^ and looked at the branch and figured I comment about its activity was probably in order.

[fbasso]

Yes, sorry for the delay of this answer.

We are always cautious when giving dates (we don't want to give dates that we can't finally keep), but we are actively preparing the release. So we hope it should come soon.

[internalsystemerror]

I've just seen the 12.0.0 release. Congratulations and well done to all involved!

[maxokorokov]

Closing with only #3898 left as a separate non-breaking feature