Bootstrap staged donation pages on NationBuilder websites

A quick tutorial to update NationBuilder’s staged donation pages for use with the Bootstrap template.

Relevant Files

HTML: pages_show_donation_wide.html
SCSS: _staged-donations.scss
JS: jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, staged-donations.js

The problem?

The standard bootstrap donation page looks like this:

The standard NationBuilder donation page using the Bootstrap template

The solution?

This is based on the original post by the NationBuilder team that explains how to add a staged process to a donation page on the Aware theme. Our code below includes a few general improvements as well as the necessary updates for use with the Bootstrap theme:

1. Download all 5 files found at this link and upload them to your theme. You will need to make sure you’re using a custom theme to complete this step (more info here)

2. In the theme.scss file, import the _staged-donations.scss partial.

A screenshot of the theme.scss file (the new line to add is the final one visible in this image)

3. In the layout.html file, include the JS files just before the closing </head> tag

Add these 3 JavaScript files directly before the closing </head> tag in the layout.html file

4. And that’s it :) If you wish, you can change the colours and other styles for the staged donation page in the _staged-donations.scss file.

Here is the live example site, visible at http://learn.codenation.com/donate

Get the code

View the Live Site


Have any questions about how all this works? We’re always happy to help info@codenation.com