A .row is a wrapping flex container. A plain .col has flex: 1 0 0, so .col siblings share free space equally; .col-N fixes the column at N twelfths (.col-5 is width: 41.66666667%); .col-auto fits its content. Twelve divides by 2, 3, 4 and 6, so halves, thirds and quarters come out exact. Place content only inside columns and only columns directly inside rows, because column padding is what cancels the row's negative margins.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>[class^="col"] { border: 1px solid #1565c0; background: #e3f2fd; }</style>
<div class="container text-center py-2">
<div class="row mb-2">
<div class="col">col</div><div class="col-5">col-5</div><div class="col-auto">col-auto</div>
</div>
<div class="row mb-2">
<div class="col-sm-4">col-sm-4</div><div class="col-sm-8">col-sm-8</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8 (100% below 768px)</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
</div>
</div>