The only required dependencies are Angular, Bootstrap CSS and Popper.
Angular and Popper are explicitly listed as peer dependencies, while Bootstrap is not, as they don't release their CSS separately. The table below simply lists the exact version of Bootstrap CSS against which the corresponding versions of ng-bootstrap are tested.
ng-bootstrap | Angular | Bootstrap CSS | Popper |
---|---|---|---|
1.x.x | ^5.0.2 | 4.0.0 | |
2.x.x | ^6.0.0 | 4.0.0 | |
3.x.x | ^6.1.0 | 4.0.0 | |
4.x.x | ^7.0.0 | 4.0.0 | |
5.x.x | ^8.0.0 | 4.3.1 | |
6.x.x | ^9.0.0 | 4.4.1 | |
7.x.x, 8.x.x | ^10.0.0 | 4.5.0 | |
9.x.x | ^11.0.0 | 4.5.0 | |
10.x.x | ^12.0.0 | 4.5.0 | |
11.x.x | ^13.0.0 | 4.6.0 | |
12.x.x | ^13.0.0 | 5.0.0 | ^2.10.2 |
13.x.x | ^14.1.0 | 5.2.0 | ^2.10.2 |
14.x.x | ^15.0.0 | 5.2.3 | ^2.11.6 |
15.x.x | ^16.0.0 | 5.2.3 | ^2.11.6 |
16.x.x | ^17.0.0 | 5.3.2 | ^2.11.8 |
When bumping ng-bootstrap major version, make sure to check all the breaking changes listed in the changelog. We try to minimize them as much as possible.
We strongly recommend using Angular CLI for setting up a new project. If you have an Angular CLI project, you could simply use our schematics to add ng-bootstrap library to it.
Just run the following:
It will install ng-bootstrap for the default application specified in your angular.json
. If you have
multiple projects and you want to target a specific application, you could specify the --project
option
If you prefer not to use schematics or want to add ng-bootstrap to an older project, you'll need to do the following:
bootstrap
, @popperjs/core
and
@ng-bootstrap/ng-bootstrap
dependencies from npm
@angular/localize
polyfillNgbModule
, or any other component module like NgbPaginationModule
, or directly
import the ng-bootstrap components and directives that you use, which are standalone.
Click here to {{ instructionsCollapsed ? 'show' : 'hide' }} detailed instructions
You need to add Bootstrap CSS to your application using your preferred way (see Bootstrap instructions).
For example you could install Bootstrap from npm
and add Bootstrap CSS or SCSS to your project.
In case you're using CSS, you just need to add Bootstrap styles to your angular.json
configuration:
In case you're using SCSS, please add this to your styles.scss
directly:
Should I add Bootstrap JavaScript files to my project?
No, adding bootstrap.js
or bootstrap.min.js
is not necessary.
The goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery. It is not necessary and might interfere with ng-bootstrap code.
Note that starting with ng-bootstrap 12 (with bootstrap 5 support), @popperjs/core
is
defined as a peer dependency, so be sure to include it in your package.json.
Install the @angular/localize
polyfill:
See more details in the official documentation.
Install the @popperjs/core
dependency:
Installing the library itself from npm is simply doing
Once installed you can import our main module, and you're good to go
Instead of importing the whole library with NgbModule
, you could only import modules with components
you need, ex. pagination and alert.
The resulting bundle will be smaller in this case.
Or, since all our components and directives are standalone, you can directly import them in your modules or in your standalone components.
We strive to support the same browsers and versions as supported by both Bootstrap and Angular, whichever is more restrictive. Check browser support notes for Angular and Bootstrap.
Our code is automatically tested on all supported browsers.
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and
feature requests. You've got much better chances of getting your question answered on
StackOverflow where the
community at large are looking at questions tagged with ng-bootstrap
.
StackOverflow is a much better place to ask questions since:
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
We are always looking for the quality contributions! Please check the Contributing doc for contribution guidelines. Additionally, for local building and testing information, please see our Developer's Guide.
Please take a moment to read our Code of Conduct.