Is it possible to set breakpoint in pixels like "@include media-breakpoint-up(900px)" (bootstrap4)?

Question

Can I build media query using @include media-breakpoint-up(900px) in Bootstrap 4?

For example if I use:

@include media-breakpoint-up(900px){
   body: border 2px solid;
}

the output in .css will be without media query -> like this

Or it can be done only with creating of new breakpoint:

$grid-breakpoints: (
    // default breakpoints

    custom-lg: 90px,
);

and using like

@include media-breakpoint-up(custom-lg){
   body: border 2px solid;
}

What are you trying to accomplish? Are you trying to change the `lg` breakpoint? — Zim, Oct 09 '20 at 11:53
I need to specify style for elements on specific width and don`t want to create a new breakpoint for it — Evgenij, Oct 09 '20 at 11:56

Zim · Accepted Answer · 2020-10-09T13:20:43.833

1

If look at the media-breakpoint-up mixin, you'll see it expects the $name parameter, which is the name of a breakpoint, not a pixel value..

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    ...
}

But you could pass in an alternative $breakpoints map (the 2nd param) with the new value for lg...

@include media-breakpoint-up(lg,(lg:900px)){
   body { 
       border: solid red 2px;
   }
}

edited Oct 09 '20 at 13:20

answered Oct 09 '20 at 12:03

Zim

1 Answers1