• Friday , 5 June 2020

Using Bootstrap with Angular 2

Code Canyon
https://i.ytimg.com/vi/OrH90MiFthM/hqdefault.jpg



Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/08/using-bootstrap-with-angular-2.html

Slides
http://csharp-video-tutorials.blogspot.com/2017/08/using-bootstrap-with-angular-2_14.html

Angular 2 Tutorial playlist

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

In this video we will discuss
1. How to install and use Bootstrap with Angular
2. How to enable intellisense for bootstrap in Visual Studio

How to install and use Bootstrap with Angular : There are several ways to install Bootstrap. One way is by using Node.js command prompt.

Step 1 : Open node.js command prompt window.

Step 2 : In the command prompt navigate to the folder that contains your angular project and type the following command and press enter key. As Bootstrap has a dependency on jQuery, we are installing jQuery as well.
npm install bootstrap@3 jquery –save

This installs both Bootstrap and jQuery for use with our Angular project. The required Bootstrap and jQuery files are copied into the node_modules folder within the project directory.

Also, notice package.json file is also automatically updated with both the dependencies (Bootstrap and jQuery)

Step 3 : Finally in index.html file add the following script and link elements to reference the required CSS and JS files. As you can see, these files are being served from the node_modules folder.

[script src=”/node_modules/jquery/dist/jquery.min.js”][/script] [link href=”/node_modules/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet” /] [script src=”/node_modules/bootstrap/dist/js/bootstrap.min.js”][/script]

The problem at the moment is intellisense for Bootstrap CSS classes is not working in index.html, or any of the components html files

How to enable intellisense for bootstrap in Visual Studio : Use the following workaround to enable intellisense for bootstrap in Visual Studio.

Step 1 : In Visual Studio, click to select the Angular project and then click on “Show All Files” icon. You will then see “node_modules” folder.

Step 2 : Expand “node_modules” folder. Locate “bootstrap” folder. Right click on it and select “Include In Project” option from the context menu.

At this point you should get bootstrap intellisense in index.html and all angular component html files. If you still do not get bootstrap intellisense, please restart Visual Stduio and you will get intellisense.

As I said before, there are several ways to install bootstrap. One way is by using Node.js command prompt. The other way is by using Visual Stduio NuGet package manager. To install Bootstrap using NuGet package manager follow these steps.

Step 1 : In Visual Studio Solution Explorer, right click on the Angular project and select “Manage NuGet Packages” option from the context menu

Step 2 : In the “NuGet Package Manager” window
Click on the “Browse” link
In the textbox, type “Bootstrap” and press “enter” key
Click on the first item which says – Bootstrap
Click on the arrow pointing downwards to install

The required CSS and JS files are placed in Content and Script folders. Finally place the required CSS and JS files in index.html page to start using Bootstrap. If you install Bootstrap using NuGet you don’t have to do anything else to get bootstrap intellisense.

If you do not want to download bootstrap, you can use their CDN links. You can find the official Bootstrap CDN links at the following page.
http://getbootstrap.com/getting-started/

Besides these 3 ways, there are other ways of installing Bootstrap. Which way to use depends on your project needs.

Original source

3d Ocean

Related Posts

21 Comments

  1. Secret Squirrel
    April 11, 2019 at 15:17

    Dear lord I wish you would have put the NuGet first. But that's just me wishing I had watched the whole video instead of following along with you. HUNDREDS of hours of training by you and this is the one and ONLY time I have a baby complaint. You Sir are the kindest person on Earth.

  2. Sumit Kaushik
    April 11, 2019 at 15:17

    … I tried installing adding the bootstrap file in the project but I am always getting 404 error in the browser for the boootstrap and css files ..

  3. Alejandro Oletres Jr.
    April 11, 2019 at 15:17

    Hai dude can you make a tutorial on how to implement ui-bootstrap in angularjs .. thanks…
    hope to reply immediately .. God bless

  4. akash samanekar
    April 11, 2019 at 15:17

    hey when I right click on bootstrap i cant find include option

  5. Kishan Panchal
    April 11, 2019 at 15:17

    well when i create button it doesn't show up anything on browser there is an error of angular CLI
    how di fix that

  6. Shilpi Jain
    April 11, 2019 at 15:17

    drag and drop are not working in the visual studio, how to do?are we need to install something?

  7. md shoaib Alam
    April 11, 2019 at 15:17

    Hi Sir , i m getting some weird error every time in console using bootstrap and jquery refrences however jquery and bootstrap is loading properly but getting below errors in console

    GET http://localhost:4200/node_modules/jquery/dist/jquery.min.js net::ERR_ABORTED
    GET http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css net::ERR_ABORTED
    GET http://localhost:4200/node_modules/bootstrap/dist/js/bootstrap.min.js net::ERR_ABORTED

    please suggest how to fix this if anybody else facing this issue and having solution please help me how to get rid off this error

  8. rajeev phani
    April 11, 2019 at 15:17

    is there any way to activate the drag and drop feature, why because in my visual studio code it is not working

  9. Rajarajan seeman
    April 11, 2019 at 15:17

    Hi Venkat. it's pleasure learning Angular 2 with you!. Here is my Q. What is mean my bootstrap and why do we need it here at angular 2? could you please add more videos on how to utilize Bootstrap functionalities here at Angular2? probably your videos will provide answers to all the puzzles around bootstrap over the world.

  10. TrackUrs Com
    April 11, 2019 at 15:17

    Thank you sir, Great video ! Your angular 2 is amazing
    please make a video for how to use bootstrap.rtl with angular 2

  11. Satendra
    April 11, 2019 at 15:17

    Hi your videos are really helpful, Can you make a video on angular-ui-grid integration with basic examples

  12. Alireza
    April 11, 2019 at 15:17

    I was getting npm permission problems when i was running npm install bootstrap@3 jquery –save , I downgraded npm version from 5.4 to 5.3 with this command npm install npm@5.3 -g it fixed the issue temporary .

  13. aniket narvankar
    April 11, 2019 at 15:17

    Your are videos are great and clearing all the concepts.And helping us in interview.Still,how many videos of angular 2 will be uploaded? What topics are left to be covered in angular 2

  14. aniket narvankar
    April 11, 2019 at 15:17

    Sir,please upload a video on crud operations using angular 1 and angular 2.Using database and web api.Please sir,try and upload this,this is very important for us.

  15. RAQIBUL ALAM RASHED
    April 11, 2019 at 15:17

    Thanks

  16. TheVivek
    April 11, 2019 at 15:17

    Hello sir please make video for how to use jquery ui with angular 2? Thank you for great videos

  17. NikolaPolov
    April 11, 2019 at 15:17

    Great video ! Your angular 2 is amazing

  18. Murthi75
    April 11, 2019 at 15:17

    please do videos on xamarin

  19. MD Gosoddin
    April 11, 2019 at 15:17

    Hello venkat please explain me how can i use bootstrap modal popup in ang2
    And also wat is difference between ngx bootstrap n bootstrap..tq

  20. pitchai pillai
    April 11, 2019 at 15:17

    thank you sir.. expecting more on angular with web api

Leave A Comment

You must be logged in to post a comment.