I have recently developed an Angular 4 application and I am looking to integrate Bootstrap 4 into it.
After installing Bootstrap 4.0.0-beta6 via npm, I wanted to use the starter template which should resemble this design.
https://i.sstatic.net/ANaBz.png
Following the setup guide provided in the angular.cli.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "frontend"
},
...
}
Despite successful building and serving the app with ng build or ng serve, my navigation bar is displaying incorrectly as shown in the image below:
https://i.sstatic.net/HAzAr.png
The page seems error-free upon inspection, and I can access the classes without any issues. I deliberately chose not to use NgBootstrap initially, opting for the native libraries instead.
Even after attempting the MaxCDN versions of both CSS and JS, the results remain unchanged. My code structure closely resembles the following example:
Index.html contains <app-component>, loading <app-body> consisting of <app-navigation> and other container elements. Nothing too complicated.
If someone has encountered a similar issue or has any suggestions, your help would be greatly appreciated.