0

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>

enter image description here

sfgroups
  • 18,151
  • 28
  • 132
  • 204

1 Answers1

0

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.

External resources

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
Roy
  • 7,811
  • 4
  • 24
  • 47