Can I have a Bootstrap col inside of another col?

Yes, that’s OK to have, according to Bootstrap’s Grid Template guide:

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

However, there is a point to a Bootstrap .row, which is to apply a negative margin in order to align content. If you don’t mind gutters, or are capable of adjusting the columns yourself to account for this, then there’s no point in adding a .row container for your nested columns. You can put a .row class on the same element as .col to remove these gutters, as well (thanks to Extragory for pointing that out).

Likewise, not wrapping a column in a row will result in certain properties not applying correctly like the flex properties on the .col class. .row has display: flex, which is required for any children with flex properties to apply those properties… otherwise they will get ignored.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)