I'm using the latest version of Bootstrap, Angular, and ngx-Bootstrap. In one section of the HTML, it looks like Bootstrap's row child classes are being overwritten by _rfs.scss (see screenshot). I am not using RFS and don't know how to get rid of it. I'm importing the Bootstarp CSS in my SCSS, but I am not doing anything fancy. The HTML snippet below is using the col-lg-3, which is being set to width: 100%. package.json: ... "@angular/animations": "^15.1.3", "@angular/common": "^15.1.3", "@angular/compiler": "^15.1.3", "@angular/core": "^15.1.3", "@angular/forms": "^15.1.3", "@angular/platform-browser": "^15.1.3", "@angular/platform-browser-dynamic": "^15.1.3", "@angular/router": "^15.1.3", "@ng-select/ng-select": "^10.0.1", "bootstrap": "^5.2.3", "ngx-bootstrap": "^10.2.0", ... product-list.scss: @import "/node_modules/bootstrap/scss/bootstrap"; HTML snippet: <div class="container"> <div class="row"> <aside class="col-md-12 col-lg-3"> I've tried everything I can think of: different col- classes, different parent layers, and tuning off RFS with $enable-rfs: false;. If I uncheck the width: 100%, it works as expected. Ideas? Continue reading...
