We’ve covered containers and rows, now we have to go one level deeper and explore Bootstrap’s columns.
Columns are the immediate children of rows and store content. By default, a column will take up the entire width of its parent row. As we add more columns inside a row, the default behavior is for each column’s width to be readjusted to fit in the row — each column will have the same width. At most, a row will accommodate 12 columns. Study the diagram below to see how column sizing works:
Notice the first row in the diagram has 1 column and it takes up the entire width of the row. We could say that this column takes up the width of 12 individual columns. The width of an individual column can be seen in the last row of the diagram.
To create a column, we assign an element with the class of "col". Take a look at the provided example with a container that has a nested row which has a nested column:
Let’s learn about this first hand by adding columns in our code!
Instructions
In index.html we have 3 rows. Let’s see what happens when we add varying amounts of columns to each row. We’ve given columns a solid border and a purple background color.
Nested inside the first row is a <div> without a class. Assign it a class of "col" to render a column.
In the second row, add two columns using <div>s.
To give the column some height, inside each <div> add a <p> element with the text Two columns in a row.
In the third row, add three columns using <div>s.
To give the column some height, inside each <div> add a <p> element with the text Three columns in a row.
Compare the sizing of the added columns. Also, expand the size of the browser to see responsive design in action!