static width at col-xl-* (Bootstrap 4)?

Question

How can I forbid at col-xl-* that it stops growing for bigger monitors? When I view it on my laptop (1280 width) and on the desktop (1920), both applys to col-xl but it's either too big on the desktop or too small on the laptop.

<div class="d-flex justify-content-center align-items-center text-center login-div ">
    <div class="col-md-6 col-sm-8 col-lg-5 col-xl-3 col-10 rounded-10 mask"></div>
</div>

Thanks.

Answer 1

One option is to use media queries and define a max-width, probably for Bootstrap's xl breakpoint:

@media (min-width: 1200px) { /* xl */

  .your-class {
    background: yellow;
    max-width: 200px;
  }
}

<div class="your-class">Hello</div>

Using the above code, elements with class .your-class will have a maximum width of 200px if the viewport width is at least 1200px.