File tree 1 file changed +38
-0
lines changed
docs/documentation/stories
1 file changed +38
-0
lines changed 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