How to Embed and use Bootstrap with Angular?

in this article, we discuss How to Embed and use Bootstrap with Angular

bootstrap 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?

Angular is an open-source web development framework that is maintained by Google. It is based on the TypeScript language which is a superset of JavaScript. Angular is immensely popular for many reasons such as:

  • 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

In case you are completely new to Angular and have not installed it yet, check out What is Angular CLI article.

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:

cd bootstrap

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:

How to Embed and use Bootstrap with Angular

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.

Angular Bootstrap

There are two ways by which you can embed Bootstrap into Angular:

  1. Using the Bootstrap CDN (Content Delivery Network)
  2. 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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

OR

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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.

Using npm

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.

package

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:

node modules Angular Bootstrap

Once you have found the path of each of these, you will have to add it within the angular.json file as shown below:

package json

Now save the changes and rerun your application. You should be able to see that the Bootstrap functionality is still working as shown below:

Also Check out What is Angular CLI and How to Implement it

The Family Man Season 2 Watch online

Related Posts

3 thoughts on “How to Embed and use Bootstrap with Angular?

  1. It’s a shame you don’t have a donate button! I’d most certainly donate to this brilliant blog!
    I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account.

    I look forward to fresh updates and will talk about this website with my Facebook group.
    Talk soon!

Leave a Reply

Your email address will not be published. Required fields are marked *