Topic: Card headers broken

niellangenhoven free asked 5 years ago

Hi I updated my npm packages and it broke my card headers. It seems like .card .form-header has been removed. Please assist how I can resolve this. Thanks in advance.

Rafał Rogulski free answered 5 years ago



Correct your import path in angular-cli.json for mdb.scss and bootstrap.scss:



niellangenhoven free answered 5 years ago

Hi I'm almost certain my import statements look the same. Will check tonight. Thank you so long!

niellangenhoven free answered 5 years ago


Where can I download BS 4 beta or install via npm? I'm unable to find the v4 beta.

I have the following code (trying to achieve the same as the login form here

<div class="card" style="margin-top:50px">
<div class="card-body">
<div class="form-header green darken-1 white-text">
<form class="form-horizontal"role="form" [formGroup]="loginForm">
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbActivetype="text"class="form-control col-9" id="userName" formControlName="userName" autofocus>
<label for="userName">Username</label>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input mdbActivetype="password" class="form-control col-9" id="password" formControlName="password">
<label for="password">Password</label>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success" (click)="login()" [disabled]="!loginForm.valid">Login</button>


However the output is as on the image ( Please assist.


Rafał Rogulski free answered 5 years ago

Hi,   In new MDB Angular (4.2.0 and higher) we move from Bootstrap v4.0.0-alpha.6 to Bootstrap 4 beta, some of the class changes and this can be an issue. Please check your cards code with us from documentation page:   Regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No