CODEWITHSUNDEEP
twitter-bootstrapsassbootstrap-4
Ivan Topić
Ivan Topić

Reputation: 3185

How can I add custom breakpoint in Bootstrap 4 and use it for both up and down?

How can I add custom variable in Bootstrap 4 and use it as a breakpoint for both up and down?

Breakpoints are used like this 

@include media-breakpoint-up(md) {
   // 
}

I can add custom size (they need to be sorted otherwise it is error)

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    mycustomvar: 850px,
    lg: 992px,
    xl: 1200px
);

And I tried to use them

.current-menu-item {
   @include media-breakpoint-up(mycustomvar) {
       font-size: 2222px;
   }
   @include media-breakpoint-down(mycustomvar) {
       font-size: 1111px;
   }
}

This seems to be working for up, I get

@media (min-width: 850px) {
    .current-menu-item {
        font-size: 2222px;
    }
}

But for down it fails with wrong breakpoint

@media (max-width: 991.98px) {
    .current-menu-item {
        font-size: 11111px;
    }
}

Upvotes: 1

Views: 683

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

When there is another breakpoint below, Bootstrap subtracts .02px when constructing the media query. Otherwise you'd have overlapping @media queries like this...

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 992px) { ... }

Remember, any breakpoint starts at the given px width, so the next down smaller breakpoint must be less than the min px width of the larger breakpoint. Read more in the docs

Here's the Bootstrap 4 breakpoint-max @function:

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
}

If you want to go ahead an have overlapping media queries for the custom breakpoint, override the bootstrap-max function (removing the .02px subtraction)...

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints), null);
}

Demo

Upvotes: 1

Related Questions