File tree Expand file tree Collapse file tree
docs/documentation/stories Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ # Include [ Bootstrap] ( http://getbootstrap.com/ )
2+
3+ [ Bootstrap] ( http://getbootstrap.com/ ) is a popular CSS framework which can be used within an Angular project.
4+ This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap.
5+
6+ Create a new project and navigate into the project
7+ ```
8+ ng new my-app
9+ cd my-app
10+ ```
11+
12+ With the new project created and ready you will next need to install bootstrap to your project as a dependency.
13+ Using the ` --save ` option the dependency will be saved in package.json
14+ ```
15+ npm install bootstrap --save
16+ ```
17+
18+ Now that the project is set up it must be configured to include the bootstrap CSS.
19+
20+ Open the file ` angular-cli.json ` from the root of your project.
21+ Under the property ` apps ` the first item in that array is the default application.
22+ There is a property ` styles ` which allows external global styles to be applied to your application.
23+ Specify the path to ` bootstrap.min.css `
24+ ```
25+ "../node_modules/bootstrap/dist/css/bootstrap.min.css"
26+ ```
27+
28+ With the application configured, run ` ng serve ` to run your application in develop mode.
29+ In your browser navigate to the application ` localhost:4200 ` .
30+ Make a change to your application to ensure that the CSS library has been included.
31+ A quick test is to add the following markup to ` app.component.html `
32+ ```
33+ <button class="btn btn-primary">Test Button</button>
34+ ```
35+ After saving this file, return to the browser to see the bootstrap styled button.
36+
37+
38+ ** Note:** When you make changes to ` angular-cli.json ` you will need to re-start ` ng serve ` to pick up configuration changes.
You can’t perform that action at this time.
0 commit comments