# Module 2.2: Footer Component

## Generating the Footer component

* Start by running `ng generate component footer`
* Notice the FooterComponent was added to the boss-file: `app.module.ts`
* Let’s include the footer content at the bottom of our `app.component.html` file. Include the following at the bottom:

  `<app-footer></app-footer>`

## Add HTML and CSS to the Footer

Add the following code for `footer.component.html`.

```markup
<nav class="navbar navbar-dark bg-dark align-bottom" id='footer-content'>
 <div class="row fill">

   <div class="col d-flex justify-content-center align-items-center">
     <p class="white-text">
         Message Board Coders<br>
         12345 Your Street<br>
         Town, IN 44444
     </p>
   </div>

   <div class="col d-flex justify-content-center align-items-center">
     <p class="white-text">
       (c) 2018 by Message Board Coders
     </p>
   </div>

   <div class="col d-flex justify-content-center align-items-center">
     <p class="white-text">
         We build cool websites.<br>
         Just take a look at this<br>
         awesome message board!
     </p>
   </div>

 </div>
</nav>
```

Then copy and paste the following CSS rules into footer.component.css.

```css
#footer-content {
     border-radius: 0px;
     position: fixed;
     width: 100vw;
     bottom: 0rem;
     text-align: center;
}

.white-text {
     margin-bottom: 0;
}
```

Serve up your website and you should have a footer after your content! (Again, no errors in the console)

[Routing](https://github.com/eleven-fifty-academy/javascript-401-angularfirebase/tree/cd056696f6aca32f91fe3f3b0eac66417a74aa86/AngularPartOne/AngularPartOne/1.4.md)
