Ng1bs4 NPM | npm.io

ng1bs4

Tomorrow's Library with Yesterday's Framework

A Library of AngularJS Components Implementing Boostrap 4

Just because you use AngularJS and not Angular like all the cool kids, doesn't mean you can't look good!

Enjoy the robust styling architecture of the new Bootstrap 4, while still using good ol' AngularJS.

See it in action at https://idanco.github.io/ng1bs4/.

Alternatives

Still used to Bootstrap 3.x? Use UI Bootstrap
Finally upgraded to Angular? Use NG Bootstrap
None of the above? You belong with us!

Install

Install bootstrap 4 and import it's JS and styling into your project.

Install ng1bs4

npm install ng1bs4 --save

Import ng1bs4 module and styling into your project

import ng1bs4 from 'ng1bs4';
import 'ng1bs4/dist/import.css'

Inject ng1bs4 module into your app

angular
  .module('myApp', [
    ...,
    ng1bs4
  ]);

Test by adding this directive anywhere in your markup

<ngbs-test></ngbs-test>

for more details checkout a sample project with angularJS, bootstrap4 and ng1bs4.

Philosophy

No Styling. We believe you should be able to customize as much as you want, and with Bootstrap 4 theming is easy! That's why all components include minimal styling and rely heavily on Bootstrap's native classes and variables.

Simple Code. We strive to keep all components as simple yet robust as possible. Hence, rewiring them to fit your needs should be easy peasy.

Create New Components

Development is easy and fun! Just follow these simple steps to get started:

Have at least Node.js 6.x installed
Fork the main repository
Git clone the forked repository
Run the following commands
1. npm i
2. npm run serve
Open http://localhost:8080 in a browser
Start making amazing changes!

Create new components easily with our generator:

npm run new

And follow the on-screen instructions. Created a cool component? Make a pull request and contribute it back.

Contribute

§!@#$%^ HELP NEEDED! ^%$#@!§

We're a new open source project, trying to make our way in this crazy javascript world. There's tons of work to be done and any effort will be appreciated.

You can help by: