MENU


Container Breakpoints

Containers contain, pad, and center contents. A container represents a section of a page, flowing vertically.

<div class="container"> <!-- Content here --> </div>

The default .container class fixes the width to be one of several possibilities. If the width of the viewport (ie. screen display) is smaller than 576 pixels, the container will always occupy the full width of the viewport.

<576px >=576px >=768px >=992px >=1200px >=1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm
.container-md 100%
.container-lg 100%
.container-xl 100%
.container-xxl 100%
.container-fluid 100%

As you can see from the table above, you can append the .container class with specifiers such as -sm (ie. small). A 'small' specifier means that the container will always try to leave some space at the left and right sides, occupying the full width only if the viewport is small (ie. <576px). At the other end, the '.container-fluid' will cause the container to span the full width regardless of the width of the viewport.

Try resizing the window horizontally to see the changes.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <div class="container-sm">
      How wide is me?
   </div>

</body><html>