CODEWITHSUNDEEP
angulartwitter-bootstrapsassbootstrap-5ng-bootstrap
SchmidtFx
SchmidtFx

Reputation: 626

Bootstrap Grid is ignoring breakpoints when import into Component SCSS file

When import Bootstrap-Grid into an Angular Component SCSS-File, then the Grid-Column Breakpoints in the HTML-File are broken/ignored.

app.component.scss

@import '../../node_modules/bootstrap/scss/bootstrap-grid';

// Some styles with media queries
@include media-breakpoint-up(sm) { ... }

app.component.html

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div> <-- will be ignored (100%)
    <div class="col-sm-4">col-sm-4</div> <-- will be ignored (100%)
  </div>
</div>

Unexpected behaviour:

The grid columns will show with a width 100%, instead of 66% and 33%. Dev-Tools (Computed) shows: that a rule of _variables.scss overwrites _grid.scss for width property.

Just remove the @import in SCSS, and the Grid works as expected. But I need also the media queries in the SCSS file for other stuff (completely independent from Grid stuff).

Environment:

Upvotes: 1

Views: 773

Answers (1)

SchmidtFx
SchmidtFx

Reputation: 626

Solution

Bootstrap 5

After import the following SCSS-files, instead of bootstrap-grid, the Grid-System works fine again.

your.component.scss

// do not import this:
@import '../node_modules/bootstrap/scss/bootstrap-grid';

// instead import this:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Some styles with media queries
@include media-breakpoint-up(sm) { ... }

Upvotes: 1

Related Questions