Angular 7 + Bootstrap 4

Installation

ng new mybootstrapweb
cd mybootstrapweb
npm i bootstrap

src/styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

Compile and test

ng serve -o

Header / Footer

ng g c template/header
ng g c template/footer

template/header.component.html

<header class="navbar bg-primary">
  <span class="navbar-brand text-light" routerLink="/">Profile</span>
  <span class="ml-auto">
    <button class="btn btn-info mr-2" routerLink="/about">About</button>
    <button class="btn btn-info" routerLink="/contact">Contact</button>
  </span>
</header>

template/footer.component.html

<footer class="navbar fixed-bottom bg-danger">
  <span class="m-auto text-light">Copyright © 2019 - Fernando</span>
</footer>

Home / About / Contact

ng g c pages/home
ng g c pages/about
ng g c pages/contact

pages/home.component.html

<div class="container text-center"> 
  <h1>Fernando Ruiz</h1> 
  <img class="img-fluid" src="../../../assets/fernando.jpeg"> 
</div>

pages/about.component.html

<div class="container">
  <h1>About Me</h1>
  <p>I am passionate about Microsoft .NET technology and likes to share knowledge with the .NET developer's community.</p>
  <p>I am a contributor in Microsoft and the ASP.NET developer community.</p>
    
  <p>MVP Award Winner | Community Author | S/W Developer & Programmer | Blogger | Community Award Winner | Most Valuable Blogger(MVB).</p>
</div>

pages/contact.component.html

<div class="container ">
  <h1>Contact Me</h1>
  Please mail me on the below-mentioned mail-id: [email protected]
</div>

All together

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
    
import {HomeComponent} from './pages/home/home.component';
import {AboutComponent} from './pages/about/about.component';
import {ContactComponent} from './pages/contact/contact.component';

const routes: Routes = [
  {path: '',component: HomeComponent},
  {path: 'about',component: AboutComponent},
  {path: 'contact',component: ContactComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }