question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

$container-max-widths shouldn't warn about equal widths

See original GitHub issue

We 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:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
gijsbotjecommented, Oct 31, 2017

if you dont want xl, you can just delete it (if im remember correctly)

2reactions
mdocommented, Nov 6, 2017
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found