Implementing Bootstrap into the HubSpot Template Builder

Author \ Josh Gauerke
11.19.18
Website

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.

For demo purposes, I’ll be using Sublime Text as my code editor and the Sublime SFTP plugin as my FTP client, but you have the ability to use any editor of your choice and upload via Hubspot’s FTP Uploader.

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

  • Custom
    • blog
    • email
    • page
    • system

hubspot-bootstrap-blog-1.png

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.

hubspot-bootstrap-blog-2.png

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.

Let’s take a look at my very generic default.html file:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Website Title</title>

<meta charset="utf-8" /> 

<!-- Bootstrap -->
<link href="system/temp/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="system/temp/styles.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div class="wrapper">

<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/HubspotCosDemo/page/default.php">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="../blog/blog-listing.php">Blog</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<div class="jumbotron text-center">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Page Header</h1>
</div>
</div>
</div>
</div>

<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem animi, quod repellat a vero aliquam minus veritatis vel doloremque, asperiores facere voluptates, quaerat rem. Nostrum et magnam officia recusandae repudiandae dolores, quos nisi autem, placeat voluptatem sunt laborum sapiente consectetur quis? Quibusdam natus quisquam eaque vel ex repellendus magni, eius, sint eum, illum quod aliquam ullam voluptas. Porro repudiandae illum blanditiis suscipit deserunt qui odio et unde quo nostrum veniam omnis cumque officia provident ipsa quasi aliquid, magnam molestiae, necessitatibus a animi, maxime accusantium ullam? Vitae, architecto dolore possimus blanditiis repellat ab dolores ut quibusdam nostrum consequuntur reprehenderit, iure debitis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, dolores aliquid. Dolorum pariatur, perferendis qui totam eligendi adipisci hic voluptatum excepturi natus perspiciatis illo consequuntur distinctio unde accusamus et cupiditate mollitia? Asperiores totam vitae, necessitatibus esse blanditiis. Pariatur eaque incidunt numquam amet repudiandae quas commodi mollitia blanditiis eligendi aliquam.</p>
</div>
</div>
</div>
</div>

<footer>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>© Copyright 2016 - Company Name</p>
</div>
</div>
</div>
</footer>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="system/temp/bootstrap.min.js"></script>
<script src="system/temp/scripts.js"></script>
<script src="system/temp/scripts.js"></script>

</body>
</html>

Let’s then split out the header into a separate file. I’ll cut out everything from line 1 to line 55, leaving me with this:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Website Title</title>

<meta charset="utf-8" /> 

<!-- Bootstrap -->
<link href="system/temp/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="system/temp/styles.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div class="wrapper">

<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/HubspotCosDemo/page/default.php">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="../blog/blog-listing.php">Blog</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

I’m going to take the header code and paste it into the header.html file located in the /system/temp/ folder.

Now we have to make a few tweaks to the header.html file using HubL code.

Update the title:

<title>Implementing Bootstrap into the HubSpot Template Builder</title>

Add the following to the <head> section:

Update the stylesheet links:

<link href="" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="" rel="stylesheet">

* Optional - Replace the nav ul with the HubL menu

* Note: this requires some custom javascript to utilize the Bootstrap nav. The alternative is to use the default Hubspot menu and stylize it to your needs. More info can be found here.

And now, let’s do something similar with the footer. I will cut everything from line 79 to the end (line 97) and paste it into the footer.html file located in the /system/temp/ folder.

<!DOCTYPE html>
<html lang="en">
<head>

<title>Website Title</title>

<meta charset="utf-8" /> 

<!-- Bootstrap -->
<link href="system/temp/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="system/temp/styles.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div class="wrapper">

<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/HubspotCosDemo/page/default.php">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="../blog/blog-listing.php">Blog</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

I’m going to take the header code and paste it into the header.html file located in the /system/temp/ folder.

Now we have to make a few tweaks to the header.html file using HubL code.

Update the <title>:

<title>Implementing Bootstrap into the HubSpot Template Builder</title>

Add the following to the <head> section:

Update the stylesheet links:

<link href="" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="" rel="stylesheet">

* Optional - Replace the nav ul with the HubL menu

* Note: this requires some custom javascript to utilize the Bootstrap nav. The alternative is to use the default Hubspot menu and stylize it to your needs. More info can be found here.

And now, let’s do something similar with the footer. I will cut everything from line 79 to the end (line 97) and paste it into the footer.html file located in the /system/temp/ folder.

<footer>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>© Copyright 2016 - Company Name</p>
</div>
</div>
</div>
</footer>

</div><!-- C5 Wrapper End -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="system/temp/bootstrap.min.js"></script>
<script src="system/temp/scripts.js"></script>
<script src="system/temp/scripts.js"></script>

</body>
</html>

Here’s what our header.html file looks like now:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Implementing Bootstrap into the HubSpot Template Builder</title>

<meta charset="utf-8" /> 



    
    
    
    
    

    

    
    









    

    





































<!-- Bootstrap -->
<link href="" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div class="c5wrapper"><!-- C5 Wrapper Start -->

<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/HubspotCosDemo/page/default.php">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="../blog/blog-listing.php">Blog</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 </ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Now we have to make a few tweaks to the footer.html file using HubL code.

Add <!DOCTYPE html> to line 1

Add to line 2

Replace the company name with Vye

Add

just before the </body> tag

Update the javascript links:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src=""></script>
<script src="../system/scripts.js"></script><script src=""></script>

Here’s what our footer.html file looks like now:

<!DOCTYPE html>


    
    
    
    
    

    

    
    









    

    





































