How to Use the Bootstrap Grid with Oxygen Builder

[@kengmick]

Sunny, you're a lifesaver! I'm migrating that OpenCart site to WooCommerce/Oxygen Builder. The OpenCart site uses bootstrap configured grids in numerous Rich Text elements, including information pages, products, product category descriptions, brands, etc. This tutorial gets me 90% of the way to styling the content. Thank you.

[@atomicpx]

This is so killer and yet useful! Thanks man.

[@NewPulseLabs]

glad it helped Tom! And thanks for subscribing to the newsletter :)

[@huhuusssssss1]

This is mindblowing. It would be amazing to see your 2022 workflow. I would love to see a tutorial on headers in this workflow. SUB'D.

[@mogojoy]

This was a really cool tutorial. I didn't know you could use Bootstrap with Oxygen. I didn't even know what Bootstrap was haha. Thanks!

[@kinkkathekinky7781]

can you do tailwindcss tutorial with oxygen?

[@FIghtShark]

Nice tutorial. Please make an video where you appy oxygen+bootstrap for header menu, buttons etc. thanks

[@nikikinz]

Same here! More on Oxygen. Good video btw

[@NewPulseLabs]

Thanks Nick!

[@kalib-code]

Would love to see more of your tuts... About Oxygen..

[@NewPulseLabs]

I'll be making more :) I just wish they didn't take me so long to make haha

[@manjulbose]

Nice Job :) I need to do more of this..

[@VisiPianoOfficial]

Quick question - does Oxygen output the whole of that stylesheet regardless of whether any CSS classes are used or not? for example if you only made use of 'col-md-6' would the frontend still load the whole of the pasted stylesheet? Thanks for the helpful video.

[@NewPulseLabs]

Np :) Yeah, it outputs the whole thing. That's why I only wanted to copy what's useful as opposed to using the whole Bootstrap stylesheet.

[@VisiPianoOfficial]

​@@NewPulseLabs Thank you for the reply. I'm trying to find a way to implement Bootstrap or Tailwind, then scan for unused CSS after developing the site and strip it out (I know there's a plugin that does this!). However, having this CSS readily available in the backend while stripping it from the frontend is what I'm trying to figure out. If you do find an answer to this, please reply to this comment or make a video :)

[@jamieprescott100]

Great video. Do you think Tailwind could be integrated into Oxygen in a similar way?

[@NewPulseLabs]

Thanks! I haven't looked too much into Tailwind, but I don't see why not. The method used here is really simple. Just grab the CSS you need, and reference it when adding classes. The most difficult part is by far learning how to use the actual framework.

[@jamieprescott100]

@@NewPulseLabs I linked to Tailwind CSS but it messed up some of the Oxygen interface. It does work as I referenced some Tailwind classes. There just me be some issues that it causes.

[@indatext]

Would be nice to accompany page with an Oxy template set based on Bootstrap. There is no one on the market atm.

[@NewPulseLabs]

I've actually been using Tailwind as the basis of my framework now. Really been enjoying it (better than Bootstrap imo)

[@YasienSarlie]

Bootstrap or css grid in Oxygen?

[@Jeanpierre.michael]

Why add a container as the section is already a container?

[@jimbob7424]

That's just proper Bootstrap practice.