How to refer to $container-max-widths in Bootstrap

user_9003646 0
Viewed 15680

I am currently working with Bootstrap 4 and I've made some changes to breakpoints - it looks like that:

$container-max-widths: (
    xs: 540px,
    sm: 700px,
    md: 960px,
    lg: 1140px,
    xl: 1300px,
    g: 1560px,
    xg: 1920px
) !default;

Here's my question: how can I refer to $container-max-widths -> g to get 1560px out of it?

I'd like to do something like this, but it's not working:

max-width: $grid-breakpoints('g');

Any ideas if that's possible?

bootstrap-4 sass
4 Answers

You can create a function to retrieve the breakpoint values like so:

@function get-breakpoints($key: "md") {
    @return map-get($container-max-widths, $key);
}

.test-class {
    max-width: get-breakpoints("g");
}
user_38971220

It's possible.

max-width: map-get($container-max-widths, "g");
user_75051970

Import the following into your bootstrap files css/scss folder

  • scss/_functions.scss
  • scss/_variables.scss
  • scss/mixins/_breakpoints.scss

Then add the new breakpoints and container widths into your scss file 

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 940px,
  xl: 1000px
);
@mixin make-max-widths-container-width($max-widths: $container-max-
widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
        max-width: $container-max-width;
    }
  }
}
.container{
   @include make-max-widths-container-width();
}

So it creates a new set of widths which overrides the bootstrap width.

user_92905050

Another option that seemed to work, Bootstrap v.5, might not be the optimal way since using @extend

.your-container {
  @include make-container();
  @extend .container;
}
user_34875790
Related