'Override Bootstrap class with scss, but only when the Bootstrap class is nested under a custom class
I'd like to customize a Bootstrap class (btn, in the following example), but only when it's nested under my own class (banner-message, in the following example):
<div class="banner-message">
<button class="btn btn-primary">Click Me!</button>
</div>
This is the SCSS (live demo):
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
text-align: center;
width: 300px;
btn {
border-radius: 8px;
color: orange;
}
}
I tried following this answer, and enclose my classes' file with the following, but it didn't work:
@import "bootstrap/btn";
... my classes' definitions
@import "bootstrap";
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
