Search code examples
angularsassbootstrap-4angular5media-queries

How to add media queries in Angular5 using Sass & bootstrap 4.1.3

I have been working on a project having multiple pages. Its web version is almost complete & i need to work on responsive now. As , i am new to angular I want to know how should i add media queries in angular5 using SASS & Bootstrap.

I did some R&D on it and found a way to add media in the css file, something like this:

/**** Define media breakpoint variables**/
$desktop: 960px
$tablet: 768px
$mobile-large: 640px
$mobile: 480px
$mobile-small: 300px

/**** mix your media queries inside a class that you want to change**/
.item
  width: 25%
  display: inline-block
  @media only screen and (max-width: $tablet)
    width: 50%
  @media only screen and (max-width: $mobile-large)
    width: 100%

What is correct standard.

Thanks

Solution

  • If you use bootstrap & SASS it's might be like this:

    @include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

    More info in docs: https://getbootstrap.com/docs/4.0/layout/overview/