Creating new Angular project and Installing Bootstrap in Angular

  • We can create a new project in Angular first using below commands.
sudo ng new my-dream-app
cd new my-dream-app

Then run the below command to install Bootstrap inside the new project.
Note : Below command will installl bootstrap locally into the newly create project.

sudo npm install --save bootstrap@4.3

Location of bootstrap.min.css file after installing bootstrap is <project_name>/node_modules/bootstrap/dist/css/bootstrap.min.css

Now we need to make angular aware of the bootstrap installed by giving the path of bootstrap.min.css in the angular.json config file.

The location of bootstrap.min.css should be inside project – project-name – architect – build – options – styles tag and add the string “node_modules/bootstrap/dist/css/bootstrap.min.css”

Now run start the server by runnning ns serve command in the root project folder via terminal

Now we can confirm if bootstrap is installed on to the project by hitting the URL : http://localhost:4200/ and opening the developer tools and navigate to <html> <head> <style> tag to view bootstrap, screenshot below.

Leave a Comment