Bootstrap 4 container class

Example

<div class="container" style="background-color: #b3b7bb">container</div>
<div class="container-sm" style="background-color: #2DEA4A">container-sm</div>
<div class="container-md" style="background-color: #ffc107">container-md</div>
<div class="container-lg" style="background-color: #9fcdff">container-lg</div>
<div class="container-xl" style="background-color: #008000">container-xl</div>
<div class="container-fluid" style="background-color: #E13300">container-fluid</div>

Try it

Example

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

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

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

Bootstrap 4 container class

Example

Example

See Also