Why are my Angular Material buttons and links being underlined/outlined?

Issue

I am experiencing some strange outlining after clicking a button that uses any of the variations of mat-button from Angular Material as well as link tags being underlined when I hover the mouse over them.

Button oulining after the button is clicked.

Link underlining when mouse hovering.

I'm using Angular 6, Angular Material and also a little of Bootstrap 4. The code for the images above is simply this:

<div class="container">
    <div class="row">
        <h1>Hello</h1>
    </div>
    <div class="row">
        <button mat-raised-button>Click me!</button>
        <a mat-button>Click me too!</a>
    </div>
</div>

Solution

While posting the question, I found out that the problem was Bootstrap, but I decided to post the question either way as a way to document this behavior.

In order to fix this, either remove Bootstrap or follow what is described here. The solution is described when the author of the post creates two Sass partials _variables.scss and _reset.scss.

There is also another good guide on using Bootstrap and Angular Material here.

Answered By - vamcs