ng_bootstrap 1.2.0 icon indicating copy to clipboard operation
ng_bootstrap: ^1.2.0 copied to clipboard


Angular 2 and Bootstrap 4

ng_bootstrap #

Join the chat

Usage & Demo

Getting Started #

1. Create a new angular2-dart app:

2. Add ng_bootstrap to pubspect.yaml:

    ng_bootstrap: any

3. Add css stylesheet link to index.html:

    <link rel="stylesheet" href="packages/ng_bootstrap/all.css">

4. Add needed ng_bootstrap directives to your components:

import 'package:ng_bootstrap/ng_bootstrap.dart';

    // ...
    directives: const [bsDirectives])

Customize Styles - Create Custom Themes #

To customize default styles to create custom themes based on ng_bootstrap theme, the best option is to create an scss file that imports the package:ng_bootstrap/all.scss file, for example:

// variables should be set before importing default theme
$brand-primary: red !important;

// you could also import a custom variables theme if you prefer
// but it should be done before importing default theme
@import 'path/to/_my-variables';

@import 'package:ng_bootstrap/all';

Then in your index.html file change the link tag to point to the new theme.

    <link rel="stylesheet" href="path/to/my-theme.css">

Components #

Contribution #

Create new issues

Fork me


  • [ ] support animation (in progress...)