Adding Bootstrap to your Angular App using VS Code

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.