Skip to Content
Learn
Learn Bootstrap 4: Grid
Setting Column Width with Content

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.

Instructions

1.

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.

Folder Icon

Sign up to start coding

Already have an account?