Assignment #12

    Our Menu works, but it is not very pretty, so we are going to style it.

    We are going to use Bootstrap and open-source Framework originally from Twitter

    We need to do the following steps:

    1) install Bootstrap

    2) configure our project to use Bootstrap

    3) add Bootstrap styles to our menu component

    ---------------------------------------------------

    Installing Bootstrap

    Open a Command Prompt to the C:\Humor folder

    enter:  npm install bootstrap

    notice the install did not have '-g' for global, this will install Bootstrap in the current project only

    this will also change the package.json file to show the project is using Bootstrap

    open the package.json file and find this line:

        "bootstrap": "^5.1.1",

    since we did not say which Bootstrap version, npm installed the latest stable version, and the
    package.json file reads "^5.1.1" which translates to "5.x.x" see https://github.com/npm/node-semver
    for details

    Also notice the package.json does not list the bootstrap dependence devDependencies section, meaning
    it is required for production

    ---------------------------------------------------


    Next we configure our project to use Bootstrap,

    in the  angular.json we need to add 2 lines:

    Before we add Bootstrap:
      "styles": [

                  "src/styles.css"
                ],
                "scripts": []

    After we add Bootstrap:
       "styles": [
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",            <= this line
                  "src/styles.css"
                ],
                "scripts": [
                  "node_modules/bootstrap/dist/js/bootstrap.min.js"               <= and this line
                ]

    ---------------------------------------------------

    Finally we are going to use Bootstrap to style out Menu

    in menu.component.html

    we replace the entire contents with:

    <nav class="nav">                                                   <= a Bootstrap style class
        <a class="nav-link active" href="#">Welcome</a>                 <= another Bootstrap style class
        <a *ngFor="let category of data" class="nav-link" href="#">{{category.name}}</a>
    </nav>

    ----------------------------------------------------

    save everything, and run: ng serve to see the results

    we now have a nice horizontal menu