Currently, I am utilizing the angular7 application along with bootstrap 4.2.1. Although Bootstrap provides numerous breakpoints, I only require three specific breakpoints for my project. To achieve this customization, I made modifications in the following way:
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';
$grid-breakpoints: (
sm: 320px,
md: 767px,
lg: 1024px
);
$container-min-widths: (
sm: 320px,
md: 768px,
lg: 1024px
);
@import "~bootstrap/scss/bootstrap";
@include media-breakpoint-up(lg) {
body{
background:green;
}
}
@include media-breakpoint-up(md) {
body{
background:yellow;
}
}
With these changes, my app now operates on only three specific breakpoints and minimum widths. However, I noticed that when I specify a class property for the md breakpoint, it also applies to the lg breakpoint. Can someone point out what might be wrong here and provide guidance on how to effectively customize the properties for the designated breakpoints?