<footer>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>© Copyright 2016 - Vye</p>
</div>
</div>
</div>
</footer>

</div><!-- C5 Wrapper End -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src=""></script>
<script src="../system/scripts.js"></script><script src=""></script>










    



    



















   
 



</body>
</html>

The final step is to add the modify the remaining code from our default.html file now that the header and footer code has been stripped out. Currently, we have this remaining:

<div class="jumbotron text-center">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Page Header</h1>
</div>
</div>
</div>
</div>

<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem animi, quod repellat a vero aliquam minus veritatis vel doloremque, asperiores facere voluptates, quaerat rem. Nostrum et magnam officia recusandae repudiandae dolores, quos nisi autem, placeat voluptatem sunt laborum sapiente consectetur quis? Quibusdam natus quisquam eaque vel ex repellendus magni, eius, sint eum, illum quod aliquam ullam voluptas. Porro repudiandae illum blanditiis suscipit deserunt qui odio et unde quo nostrum veniam omnis cumque officia provident ipsa quasi aliquid, magnam molestiae, necessitatibus a animi, maxime accusantium ullam? Vitae, architecto dolore possimus blanditiis repellat ab dolores ut quibusdam nostrum consequuntur reprehenderit, iure debitis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, dolores aliquid. Dolorum pariatur, perferendis qui totam eligendi adipisci hic voluptatum excepturi natus perspiciatis illo consequuntur distinctio unde accusamus et cupiditate mollitia? Asperiores totam vitae, necessitatibus esse blanditiis. Pariatur eaque incidunt numquam amet repudiandae quas commodi mollitia blanditiis eligendi aliquam.</p>
</div>
</div>
</div>
</div>

Let’s first include the header and footer we just created.

Add to line 1

Add to the very end

Now our default.html file looks like this:



<div class="jumbotron text-center">
<div class="container">
<div class="row">
<div class="col-xs-12">
Default

</div>
</div>
</div>
</div>

<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">

<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem animi, quod repellat a vero aliquam minus veritatis vel doloremque, asperiores facere voluptates, quaerat rem. Nostrum et magnam officia recusandae repudiandae dolores, quos nisi autem, placeat voluptatem sunt laborum sapiente consectetur quis? Quibusdam natus quisquam eaque vel ex repellendus magni, eius, sint eum, illum quod aliquam ullam voluptas. Porro repudiandae illum blanditiis suscipit deserunt qui odio et unde quo nostrum veniam omnis cumque officia provident ipsa quasi aliquid, magnam molestiae, necessitatibus a animi, maxime accusantium ullam? Vitae, architecto dolore possimus blanditiis repellat ab dolores ut quibusdam nostrum consequuntur reprehenderit, iure debitis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, dolores aliquid. Dolorum pariatur, perferendis qui totam eligendi adipisci hic voluptatum excepturi natus perspiciatis illo consequuntur distinctio unde accusamus et cupiditate mollitia? Asperiores totam vitae, necessitatibus esse blanditiis. Pariatur eaque incidunt numquam amet repudiandae quas commodi mollitia blanditiis eligendi aliquam.</p>

</div>
</div>
</div>
</div>

The last thing I’d like to do is turn some of our content into an editable area with HubL code. For example, I’d like to make my H1 in the banner editable. Simply swap:

<h1>Page Header</h1>

with the HubL code:

Default

You can the full documentation for the Header HubL code here.

The next piece I’d like to make editable is the main content. Let’s replace:

<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem animi, quod repellat a vero aliquam minus veritatis vel doloremque, asperiores facere voluptates, quaerat rem. Nostrum et magnam officia recusandae repudiandae dolores, quos nisi autem, placeat voluptatem sunt laborum sapiente consectetur quis? Quibusdam natus quisquam eaque vel ex repellendus magni, eius, sint eum, illum quod aliquam ullam voluptas. Porro repudiandae illum blanditiis suscipit deserunt qui odio et unde quo nostrum veniam omnis cumque officia provident ipsa quasi aliquid, magnam molestiae, necessitatibus a animi, maxime accusantium ullam? Vitae, architecto dolore possimus blanditiis repellat ab dolores ut quibusdam nostrum consequuntur reprehenderit, iure debitis!</p>

with the HubL code for the Rich Text Editor:


<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem animi, quod repellat a vero aliquam minus veritatis vel doloremque, asperiores facere voluptates, quaerat rem. Nostrum et magnam officia recusandae repudiandae dolores, quos nisi autem, placeat voluptatem sunt laborum sapiente consectetur quis? Quibusdam natus quisquam eaque vel ex repellendus magni, eius, sint eum, illum quod aliquam ullam voluptas. Porro repudiandae illum blanditiis suscipit deserunt qui odio et unde quo nostrum veniam omnis cumque officia provident ipsa quasi aliquid, magnam molestiae, necessitatibus a animi, maxime accusantium ullam? Vitae, architecto dolore possimus blanditiis repellat ab dolores ut quibusdam nostrum consequuntur reprehenderit, iure debitis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, dolores aliquid. Dolorum pariatur, perferendis qui totam eligendi adipisci hic voluptatum excepturi natus perspiciatis illo consequuntur distinctio unde accusamus et cupiditate mollitia? Asperiores totam vitae, necessitatibus esse blanditiis. Pariatur eaque incidunt numquam amet repudiandae quas commodi mollitia blanditiis eligendi aliquam.</p>

You can the full documentation for the Rich Text HubL code here.

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!

Give a little.
Get a lot.

We regularly share insights on how we approach marketing. Get on the list.
Easter Egg!