Introduction
In this how to guide, I will be adding Bootstrap 4 to an Angular 7 app using a Content Delivery Network (CDN)
Update 26/03/2019: This post has been replaces an earlier and incorrect version I had written on installing Bootstrap with Angular.
Prerequisites
In this guide I have used VS Code 1.32.3, Chrome 73, Angular 7, Bootstrap 4
Create a new Angular Application
First step is to create a new Angular app. So after starting VS Code and starting a new terminal session, run:
ng new bootstrap-cdn
Accept the defaults regarding Angular routing and style sheet format
Once the app has been created, run it to ensure it works.
Adding Bootstrap
With the skeleton of the Angular app in place using your favourite browser navigate to the Bootstrap home page and select Get Started.
You are then shown the CSS and Javascript CDN links:
Copy the CSS link and paste into the Angular index.html in the <head> section before all other stylesheets. Copy the JS links and paste them at the bottom of <body>. Your Index.html should now look like:
Save your changes.
Testing
Navigate to app.component.html and add a button with a Bootstrap class
<button class="btn btn-primary">
This button is styled with Bootstrap </button>
You should then see the button, styled by Bootstrap appear on your page. If not press F12 and investigate any errors displayed.
iancarpenter.dev 
2 thoughts on “Adding Bootstrap to your Angular App using VS Code”