I am trying to achieve a specific behavior where the button with class .bookmark-btn is only visible on md size screens and smaller at all times. However, on lg size screens and bigger, it should only appear when hovered over. How can I accomplish this? Currently, everything seems to be working fine except that the button does not show up on hover, and there are no compilation errors:
Below is the HTML code:
<button
class="btn bg-white border-0 bookmark-btn position-absolute justify-content-center align-items-center"
>Click me</button>
And here is the SCSS code:
@import '~bootstrap/scss/functions',
'~bootstrap/scss/variables',
'~bootstrap/scss/mixins/breakpoints';
.bookmark-btn {
border-radius: 50%;
height: 20px;
width: 20px;
display: inline-block!important;
}
@include media-breakpoint-up(lg) {
.bookmark-btn{
display: none!important;
&:hover {
.bookmark-btn {
display: inline-block!important;
}
}
}
}