Understanding Bootstrap Grid – Column Wrapping
Bootstrap ships with very powerful 12 column bootstrap grid system. It makes our life easier for building a mobile first responsive website. When we say 12 column grid it means each is divided into equal 12 columns and those can be placed in one single row.
Each column element should be inside element having class ‘row’ so it can stack your column elements properly. Let’s look into one element having column element divided into equal 12 parts, we can have various combinations for the same.
It will be all right if we use perfect 12 columns in one row, but what happen if we add more than 12 columns in a row? Not to worry, it will stack your grid to next line and all these things are done by bootstrap itself. We don’t need to write any extra CSS stuff to make it happen. [Free Bootstrap Website Templates]
Here you can see that we have more than 12 columns added in a single row, in that case, rows which do not fit in one line goes to next line. You can see the same thing in the demo page. In next article, we will see about column ordering with twitter bootstrap.
More in Tutorials
