Use container width in Bootstrap 4

Question

We have recently changed to Bootstrap 4, and I'm looking into all the new ways to set widths, breakpoints etc.

I want to make a div have a max-width of the current breakpoint's container width, but I can't find the standard SASS variable name for that specific width.

Note that I can't use classes (e.g. .col-xl-) for this, since I don't have access to this specific part of the HTML.

Answer 1

Have a look at this built-in mixin:

// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
    @each $breakpoint, $container-max-width in $max-widths {
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            width: $container-max-width;
            max-width: 100%;
        }
    }
}

You can create a similar one to your needs like:

@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;
        }
    }
}

and use it:

.my-custom-class{
   @include make-max-widths-container-width();
}

"Compiled" CSS produced (with default values on breakpoints and container widths):

@media (min-width: 576px) {
    .my-custom-class {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .my-custom-class {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .my-custom-class {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .my-custom-class {
        max-width: 1140px;
    }
}