Card headers broken

Topic: Card headers broken

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.

Add comment

Rafał Rogulski answered 7 years ago

1 0 Best answer

Hi,

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

"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb.scss"

Regards

Add comment

Rafał Rogulski answered 7 years ago

0 0 Best answer

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: https://mdbootstrap.com/angular/components/cards/ Regards

Add comment

niellangenhoven answered 7 years ago

0 0 Best answer

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 https://mdbootstrap.com/angular/components/forms/):

<div class="card" style="margin-top:50px"> <div class="card-body"> <div class="form-header green darken-1 white-text"> <strong>Login</strong> </div> <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> <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> <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> </div> </div> </form> </div> </div>