Comments on: Exploring the Bootstrap 3.0 Grid System

By: Herman Turso

Herman Turso — Sat, 24 Jun 2017 01:38:54 +0000

Wonderful article

By: Michael Soriano

Michael Soriano — Sat, 06 Feb 2016 20:41:17 +0000

In reply to Alice. I appreciate the comment.

By: Alice

Alice — Fri, 05 Feb 2016 15:55:32 +0000

Nice article, but you’ve got the nestig complatly wrong 😉
Putting two column 6 in one column 12 it’s a special constalation that will work, but try to make it with for example column 6 within a column 8.
If someone is using SASS or LESS, the calculating can be done easier, but if not than you need to calculate the nested cols yourself.
First of all – putting 12 grid within let’s say col-lg-8 won’t work. The measurement of each column will be wrong. Also no designer will do such a psd file.
Also putting a col-lg-2 and col-lg-6 within a col-lg-8 will not be enough. They need a new calculation, since with this nesting we are creating a new 8-col grid, which will be placed within a col-lg-8.
Example
.col-lg-8 > col-lg-6 {width: X%}
.col-lg-8 > col-lg-2 {width: X%}
Calculation:
((1000 : 8 = 125) * 100% ) / 1000 = 12.5%
col-lg-6 is 12.5 * 6 = 75%
col-lg-2 is 12.5 * 2 = 25%

By: Vince

Vince — Wed, 09 Dec 2015 02:49:58 +0000

Thanks for this. I was searching for tutorials about the Grid System of Bootstrap 3.0 but I just can’t find something that’s easier to explain to my friends.

By: ramon

ramon — Mon, 26 Oct 2015 10:52:19 +0000

In reply to Ang I.. if you have two divs that are both 6cols !! when you hide one of those divs on XS make sure that the other div on XS is not 6cols but 12cols!

By: missagaga

missagaga — Sun, 09 Aug 2015 18:24:31 +0000

In reply to Billyoldster. Billyoldster, If you find that the major flaw of this article is the missing Bootstrap-download link, you may want to consult this page first and leave bootstrap to more experienced colleagues: Google Search For Dummies However, I feel that you would benefit even more from reading this article: How to leave meaningful blog comments Hope this helps! PS: Contrary to you, you hypocrite!, I want to be sarcastic. Missagaga

By: Michael Soriano

Michael Soriano — Wed, 05 Aug 2015 22:56:15 +0000

In reply to Ang I..

yes. it is still the visibility classes that you need. So say you need to hide for xs – you use hidden-xs etc. If you need to hide not just the contents – apply that class to the container itself.

By: Ang I.

Ang I. — Mon, 03 Aug 2015 18:54:38 +0000

Super helpful article! Bootstrap makes a lot more sense now, thanks! One question I have after reading about the “Visibility Classes”. The .hidden classes actually only hide the content within a specifically styled col but the width of that col stays. Does bootstrap have any type of class that literally collapses the col instead so it removes the whole col space instead of just hiding its contents? The Extra small viewport is a lot of pixel room to work with (768px and under) so within this viewport, at a smaller screen size of 400px, I need to not only hide a cols contents but would like it’s width removed as well. Which you can easily do with any of the other built in viewports sizing down from one to the other (by applying multiple .col classes into the same divs) but since it stops at Extra small I don’t know how to force this to happen with my own @media tag.

By: Alan M.

Alan M. — Mon, 08 Jun 2015 05:50:00 +0000

Thanks for the article. It is clearly explained.
I tried to use the col-md-12 in a tag as follows:
but it makes the table width only span half the page. If I remove it the table spans the whole width of the page.
I am still new to HTML coding and CSS as a whole but this is making things all the more confusing.
Any help or explanation would be appreciated.

By: Zak Stanley Rogoff

Zak Stanley Rogoff — Mon, 13 Apr 2015 23:34:00 +0000

Well written. Thank you very much.