Add Bootstrap 4.1.1 to Angular CLI 6


In this article we will show you how to add bootstrap 4.1.1 2 angular cli 6. There is thousands of video are there to describe to you how to add Bootstrap in angular but sometimes it didn’t work. To solve this problem I am writing this article. in this article, I will show you the very simple way to add Bootstrap to angular CLI 6.

first, let me give you a quick understanding of Bootstrap. In simple word, bootstrap is  UI framework to create a responsive mobile friendly dynamic web application. bootstrap is open source framework do you can use it anywhere. using bootstrap you can create forms typography button navigation and so many things.

Bootstrap support responsive web designing which dynamically adjust the layout of web pages according to the characteristics of when the device is being used whether that is a phone tablet or desktop machine.

So let’s Understand how to add bootstrap in angular.

 

Create an Angular Application

We will first simply create an angular application using CLI. So in visual code editor Terminal create a simple angular application using NG new command and specify the name of your application.

This command will create a bootstrap example application in your angular directory.

 

Install Bootstrap using npm

after that Bootstrap is not automatically installed when you create an application do you need to install the module in your application. we will show you how to add bootstrap. I need to write a  command npm install –save Bootstrap. 

make sure your spelling is correct. So this command will install bootstrap Framework in your angular application. You can find the bootstrap module in node module folder.  there is thousands of pre-install module are there.

An Alternative to Add Bootstrap

There is another way to use Bootstrap in your angular application using CDN. I will show you how.

Index.html

Using index.html file You can link the bootstrap framework to the angular application.  so in the index.html file, we will go In head section and copy and the paste CDN

In this file will just link the bootstrap framework bootstrap framework using Content Delivery Network. Using this method we are using bootstrap classes using CDN.

 

Add in Angular.json File

After installing the bootstrap module in your angular application. we need to specify Bootstrap CSS file in the angular.JSON. This will tell angular project to use the style in the Bootstrap CSS.  so I need angular JSON file and add this line. Keep in mind that you want to add this line in the style parameter.

find style.css in the angular JSON file.  here to just need to add this line. This line will tell angular we use bootstrap.css except style.css.

app.module.ts

In app.module.ts file.  you do not want to add anything.  there is a thousand of article that tell you to add ngb module in this file.  but actually, you don’t need to add anything. we already tell the angular that you wanted to use bootstrap except for style.css.

So what is the reason behind the ngbModule you wanted to import in your app.module.ts? You need to add this trip when you are using NG Bootstrap.   in the next article, I will show you how to use NG bootstrap in the angular application. and then we will import ngbModule in the app.module.ts file. But now you don’t need to add anything.  if you’re thinking that I am giving you a wrong information about the angular app? this is not true. Because if you try this article you will see your bootstrap Framework is applied to your angular application.  there is no need to add ngbModule to your app.module ts file.

Just try this article and give me your feedback.  surely bootstrap will work for you. if there is any doubt and question then I will solve your question just comment me.

 

app.component.ts

After completing the steps,  we need to move forward create Bootstrap code. In app.component.ts file we will add some bootstrap code and show you bootstrap is working or not.

In this code, we created a row and add three column inside of the row. in this three columns, we insert a bootstrap card Code. so I just created a card with image specify title for the card image and then add the subscription.  you can add any code here. this is only sample code create to create the angular application.

Now you can use bootstrap buttons Alerts colors of the Bootstrap Framework things.

Bootstrap Js Files

if you wanted to run bootstrap JS files then there is another package that installs JS files in your angular application. I couldn’t install or link the JavaScript file to the angular application then you can’t use of navigation drop-down menu and tabs and most of the component which depends on Javascript.  To use that component we need to install the JavaScript in the project. There are two methods to install JavaScript in your project.  first one is everything script tag. this method is the alternative method  linking the JavaScript file to the angular application. we will talk about this letter.

Adding Js Via NPM

In this command, we install the bootstrap framework and along with that we also install the jQuery module in the angular application. now you can find this two models in the Node model folder.

After executive this command, you can use the jQuery. but we first wanted to tell the angular application that uses JavaScript files.

After both packages have been installed successfully The jQuery and bootstrap module can be found  at:

  • node_modules/jquery/dist/jquery.min.js
  • node_modules/bootstrap/dist/css/bootstrap.min.css
  • node_modules/bootstrap/dist/js/bootstrap.min.js
Adding these file in the project

adding this project you can use <script> and <link> tag  or you can use another method

or

by adding the file paths to the styles and scripts array in file .angular-cli.json:

on the top of the article, we have been linked CSS files to the angular application. Now we just need to link JS file in the script. so we will specify the path in the script of angular JSON file.

 

Alternative of Js files

There is another alternative of the linking script tag to the angular application.  you can either use npm or you can use these alternative method for that. in the alternative method, we are simply link bootstrap JS file using cdn.  common domain name system is probably the best way to link bootstrap files but in angular npm is the most usable method of the developer.

just look at the alternative way.

Index.html

So here we just copy bootstrap cdn from the bootstrap website and use the CDN in the index.html file.  Just copy and paste this CDN form bootstrap website to the next index.html file. You will see the bottom of the index.html file we specify script tag and link jQuery file to the index.html file.

there is another way to use bootstrap in the angular application using NG Bootstrap.  NG bootstrap is the latest Framework used with the angular application. Using this framework you don’t need to install or link JavaScript file to your application. but just installing the NG Bootstrap will help you to develop your angular application with the use of Bootstrap.  I personally recommend you to use NG bootstrap accept using the simple bootstrap framework.

NG Bootstrap Framework is created for the angular application so this will help you to improve your design and code readability.

In the next article, I will show you how to link in Bootstrap or you can say how to add NG Bootstrap in your angular application. That is ok for this article we will see you in the next article with NG Bootstrap framework.  in the next article, I will show you how to add NG bootstrap framework and also how to create NG Bootstrap component in your angular application.

I will also show you how to style your  NG Bootstrap component using the stylesheet and change the layout and style of the component.

we will see you in the next article. So must read the next article.

 

Leave a Reply

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