Implementing Bootstrap into the HubSpot Template Builder

Coders like you and I sometimes look to template builders for guidance. It’s a good place to start, and Hubspot has a stellar template builder. That’s great, but it’s built on the Bootstrap 2 framework. Bootstrap, that offers features like the bootstrap menu builder, is currently on version 3 and the beta version 4 was released December 2015. This means that the code base is a little outdated, and it may not be the best framework for your website.

I’m going to explain the process we use at Leighton Interactive which includes building a custom site without the use of the template builder. Take note - this is for experienced developers only. If you don’t have a solid grasp on HTML, CSS, and Javascript, I recommend using the template builder. Another type of code we’ll be working with is HubL, a Hubspot specific code based off Jinja.

Let’s assume you have a static site fully built out with HTML. For this demo, I have a Home, About, Blog, and Contact Page. We’re going to be taking these files and copying them into Hubspot.

I have a base template that follows the exact same folder structure as Hubspot.

Custom

blog

email

page

system

To keep things organized, I create a folder inside each folder with a template name. For example, inside the blog folder, I have a folder created name temp. Inside the page folder, I also have a folder named temp.

This allows me to keep my projects organized. For example, a 2014 theme can be separate from your updated 2016 theme. The name temp is just an example and can be named anything you’d like.

The next step is to modify our templates with HubL code. For more information on HubL, go here for documentation. Hubspot also checks your code for errors. If the code has an error, it will alert you. This ensures your code is solid.

The final step is to upload your files using Hubspot’s FTP. Remember, you can use whichever FTP client you’d like, but I’ll be working with Sublime SFTP for this demo. You can find setup instructions for some popular clients here. Per their instruction for Sublime SFTP, I have my handy sftp-config.json file set up. Now I can upload my project folder to their servers and they will be ready to use.

That’s it! Now that you have your basic starting template and have modified a few content pieces with HubL code to make them editable, you can run with it. You can utilize this same methodology to develop your blog listing and blog post templates as well.

Happy coding!

About The Author

With a passion for clean, fast and modern websites, I continue to research the latest trends and push the envelope to stay at the forefront of modern web design. As the front-end web developer for Leighton Interactive, I utilize my knowledge of HTML, CSS and JavaScript to develop beautiful, dynamic websites. In my spare time you can find me enjoying the great outdoors - camping, hiking and kayaking. Inside you’ll find me engulfed in music or watching football.