Adding Bootstrap to a Simple App

A lot of the seed projects we use come loaded with everything you need to get an app built quickly. This is a huge time-saver since there's no use in re-inventing the wheel. But, sometimes we sacrifice understanding for speed.

Adding Bootstrap to an app isn't anything earth shattering, but, there are a couple of pieces to make to making sure it works correctly. 

For this lesson, I'm using angular-cli version 1.0. Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.

For a quick sanity check, check to see where you're at and update accordingly.

ng --version    //will show cli and node version
npm --version   //will show npm version

All good. I'm running a proper node and npm versions and 1.0.0 of the CLI. 

Let's create a simple app. Source code for this walkthrough can be found on our git repo.

ng new ng-bootstrap-angular

Let's fire the app up and make sure it's running. Use whatever IDE you choose or none at all. I'm running Webstorm 2016.3.1. After opening the app folder, I pull up a terminal window and start the app.

ng serve     //you could use the npm tool window and run start too

Open up a browser and make sure you see the app running. It should just be printing out app works!

I'm going to use ng-bootstrap. It was written by the angular-ui team and is built from scratch in Typescript using the Bootstrap 4 CSS framework.

Checking ng-bootstrap dependencies: 

• Angular (requires Angular version 2 or higher, tested with 2.0.0)
• Bootstrap CSS (tested with 4.0.0-alpha.6)

Let's get the current latest Bootstrap CSS

npm install --save bootstrap@4.0.0-alpha.6

We see that bootstrap is in node_modules and has been added to the dependencies section of package.json.

Now we need to install ng-bootstrap.

npm install --save @ng-bootstrap/ng-bootstrap

Looking good! We've got @ng-bootstrap added to node-modules and included in the dependencies in package.json.

Now we need to wire up the app.module.ts to use ng-bootstrap.

// add the import for NgbModule
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot() // Need to do this in the root module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Cool, let's add some bootstrap classes and change the text value and center it in our app.

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1 class="text-center">
        ng-bootstrapped app works!
      </h1>
    </div>
  </div>
</div>

Looks like we're done! Fire the app back up and check out your handiwork. 

WTF? That's not centered.

So here's where these little walk-throughs are valuable. We failed. Since we're building with the angular-cli, it needs to know about the new styles added to our app. 

Open up the angular.cli.json file and navigate to the styles section under app and add the following line to the array.

"../node_modules/bootstrap/dist/css/bootstrap.css"

Now let's refresh our browser and see what we get.

Okay, now I'm getting aggravated!

Why doesn't it work?

Since you've modified your CLI config file, you need to kill the server and restart for the changes to get picked up.

Boom!!

You've done good! Have you self a beer and marvel at what you've accomplished.