Are there css classes from breakpoints like in other responsive frameworks

Develop, Build & Integrate CMS Development
1

Hello,

So I’m pretty new to building hubspot templates, and have no prior expereince with Bootstrap 2. I have used Bootstrap 3 and Zurb’s Foundation. So I do have plenty of experience with responsive design.

Does anyone know of any css classes I can use to specify the stacking/column widths at certain breakpoints. For example in Bootstrap 3 you can use something like class=“col-md-6 col-lg-4”. Which anyone who is familiar with Bootstrap 3 would know that the column would span 6 on medium screen size, 4 on large screens and then 12 on small.

It seems in the COS responsive grid it only stacks on small screens. I can’t seem to find anything in the hubspot docs about this nor the Bootstrap 2 docs.

While I can achieve what I want to using css media queries, I was hoping to not to have to spend a bunch of extra time doing that.

2

@RyanPatterson,

You should look up the documentation to Bootstrap2 because it is more basic than Bootstrap3. You don’t use col-size-number your class is instead span1-12 and all spans are changed to 100% at 768px wide. Much more basic.

Also Hubspots frame work is derived from Bootstrap2. It’s basically a stripped down version with some minor alterations such as “container” is “row-fluid-wrapper” and “row” is “row-fluid”. Little things.

Your best options is to get familar with Hubspots frame work structure (use the inspector on a Hubspot template) and then write some custom css that works with it instead of against it.