Skip to content

Commit 1a5362c

Browse files
BroccoMRHarrison
authored andcommitted
chore(docs): add documentation showing how to include bootstrap (angular#3425)
Applies to angular#2711
1 parent 1c5e88f commit 1a5362c

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
// version 3.x
16+
npm install bootstrap --save
17+
18+
// version 4.x
19+
npm install bootstrap@next --save
20+
```
21+
22+
Now that the project is set up it must be configured to include the bootstrap CSS.
23+
24+
Open the file `angular-cli.json` from the root of your project.
25+
Under the property `apps` the first item in that array is the default application.
26+
There is a property `styles` which allows external global styles to be applied to your application.
27+
Specify the path to `bootstrap.min.css`
28+
```
29+
// version 3.x and 4.x
30+
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
31+
```
32+
33+
With the application configured, run `ng serve` to run your application in develop mode.
34+
In your browser navigate to the application `localhost:4200`.
35+
Make a change to your application to ensure that the CSS library has been included.
36+
A quick test is to add the following markup to `app.component.html`
37+
```
38+
<button class="btn btn-primary">Test Button</button>
39+
```
40+
After saving this file, return to the browser to see the bootstrap styled button.
41+
42+
43+
**Note:** When you make changes to `angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes.

0 commit comments

Comments
 (0)