MENU


12 Column Width

You can divide a container into a grid of rows ('row') and columns ('col'). By default, Bootstrap horizontally divides the screen into columns of equal widths, whereas the heights of the rows are determined by their contents.

The whole container is 12 units wide by default.

Below, the cell 2B takes up 5 units of grid width, leaving 3.5 units of grid width for 2A and 2C. The '-auto' specifier sets the width of the column to be the width of its content, ie. barely fitting it.
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">
          <div class="col">1A</div>
          <div class="col">1B</div>
        </div>
        <div class="row">
          <div class="col">2A</div>
          <div class="col-5">2B</div>
          <div class="col">2C</div>
        </div>
        <div class="row">
          <div class="col">3A</div>
          <div class="col-auto">3B</div>
          <div class="col-3">3C</div>
        </div>
    </div>

</body><html>