Bootstrap staged donation pages on NationBuilder websites
A quick tutorial to update NationBuilder’s staged donation pages for use with the Bootstrap template.
JS: jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, staged-donations.js
The standard bootstrap donation page looks like this:
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:
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.
Have any questions about how all this works? We’re always happy to help firstname.lastname@example.org