http://robertdunaway.github.io

ng2-Bootstrap code kata list

All code katas lists

001 Bootstrap Setting up ng2-bootstrap

Duration

5 minutes

Brief

Adding ng2-bootstrap

For more information

BING/GOOGLE: “ng2-Bootstrap ”
http://getbootstrap.com/
http://valor-software.github.io/ng2-bootstrap/
https://github.com/valor-software/ng2-bootstrap

Instructions

Get tutorial folder or the entire katas-angular2 repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-bootstrap/tree/master/001%20Bootstrap%20Setting%20up%20ng2-bootstrap/before
• After
  
  • https://github.com/robertdunaway/katas-bootstrap/tree/master/001%20Bootstrap%20Setting%20up%20ng2-bootstrap/after

Kata

Install ng2-bootstrap. At the command line and in the root of your project execute the following line.

Npm install ng2-bootstrap –save-dev

Now we need to install bootstrap. http://www.getbootstrap.com
bower install bootstrap

Now we have the libraries we need let’s add the files we need to our wwwroot/lib folder from node_modules and bower_components.

Update our index.html with bootstrap.

<!-- Bootstrap -->
    <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Running the application should result in this.

Next

Take a few minutes and imagine more examples.