What To expect
In this angular tutorial, we will see how we can integrate bootstrap with angular to build a beautiful experience
Setting Up An Angular Project With Angular CLI
First, let's start by creating a new Angular project
. The easiest way to do so is to use the Angular Command Line Interface (CLI) to generate a new project. First, you need to make sure that Angular CLI is installed on your system. As Angular CLI
comes as an NPM package the installation can be done by using the following command.
For more details visit Angular Tutorials- Development Environment Setup
an article where I showed how to quickly set up your development environment ok so once you have your project ready go ahead and hit ng serve -o and your application will start.
npm install -g @angular/cli
Now that the Angular project is ready and running we can continue and add Bootstrap to the project. There are different ways of adding bootstrap to our project.
Using Bootstrap CDN
head over to get bootstrap the official website of bootstrap and hit on get started button
Copy-paste the stylesheet into your before all other stylesheets
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
the next step is to paste all the js scripts in your body tag at the end
<!-- Bootstrap Scripts -->
your full html will look like this
Angular tutorials | Integrating angular with bootstrap.
Using Bootstrap with npm
the other way to use bootstrap is to install bootstrap as an npm package and then use Bootstrap depends on Jquery and popperjs so we will need to include that also as a peer dependency