Documentation - Auto-layout columns vs col-{breakpoint}-auto
Created by: Hube2
Hopefully I'm doing this right, first time here, feel free to yell at me if I'm doing something wrong. I did my best to search for anything similar.
I personally think that there can be some confusion over the difference between auto layout of columns and using the col-{breakpoint}-auto for variable width content. I actually had to read that part of the documentation several times before I really understood the difference.
For example, this will create 3 columns that are each ~33% width on sm
<div class="row">
<div class="col-sm">
1 of 3
</div>
<div class="col-sm">
2 of 3
</div>
<div class="col-sm">
3 of 3
</div>
</div>
but this will create 3 columns where the first and last are the same size (~33%) and the middle column will resize based on the content, unless I have it wrong.
<div class="row">
<div class="col-sm">
1 of 3
</div>
<div class="col-sm-auto">
Variable width content
</div>
<div class="col-sm">
3 of 3
</div>
</div>
I think it may be the use of the -auto modifier because this is referring to auto size based on the natural content width. Like I said, It took me several reading to figure out why there is a difference and I think that it needs to be clarified better in the documentation. Again, unless I'm still confused.
~JH