NG Bootstrap NG alert is not working - ng-bootstrap

Question

I am following getting started guide https://ng-bootstrap.github.io/#/getting-started. trying the basic alert to work. it display the alert message not the style with bootstrap style sheet.
Any idea what I am missing here?
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,NgbModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<p>
<ngb-alert [dismissible]="false">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>
</p>

Answer 1

ng-bootstrap is only adding the functionality of the features, it's not adding actual styles. What you need to do is add the Bootstrap CSS as a dependency.
I created this StackBlitz with an example. In the external resources, I added the minified CSS URL and now the correct styling shows inside the application.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css