Add Bootstrap in Angular - Angular (Tutorial #8)

Bootstrap is the most popular HTML and CSS framework for building responsive layouts without having a deep knowledge of CSS. So in this session, we will learn how we can add Bootstrap in Angular

Use this link to share this video: https://youtu.be/qU6yUvZHx5g

There are 2 approach to use bootstrap in Angular
1) CDN : Content Delivery Network
2) Download bootstrap using npm

1st Approach using CDN :
In case of CDN we will copy the url for bootstrap and paste that url in index.html file

We will have one bootstrap.min.css
and 3 scripts file: 1) jquery 2)popper.js 3) bootstrap.js

Bootstrap 4 is the latest version of bootstrap which have dependency on 2 libraires and that is jquery and popper.js

jquery is a library of javascript and popper js is also a javascript library that helps you in positioning your HTML elements very quicky specially when you have something like notification

2nd approach of using bootstrap :

we can download all these libraries using npm command

1) npm install jquery popper.js
2) npm install bootstrap@4

Once dependencies get installed it will save these dependencies in node_modules folder

Now we can't link these path in index.html. If you want to set any global CSS or JS you need to give the path in angular-cli.json file

there we have one styles key there we have to give the path of bootstrap.min.css


Now we
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]

and in scripts key refer jquery, popper and bootstrap.js
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

If you make any changes in angularcli.json file we need to restart angular server to make it work.
Press Ctrl+C(to stop current running server) and start the server using ng serve -o command

and you can see it is working
If you liked my channel , subscribe to it and like my videos. For any queries ask you question in comment section

you can also connect with me @

Facebook: https://www.facebook.com/AngularJS4Beginners
LinkedIn: https://www.linkedin.com/in/nisha-singla-82407aa0/
Website : http://nishasingla.com/

Тэги:

#Adding_Bootstrap_with_Angular #Using_Bootstrap_with_Angular #Using_Bootstrap_with_Angular_4 #Add_Bootstrap_in_Angular_4 #Correctly_Include_Bootstrap_4_in_Angular #How_to_use_Bootstrap_in_Angular #Bootstrap_4_in_Angular #Angular_Tutorials_for_beginners #Angular_4_tutorials #nisha_singla #angular_tutorial #angular_tutorial_for_beginners #angular

Скачать видео