ng-bootstrap not working in angular 4
I don't see any ng-bootstrap component in your code! I think you are looking for bootstrap css, which is also a prerequisite for ng-bootstrap.
Add these lines in index.html
between the <head></head>
tag:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
In the page you mentioned, ng-bootstrap mentions bootstrap CSS as a dependency. So that's loaded separately.
If you are using Angular CLI to create your application, you can follow this official guide to add it,
Update:
As mentioned in the comment, adding the CSS to styles
in .angular-cli.json
(or any other changes to this file) will require you to restart your ng serve
or ng build --watch
if you have either already running.
Update 2 (Current Recommended Approach):
For Angular 6 and higher you can use this solution.
Go to styles.css
and add this line
@import "~bootstrap/dist/css/bootstrap.css";
See also how this works under the hood:
https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975