Bootstrap staged donation pages on NationBuilder websites

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

View the live example


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 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.




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




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.



Get the code

View demo