How to Use Bootstrap Style Sheet In Angular

How to Use Bootstrap Style Sheet In Angular

What is Bootstrap?

• Bootstrap is a free and open-source front-end web framework for designing websites and web applications. 
• It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. 
• Unlike many web frameworks, it concerns itself with front-end development only

How to use Bootstrap?

Step 1(Create or Open Angular Project):

• To create new project use "ng new ProjectName" command in Integrated terminal.
• To open existing project , File -> OpenFolder from VSCode

Step 2(Downloading Boostrap):

• Using npm , We can easily download and Install.
• Run the following command

npm install --save bootstrap

•  After executing above command ,You could see bootstrap folder is visible in node_modules\bootstrap

Step 3(Globally referring Bootrap):

• Open angular-cli.json file from root directory
• Refer the downloaded bootstrap to styles array.As mentioned below

"styles": [

"styles.css",

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

],

Are you understand above given path ?

• If not don't worry. I will explain you now.
• Bootstrap download in client machine begins from Index.html
• To reach out bootstrap css from Index page, You have to go parent directory of current directory(One step back).(Here you can see node_modules folder)
• From that, you just traverse as mentioned to reached out the css file(this is standard path if we install bootstrap from npm)

Step 4(Checking Bootstrap In  Browser):

• Re-run the project using "ng serve"
• Navigate to http://localhost:4200/(Chrome browser used for demo)
• Right click and select Inspect index page
• Devloper tools will be opened up.
• Select element tab in Developer tools
• Expand head section
• Expand the Styles tag and you could see Bootstrap styles as given below

Step 5:

• Bootstrap is added to your angular project globally which means no need to refer bootstrap again and again all the components.

Questions to ask yourself:

• Is this the only way to refer Bootstrap?
• How do i directly link bootstrap to Index.html

Solution:

• We can refer bootstrap CSS directly in the index.html page. But best practice is to refer it from configuration file itself.
• Feel free to refer and check the bootstrap directly in index.html

Stay tuned. Happy Learning!!