Bootstrap 4 integration

[marfel]

can I use boostrap framewrok inside hubspot CMS? 

[Jsum]

@marfel Yes but you will need to custom code your pages. Hubspot's framework runs off of a stripped down version of bootstrap 2. You would want to use coded pages to hold your bootstrap css and javascript, then build your html on coded pages as well. I use to do this all the time with bootstrap 3 in hubspot.

[marfel]

Thanks for the response. If that is the case then you are right every html page would he to be custom coded and link to cdn of a version of bootstrap4.

[Jsum]

You can use the cdn, place the files into hubspots file manager and use hubspots cdn, or create a coded page for each of the files and link it to your html pages using the public url (found in the actions drop down).

The reason you have to code the html as apposed to using the drag and drop builder is because the drag and drop builder automatically adds bootstrap 2 classes (span1, span12, etc.) and the code can't be accessed to change this without some rediculous and invasive javscript play. 

I build around 15 hubspot sites a year and custom code 70% of them. I always build the templates locally as html/css/js templates. I then plug all of the assets into hubspot and use HubL to make my content editable (http://designers.hubspot.com/docs/hubl/hubl-supported-modules). It's higher level development but allows for maximum control over your templates and is pretty easy once you get use to the jinja sytax that Hubspots HubL uses. Hope that Helps.

[gwineman]

By doing this, does it remove all page builder functionality for my users?

[Jsum · Accepted solution]

Hi @gwineman ,

no, it shouldn't. You have full control over the markup you wrap your editable fields in. Using the traditional drag and drop editor, you have the ability to wrap modules in specific html. Using the custom module editor makes this much simpler, though. 

Here's an example of how that works:

a template builder template, with flexible columns used in the header, footer, and body section. A preset collection of modules attached to each. This template does not need to have any css or javscript document attached to it. In this example, the modules will do all of the structural work for the site, so the css and js should be directly connected to the modules, not the template.

Drawing of a Hubspot template builder template using flexible columns

An Example of a custom module in the custom module editor. This module is using bootstrap 4 class controls. The bootstrap css and js can be attached to each module directly, if/as needed. if a module does not require js then it isn't necessary to include framework js to a module. Notice the use of the container class within the module. in bootstrap, this is equivalent to  how a lot of hubspot developers use "page-center". It is the section width control for the framework. This means that each module will make up a section of a page. You can use custom module fields to make options and take full advantage of bootstrap features.

Drawing of a Hubspot custom module using bootstrap

There use to be two issues with using bootstrap in Hubspot:

1. There used to not be a way to control the markup output by the advanced menu module. a list of menu variables have been added to the hubl documentation that should make this possible now: https://designers.hubspot.com/docs/hubl/hubl-supported-variables

2. the jquery version forced on hubspot templates was out of date for use with bootstrap 3-4. There is now a drop down option in your portal settings that allows you to change the jquery version.

[gwineman]

This is PERFECT! 

Thanks so much for the detailed answer. I'm just digging into Hubspot and this will be very helpful.