This content originally appeared on Level Up Coding - Medium and was authored by Ashwin Sathian
In this post, we are going to look at how we can setup Bootstrap in your Angular project. I always prefer using Bootstrap in my projects — makes styling that much more easy, not having to write out all the CSS myself.
The Styles
Now, you might be thinking, why not include Bootstrap CDN in index.html using a <link> tag like this:
The downside of this approach is that if by any means there is a problem in connecting to the CDN server, the whole of our styling breaks and believe me, that’s a heartbreaking sight — I’ve been there. That’s why it’s always good to set up Bootstrap locally. And how we do this, is what we are going to see.
Install the Bootstrap package
Bootstrap can be installed in your project directory by runnning the following command from within it.
npm i bootstrap --save
Link the CSS
The CSS linking can be done in two ways, as explained below:
Open the angular.json(or angular-cli.json in earlier versions of the Angular CLI), and add the following line to the “styles” section, so that it now looks like this:
OR
Updating the styles.css file
This approach is more old-school, although a neater and better one for many reasons. What we do here, is open the “ styles.css” file located in the “ src “ folder in the project directory, and add the following import statement, positively at the top of it, so that it now looks like this:
Once you have done the steps above properly, you’ll now be able to easily start using Bootstrap classes in your project — all across it, and be done with having to write out the CSS for every styling and responsive design requirement.
The Animations
That was the styles. Now comes the relatively more challenging bit — adding the Bootstrap animation such as modals, popups and whatnot, into the application.
Installing/adding Bootstrap to your application will not allow the likes of modals to be used, simply because they need more than plain old Bootsrap to work.
So our first step is to add dependencies required for these functions. Yo do this, run the following command:
npm i jquery tether --save
What we did here is install the NPM packages for jQuery and tether.js — dependencies that’ll breathe life into all those nifty visuals like the modals and sliders.
The next part is simple and something you might’ve guessed; i.e.e informing the project that there are these dependencies that it has toget ready for us. And to do this, we edit our beloved angular.json file two hold the following bit of ‘code’.
And that should do it ! You can now have all the beautiful modals and drop-downs and what not that comes with Bootstrap, in your Angular application.
Happy BOOTSTRAPPing !
If you like what you read and would like to hire me for a task or a one-on-one session, reach out to me on Hire The Author
How to use Bootstrap in your Angular project was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Ashwin Sathian
Ashwin Sathian | Sciencx (2021-03-22T19:43:22+00:00) How to use Bootstrap in your Angular project. Retrieved from https://www.scien.cx/2021/03/22/how-to-use-bootstrap-in-your-angular-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.