Bootstrap Sass mixin for container?

There appears to only be one mixin for containers in Bootstrap 3. It is:

@mixin container-fixed($gutter: $grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor(($gutter / 2));
  padding-right: ceil(($gutter / 2));
  @include clearfix;
}

Even when I define these variables as

$grid-columns:      12;
$grid-gutter-width: 30px;

The container does not have a max-width or breakpoints. There is no official documentation on how to properly use this mixin to define containers. Does anyone understand how to resolve this?

Okay. I also needed to add this to my particular class:

@media (min-width: $screen-sm-min) {
    width: $container-sm;
}
@media (min-width: $screen-md-min) {
    width: $container-md;
}
@media (min-width: $screen-lg-min) {
    width: $container-lg;
}

Solved my problem.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.