Skip to content

docs: Update bootstrap story. #10503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 28, 2018
Merged

docs: Update bootstrap story. #10503

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 14 additions & 26 deletions docs/documentation/stories/include-bootstrap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,32 @@ With the new project created and ready you will next need to install bootstrap t
Using the `--save` option the dependency will be saved in package.json

```sh
# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save
```

### Configuring Project

Now that the project is set up it must be configured to include the bootstrap CSS.

- Open the file `.angular-cli.json` from the root of your project.
- Under the property `apps` the first item in that array is the default application.
- There is a property `styles` which allows external global styles to be applied to your application.
- Open the file `angular.json` from the root of your project.
- Under the property `projects` find your project.
- Inside `architect.build.options` locate the `styles` property.
- This property allows external global styles to be applied to your application.
- Specify the path to `bootstrap.min.css`

It should look like the following when you are done:
```json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"build": {
"options": {
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
}
}
```

**Note:** When you make changes to `.angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes.
**Note:** When you make changes to `angular.json` you will need to re-start `ng serve` to pick up configuration changes.

### Testing Project

Expand Down Expand Up @@ -74,11 +75,7 @@ cd my-app
### Installing Bootstrap

```sh
# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save
npm install bootstrap --save
```

### Configuring Project
Expand All @@ -94,11 +91,6 @@ $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
In `styles.scss` add the following:

```sass
// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
```
Expand All @@ -117,10 +109,6 @@ Verify the bootstrap styled button appears.
To ensure your variables are used open `_variables.scss` and add the following:

```sass
// version 3
$brand-primary: red;

// version 4
$primary: red;
```

Expand Down