100,000+ Ready-Made Designs, Docs & Templates to Start, Run and Grow your Business

Subscribe to Download

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.

19+ FREE WEBSITE Templates - Download Now Microsoft Word (DOC), Adobe Photoshop (PSD), Apple (MAC) Pages, HTML5, WordPress, Microsoft Publisher

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.

You may also like

Read More Articles about


161+ FREE & PRO Ready-Made Website

Professionally Made, Easily Editable Templates to Get your Work Done Faster & Smarter

View All Website Templates
Available in