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 <p> element.

Let’s see "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.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?