By default, Bootstrap v4 SASS comes with the following settings for $container-max-widths:
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
)
While I understand that I could use container-fluid to get the container width set to 100% all the time, I would like to be able to set certain widths to a percentage.
For example:
$container-max-widths: (
sm: 100%,
md: 100%,
lg: 940px,
xl: 1140px
);
This makes sure, that on smaller screens, the layout has a nice complete width, while on large screens it is bound to a max-width.
Except, setting these values causes an error while compiling the sass files:
Incompatible units: 'px' and '%'.
I currently override these values by adding the following to my own sass files, but it would be nice if it could be done directly from within Bootstrap.
@media (max-width: map-get($grid-breakpoints, "lg")) {
.container {
max-width: 100%;
}
}
By default, Bootstrap v4 SASS comes with the following settings for
$container-max-widths:While I understand that I could use
container-fluidto get the container width set to 100% all the time, I would like to be able to set certain widths to a percentage.For example:
This makes sure, that on smaller screens, the layout has a nice complete width, while on large screens it is bound to a max-width.
Except, setting these values causes an error while compiling the sass files:
Incompatible units: 'px' and '%'.I currently override these values by adding the following to my own sass files, but it would be nice if it could be done directly from within Bootstrap.