Bootstrap 3<\/a>, columns are arranged in rows. Each row has a certain maximum number of columns in it. The default is 12. <\/p>\nThe columns in a row can be divided into sections, using a “col-<\/strong>” css class that indicates how many of those 12 columns you want to use for each section of content within the row. <\/p>\nThe css class also indicates the smallest screen size on which to apply that class. Any device with a screen below that size will default to using all 12. Everything above that size will use the number you specify. (You can specify for multiple sizes, too, but I’ll leave that to the bootstrap docs).<\/p>\n
So, if you want your 12 columns divided evenly into 4 sections, you’d use a span of “3”: which means you want each section take up 3 of the 12 columns. Dividing the 12 columns by the span indicates how many sections you’ll end up with. In this case, 12 \/ 3 = 4, so the row will be divided into 4 sections.<\/p>\n
In your html, the css class to make 4 even columns for all screen sizes, from size small (tablet) on up, would look like this:<\/p>\n
col-sm-3<\/code><\/p><\/blockquote>\n“col<\/strong>” = define a column span
\n“sm<\/strong>” = define the screen size at which to start using this span
\n“3<\/strong>” = the number of columns to use for this section. <\/p>\nIn a div on your page, it would look like:<\/p>\n
<div class=\"col_sm_3\"><\/code><\/p><\/blockquote>\nSo far, so good!<\/p>\n
What To Do About Empty Columns?<\/h3>\n
But what if you won’t know how many columns you’re going to need until you do some other calculation (like in my case, I have no idea if there will be any projects in a given meta-category), and you don’t want to display any empty columns?<\/p>\n
The Default Solution is Ugly<\/h3>\n
The default solution is to pick the maximum number of columns, programmatically don’t show any columns that are empty, and do some css magic to align things. But I don’t like that, because you end up with clumps of unnecessary css alignment divs all over your code. I hate having to add a bunch of nested divs in order to make things align. <\/p>\n
What If the Server Could Do It?<\/h3>\n
I thought what if, instead, the server could figure that stuff out all on its own, and automatically re-size columns based on what’s needed in a given spot at a given time. Even more important, on one page, I needed an extra column of data to co-exist alongside the meta-categories.<\/p>\n
So the problem is even bigger than not knowing how many columns I’m going to have, but not necessarily knowing how many I need them to fit alongside. In the case of the home page, from the user’s perspective, the extra column (“projects near the finish line”) is just another meta-category for projects, but from the system’s perspective, it’s something completely different, calculated separately based on the number of donations a project has received, and it needs to fit nicely with the auto-generated category columns.<\/p>\n
What I wanted to be able to do from the controller was generate the column span value, based on:<\/p>\n
\n