How to increase width of Bootstrap container on Max width?

In Bootstrap 4 use:

@media only screen and (min-width : 1200px) {
    .container { max-width: 1500px; }
}

The solution that worked in this case and still allowed the container to resize on smaller resolutions, was to target the CSS using @media:

@media only screen and (min-width : 1200px) {

    .container { width: 1500px; } 

}

I needed mine to work with an extra large screen as well, so I added below.

/* large devices */
@media (min-width: 1200px) {
  .container {
     max-width: 1200px;
   }
}
/* extra large devices */
@media screen and (min-width: 1800px) {
  .container {
    max-width: 1800px;
  }
}

None of the answers above are good solutions. You can easily change bootstrap's variables by creating a new _project_variables.scss and import it before bootstrap in your main scss file. For example:

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;