11 thoughts on “ng-bootstrap doesn’t work without adding css file to index.html

  1. They did mention the required dependencies are:

    • Angular
    • Bootstrap CSS

    So we can install Bootstrap from node then add them on .angular-cli.json or global styles.css. I myself include them on global styles.css by putting it like here:

    @import '~bootstrap/dist/css/bootstrap.css';

  2. @pkozlowski-opensource How is it documented in the getting started guide?
    The getting started guide says those three things:

    1. After installing the above dependencies, install ng-bootstrap
    2. Once installed you need to import our main module.
    3. The only remaining part is to list the imported module in your root module and any additional application modules that make use of the components in this library.

    Where does it say something about including the bootstrap css?

  3. @adamk33n3r Yes, Step 1 mentions installation of Bootstrap CSS. And at the linked Bootstrap 4.0 site one can also find npm and gem commands to install bootstrap.

    But, Step 1 doesn’t mention including Bootstrap CSS in your project, and that’s what this issue is about. There’s no point in the guide where it says something along the lines: “…and then include the bootstrap.css to your styles.css like this…”.

    It might be obvious to advanced users but it confuses / slows down beginners.

  4. I feel like that is the job of Bootstrap to give examples on how to ‘install’ it. There is a plethora of ways one can have bootstrap css loaded in their browser.

    I don’t think adding CSS to your project is an ‘advanced’ activity.

  5. I don’t think it’s a question of whether its an ‘advanced’ activity or not, as this is a completely subjective opinion. For me, it’s rather a question of whether the activity (loading bootstrap in your browser) is necessary for using ng-bootstrap. If it’s necessary, then it should also be noted in the getting-started guide.

    My proposal would be to add this sentence in the getting-started guide, section “Should I add bootstrap.js or bootstrap.min.js to my project?” : “…. However, you should add and include bootstrap.css into your project.”

  6. It’s blatently obvious that bootstrap css should be required when using ng-bootstrap unless for some reason they haven’t already built it in. Bootstrap is bootstrap whether its css or other stuff.

  7. Problem could be solved but just adding more information to make sure you include the .css. Honestly the rest of the documentation is “Blatantly” obvious on how to use the package… This part isn’t as such. As some NPM packages include the base requirements for you.

    So continue to argue a point .. just to be lazy…. or . make people’s life easier and just include the 1 extra sentence.

  8. Great job and nice library. Thanks for your hard work guys.

    +1 for adding the css/scss package installation to the documentation. As mentioned earlier quite a lot of Bootstrap related package in JavaScript ecosystem automatically add Bootstrap 4 scss packages, so it is not so obvious. 😉 I suppose a dedicated schematics would solve this problem automatically.

    $ yarn add bootstrap
    $ echo '@import "~bootstrap";' >> src/styles.scss
    $ yarn add @ng-bootstrap/ng-bootstrap