Bootstrap v4 grid sizes / Sass List

Question

I'm trying to use Bootstrap v4 variables in my project, but it is stored inside an array (_variables.scss):

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

How can I refer to it in my sass:

@media(max-width: $grid-breakpoints[xs]) {
  font-size: 20px;
}

Please, consult the SASS documentation. It is a basic feature of the language. Search for `import`. — This company is turning evil., Sep 17 '16 at 11:50
@Kroltan your rtfm comments are unproductive, this is a q&a site and it's a legit quesiton. — whitneyland, Oct 02 '17 at 19:52
@Lee At the time of writing, I probably did not have time to post a full answer. In my point of view, suggesting what to search for is at least more productive than not saying anything at all. — This company is turning evil., Oct 02 '17 at 21:44

Carol Skelly · Answer 1 · 2016-09-17T12:34:26.717

You can use $map-get..

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
  [class*='col-'] {
    font-size: 20px;
   }
}

There are also several breakpoint mixins in Bootstrap 4 that can be used to target a specific breakpoint...

@include media-breakpoint-between(sm, md){
  ...
}

@include media-breakpoint-only(lg){
  ...
}

1 Answers1