MENU


Responsive Breakpoints

You can specify a responsive breakpoint (-sm, -md, -lg, -xl, -xxl) in the 'col-*' class. If the viewport is less wide than the implied width, the columns will start to stack vertically. This allows the layout to be responsive, displaying the content boxes vertically one-by-one if the viewport is narrow.

The '-auto' specifier sets the width of the column to be the exact width of its content. （Try resizing the window horizontally.)
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">
      <div class="row justify-content-md-center">
         <div class="col col-md-2">1A</div>
         <div class="col-md-auto">
            Variable width content
         </div>
         <div class="col col-md-2">1C</div>
      </div>
      <div class="row">
         <div class="col">2A</div>
         <div class="col-md-auto">
         Variable width content
         </div>
         <div class="col col-md-2">2C</div>
      </div>
      <div class="row">
         <div class="col-md-8">3A</div>
         <div class="col-6 col-md-4">3B</div>
      </div>
   </div>

</body><html>