Skip to content
Angular powered Bootstrap
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: drop plunker support (#2736) Sep 21, 2018
demo docs: add positioning overview (#3118) May 16, 2019
e2e-app fix(timepicker): fix tab navigation & handling keyboard arrows (#2053) May 13, 2019
misc chore: extract/display source documentation comments as markdown Apr 4, 2019
scripts chore: bump saucelabs versions and timeouts Apr 27, 2018
src docs: add positioning overview (#3118) May 16, 2019
ssr-app test: add SSR testing application to CI (#3032) Feb 28, 2019
.clang-format chore: format files with clang Sep 29, 2015
.editorconfig chore: remove end_of_line at editorconfig Nov 4, 2016
.gitattributes chore: normalize line endings Mar 31, 2016
.gitignore chore(demos): demos structure update for easier Stackblitzes generation Apr 1, 2019
.travis.yml chore: upgrade 'gulp' package to be able to use node 10 LTS for builds ( May 16, 2019
CHANGELOG.md chore: release 4.1.3 May 13, 2019
CODE_OF_CONDUCT.md chore(coc): add Code of Conduct Sep 30, 2015
CONTRIBUTING.md docs: fix 'Code conventions' link in contribution doc (#3155) Apr 29, 2019
DEVELOPER.md docs: fix demo server port in the DEVELOPER.md (#3114) Apr 9, 2019
LICENSE docs(LICENSE): update copyright year to 2018 Jan 24, 2018
README.md docs: update readme and installation instructions (#3045) Mar 13, 2019
angular.json chore: check for focused tests in e2e application (#3159) Apr 30, 2019
gulpfile.js chore: remove gulp tasks from the releasing process (#3053) Mar 13, 2019
package.json chore: upgrade 'gulp' package to be able to use node 10 LTS for builds ( May 16, 2019
tsconfig.json chore: use es2015 lib version in tsconfig.json (#3175) May 6, 2019
tslint.json fix(datepicker): fix 'util' import and use 'isInteger' (#2738) Sep 21, 2018
yarn.lock chore: upgrade 'gulp' package to be able to use node 10 LTS for builds ( May 16, 2019

README.md

NG Bootstrap - Angular powered Bootstrap widgets

npm version Build Status codecov devDependency Status Sauce Test Status

Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.

Please check our demo site and the list of issues to see all the things we are working on. Feel free to make comments there.

Table of Contents

Demo

Please check all components we have in action at https://ng-bootstrap.github.io

Dependencies

The only two dependencies are Angular and Bootstrap 4 CSS. Here is the list of minimal required versions:

ng-bootstrap Angular Bootstrap CSS
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

Installation

You need to have an Angular project with the supported Angular version. We strongly recommend using Angular CLI for this.

You also need to add Bootstrap 4 CSS to your application by using your preferred way (it really depends on the setup you're using). Ex. for Angular CLI you can get Bootstrap from npm and update your angular.json with something like:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Please note that you need only CSS and should not add other JavaScript dependencies like bootstrap.js, jQuery or popper.js as ng-bootstrap's goal is to completely replace them.

After installing the above dependencies, install ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import our main module:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

Alternatively you could only import modules with components you need, ex. pagination and alert. The resulting bundle will be smaller in this case.

import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbPaginationModule, NgbAlertModule, ...],
  ...
})
export class YourAppModule {
}

Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive. See Angular browser support and Bootstrap browser support for more details, but on the high-level it should be something like:

  • Chrome (45+)
  • Firefox (40+)
  • IE (10+)
  • Edge (20+)
  • Safari (7+)

Getting help

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 maintainers are looking at questions tagged with ng-bootstrap.

StackOverflow is a much better place to ask questions since:

  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question / answer might help someone else
  • SO voting system assures that the best answers are prominently visible.

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.

You think you've found a bug?

We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.

We ask you to respect two things:

  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, ng-bootstrap and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz (you can start by forking one from our demo page)

A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.

Please not that we will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. We'll mark the issue as non-actionable without it and close if not heard from the reporter.

Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.

Contributing to the project

Please check the DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.

Code of conduct

Please take a moment and read our Code of Conduct

You can’t perform that action at this time.