Another option we could use to set the width of a column is the content inside the column.
If we want to use the content to set a column’s width, we append
"auto" to the
class of the column, for example:
<div class="col-auto"> <p>This content determines the width of the parent column</p> </div>
In the example above, the width of the column is determined by the text inside the
"auto" in action.
Currently, the column in the first row has a width of
"12". Change the
"12" so that the width of the column is set by the content inside the column.
Notice the sizing difference after you successfully make the change.