Bootstrap staged donation pages on NationBuilder websites

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

View demo

 

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:

 

img1.jpg

 

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.

 

img2.jpg

 

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

 

img3.jpg

 

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.

 

img4.jpg 

Get the code

View demo

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