Making use of the breakpoint-next mixin in Bootstrap 4 (Sass)

[TheN00b]

Hello everyone

Here is the Codepen.

Up to this point in working with Sass, I have only ever used the super simple stuff. Basically just nesting and the lighten/darken mixin provided by Bootstrap.

I realise that there are many more mixins I could use, and I now wish to use this breakpoint-next mixin:

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

My final aim is:

1. To have the search input always inline with the right column of the artists
2. On focus, have the width change towards the right (like what is currently happening on mobile devices)

I have never worked with Sass bootstrap breakpoints, what is a clean way of achieving what I am after in terms of the responsive mixins given to me by Bootstrap?

If you notice, above width 576px, then my point one is no longer true.

[TheN00b]

I can do things manually without leveraging any mixin by doing this:

@media (min-width: 576px) {
  header .search input {
    width: calc(50% - 15px);

    &:focus {
      width: 100%;
    }
  }
}

and this works, but is there no better way? I am hardcoding the 576px

[Author]

Posts