Suggested Videos
Part 1 - Creating angular 6 project | Text | Slides
In this video we will discuss, installing and configuring Bootstrap for use in an Angular 6 project.
We will be using Bootstrap for styling. Install bootstrap using the following NPM command
npm install bootstrap@3 jquery --save
This installs Bootstrap in the node_modules folder. If you do not find the bootstrap folder in node_modules folder, restart visual studio code and you will find it. You can also execute the following command in the integrated terminal window and search for bootstrap folder.
dir node_modules
In Angular CLI configuration file include the path to the Bootstrap CSS file in the styles array. Remember in Angular 6, the Angular CLI configuration file is renamed to angular.json from angular-cli.json.
Bootstrap relies on jQuery for some of it's features. If you plan on using those features, please include the path to jQuery and Bootstrap jQuery files in the scripts array in angular.json file.
To verify that you have the correct paths specified, you can request the respective files by running the angular project and pointing your browser to http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css
A quick additional test to verify, Bootstrap styles work as expected, include the following button in the root component (app.component.html) file.
Part 1 - Creating angular 6 project | Text | Slides
In this video we will discuss, installing and configuring Bootstrap for use in an Angular 6 project.
We will be using Bootstrap for styling. Install bootstrap using the following NPM command
npm install bootstrap@3 jquery --save
This installs Bootstrap in the node_modules folder. If you do not find the bootstrap folder in node_modules folder, restart visual studio code and you will find it. You can also execute the following command in the integrated terminal window and search for bootstrap folder.
dir node_modules
In Angular CLI configuration file include the path to the Bootstrap CSS file in the styles array. Remember in Angular 6, the Angular CLI configuration file is renamed to angular.json from angular-cli.json.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Bootstrap relies on jQuery for some of it's features. If you plan on using those features, please include the path to jQuery and Bootstrap jQuery files in the scripts array in angular.json file.
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
To verify that you have the correct paths specified, you can request the respective files by running the angular project and pointing your browser to http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css
A quick additional test to verify, Bootstrap styles work as expected, include the following button in the root component (app.component.html) file.
<button class="btn btn-primary">
Bootstrap Styled Button
</button>
Hi sir, can u pls tell me the what is the commanModule functioanlity that we remove app.routing file in this video.
ReplyDeletewhat is the purpose of commanModule in angular
is it important to add bootstrap link in index.html..
ReplyDeleteif we have to use the app without internet what should we do
we are making web Application here. It wouldn't work without internet.
Deleteyou should have to use an offline link. save in your node_modules. because sometime the link can be down and then your website will be dependent on other bootstrap link.
Delete