in this article, we discuss How to Embed and use Bootstrap with Angular
How to Embed and use Bootstrap with Angular?
Creating websites is always exciting but creating beautiful ones is what satisfies. Angular in itself is a great framework to help you build websites. In case you want to create eye-catching websites easily, you can simply incorporate Bootstrap with Angular. So if you are excited to know how to do this, here a complete article on Angular Bootstrap to help you.
Take a look at all the topics that are discussed over here:
- What is Angular?
- Creating an Angular Application
- What is Bootstrap?
- Angular Bootstrap
- Using Bootstrap CDN
- Using npm
What is Angular?
- Open-source and cross-platform
- Angular is easy to use as it allows you to create full-fledged professional websites with very little code
- Two-way data binding which allows you to change the views through the models and models through the views
- Provides tools in order to perform end-to-end testing
- Angular’s Ivy helps in debugging, reducing bundle size, and faster compilation
- Ahead-of-time compilation
Creating an Angular Application
To create an Angular application, you can make use of the ng new command as follows:
ng new bootstrap
Get into your project directory using the following command:
Run the ng serve -o command within your project directory. This will automatically serve your application on the localhost port 4200. When you do this, you will see the default Welcome page from Angular. Get back to your project and delete all the contents of the app.component.html file except the last line i.e. <router-outlet></router-outlet>
Just to check how your application will respond, type in some basic HTML code as follows:
<h1>Hello World</h1> <h2 style="color:red;">Welcome to stackoverflow</h2> <router-outlet></router-outlet>
You will see the following output on the development server:
I shall modify this application progressively as we move on but for now, open the index.html file of your application.
What is Bootstrap?
Bootstrap is an open-source HTML, CSS, and JS framework that is used to create mobile-first and responsive websites. Using Bootstrap, you can easily create beautiful and responsive websites by making use of its readily available layouts, components, utilities, etc.
There are two ways by which you can embed Bootstrap into Angular:
- Using the Bootstrap CDN (Content Delivery Network)
- Using npm (node packet manager)
Using Bootstrap CDN
You can make direct use of the Bootstrap Content Delivery Network or the Bootstrap CDN. This will deliver the cached version of Bootstrap’s compiled CSS and JS to your Angular application.
Copy the <link> tag and paste it at the end of the head section of the index.html file. Once that is done, copy the <script> tag and paste it at the beginning of the body section.
<link href="https://firstname.lastname@example.org/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Now copy these two <script> tags of jQuery and bootstrap.bundle.min.js and paste them below the Bootstrap <script> tag. Save the file and open the development server.
<script src="https://email@example.com/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@firstname.lastname@example.org/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://email@example.com/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
You can clearly see the difference between the font of the previous output and this one. This shows that Bootstrap functionality has been successfully embedded into your application.
NOTE: Please make a note that I have deleted the CDN versions that I added in the previous method.
Alternatively, you can make use of the node package manager to embed Bootstrap functionality into your project. To do this, open the command prompt and type the following command:
npm install bootstrap jquery popper.js –save
Once that is done, you will be able to see that all these three packages along with their versions will be present in the package.json file.
The CSS and JS must be loaded globally, and for that, we must specify the path within the angular.json file within the styles and the scripts array. All packages that you install get downloaded to the node_modules folder. Open the node_modules folder and look for Bootstrap, jQuery, and Popper. From these installed packages, I will only use the minified versions, so open these folders and look for the path of these minified files. The image below shows the bootstrap.min.css file path:
Once you have found the path of each of these, you will have to add it within the angular.json file as shown below:
Now save the changes and rerun your application. You should be able to see that the Bootstrap functionality is still working as shown below: