$container-max-widths shouldn't warn about equal widths
See original GitHub issueWe are setting a custom value for $container-max-widths
using sass and webpack, so that lg
and xl
are both 800px.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 800px,
xl: 800px
);
@import "~bootstrap/scss/bootstrap";
This leads to the following warning when building with webpack
WARNING: Invalid value for $container-max-widths: This map must be in ascending order, but key 'xl' has value 800px which isn't greater than 800px, the value of the previous key 'lg' !
Backtrace:
node_modules/bootstrap/scss/_functions.scss:16, in mixin `-assert-ascending`
node_modules/bootstrap/scss/_variables.scss:180
Instead of requiring values to be greater than the previous values bootstrap should allow them to be equal.
(Plattform: Bootstrap: bootstrap ^4.0.0-beta.2, Ubuntu 17.04, node 6.11.5, webpack 3.8.1)
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Configure .container max-width at specific breakpoints
container equal to the width of the breakpoint by default. I want to set it to a custom value (a little bit less)....
Read more >Support for using Bootstrap grid as Sass mixin includes going ...
make-container-max-widths() was deprecated because it created duplicate classes. There's no plan to remove any other mixins.
Read more >Bootstrap v4 explained: The grid and how to use it - Medium
The width of the container is generated by the make-container-max-widths() mixin. It creates a media query for every breakpoint and adds max- ...
Read more >Full Width Containers in Limited Width Parents - CSS-Tricks
The issue is: how do we make a full-browser-width container when we're inside a limited-width parent? Starting Point. This image is 100% wide...
Read more >Adjusting the Container's Size and Behavior - Elementor
If Full Width is selected, the contained elements will take the entire size of the container with no margin. Full-Width Container – Backend...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
if you dont want xl, you can just delete it (if im remember correctly)
Yup, see https://getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid for modifying those values.