CODEWITHSUNDEEP
htmlcssangulartwitter-bootstrapangular-material
Mellville
Mellville

Reputation: 1097

Mixing up Angular Material and Bootstrap. Good or Bad Practice?

I am new to Angular Material and as I can see it has it's own complex API.I'm comming from Bootstrap and I use all the time it's grid system regular classes like row, containers, cols, etc. I wonder if it is a good or bad practice mixing them up like this:

    <div class="container">
<div class="row">
  <div class="col-md-6 offset-md-3">
    <form class="my-form">
      <mat-form-field class="full-width">
             <mat-label>First Name</mat-label>
             <input  matInput  placeholder="First name"  name="fname"  required>
          </mat-form-field>
          <mat-form-field class="full-width">
             <mat-label>Last Name</mat-label>
             <input  matInput  placeholder="Last Name" name="lname"  required>
          </mat-form-field>
          <mat-form-field class="full-width">
             <mat-label>Address</mat-label>
             <input  matInput  placeholder="Address" name="address"  required>
          </mat-form-field>
          </form>
  </div>
</div>
</div>

If not, why?

Upvotes: 2

Views: 1257

Answers (1)

Oded BD
Oded BD

Reputation: 3276

If you use 2 libraries it will probably affect your component styling, and it's not so good.

One thing you can do to reduce the effect is to order your imports in angular.json, and put the most important style files at the end the styles list

"styles": [
          "bootstrap.css"
          "material.css"
          "src/styles.css" // yours css should be the last
        ]

Upvotes: 1

Related Questions