How to increase the max-width of the container with bootstrap4?

Question

I can not increase the maximum width of my container. How to change the width in the source code?

I already tried to change the size of the width in the bootstrap-grid.css page.

The Element Inspector allows me to change the max-width. How to modify the _grid.scss: 6 file?

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

Answer 1

The browser is showing the SASS maps. If you want to simply use CSS, override each container breakpoint...

@media (min-width: 576px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: ??px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: ??px;
  }
}

CSS Demo: https://www.codeply.com/go/zTBLpNsTDi
SASS Demo: https://www.codeply.com/go/5D8PrphU4b

---

Also see: Set Bootstrap container class to 940px max

Or, using SASS: Bootstrap 4 min width fluid container (change responsive behavior)