Whenever I click on a button in my app, I notice that it gets a blue border around it, especially in Chrome. To try and remove this border, I attempted the following:
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints.scss';
@import 'global.scss';
@import "~bootstrap/scss/bootstrap";
$grid-breakpoints: (
sm: 768px,
md: 768px,
lg: 1024px
);
$container-min-widths: (
sm: 768px,
md: 768px,
lg: 1024px
);
//resets;-
html,body {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper.container-fluid{
min-height: 100%;
padding:0;
margin: 0;
}
.btn:focus,.btn:active { //but not works!!
outline: none !important;
box-shadow: none;
}
Despite implementing these changes, I still see the blue outline remaining. Can anyone point out where I might have gone wrong? Your help is appreciated.