<div class='container'>.container</div>

<div class='container-sm'>.container-sm</div>

<div class='container-md'>.container-md</div>

<div class='container-lg'>.container-lg</div>

<div class='container-xl'>.container-xl</div>

<div class='container-xxl'>.container-xxl</div>

<div class='container-fluid'>.container-fluid</div>

[class^="container"]::before {
  color: greenyellow;
  background: rgb(39, 42, 53);
  font-size: small;
  padding: 0.33rem 0.66rem;
  border-radius: 1rem;
}

@media (min-width: 576px) {
  .container::before,
  .container-sm::before {
    content: "Actif";
  }
}

@media (min-width: 768px) {
  .container::before,
  .container-sm::before,
  .container-md::before {
    content: "Actif";
  }
}

@media (min-width: 992px) {
  .container::before,
  .container-sm::before,
  .container-md::before,
  .container-lg::before {
    content: "Actif";
  }
}

@media (min-width: 1200px) {
  .container::before,
  .container-sm::before,
  .container-md::before,
  .container-lg::before,
  .container-xl::before {
    content: "Actif";
  }
}

@media (min-width: 1400px) {
  .container::before,
  .container-sm::before,
  .container-md::before,
  .container-lg::before,
  .container-xl::before,
  .container-xxl::before {
    content: "Actif";
  }
}