Row updating in grid view
It introduces a new way of thinking on how the responsive grid works, when it is best applied, and how the styled elements within the breakpoints work as well.
About a month ago, I decided I wanted to jump onboard right away, so I built a new blog theme with it (the one you’re seeing) and learned quite a bit more than I assumed I would.
There are now 4 column size class variants: Now, before you panic and think “I have to write 3-4-5 freaking styles for every class I make?! Most of the time, the styles work fine at all the sizes, especially at the tablet and larger sizes. I am going to try and make these explanations as dead simple as possible.
It’s only when you see specific needs at the larger sizes that you have to add in the adjustments. You have 2 divs you want to be each 50% of the total container for both.
So here’s a little guide, tutorial, and set of some examples to get you started. If you were using the fixed width containers, there was a normal, large, tablet, and mobile size.
Bootstrap is going to say “at the medium size, I look at classes with ‘md’ in them and use those.
At the large size, I look at classes with the word ‘lg’ in them and use those.” In this case, our 2 divs will go from a 50%/50% split and then up to a 33%/66%. This can be taken to another level, where we want to change it for the extra small phone size as well.
There are now 4 different grid classes you can use to define your layouts.
This is where if you haven’t worked with a framework like this before, or you are accustomed to Bootstrap v2, it is a new way of looking at it.