Styling your Bootstrap project with Bootswatch and SASS

This tutorial is now available from:

Have questions or comments about this tutorial? Let’s talk about it!


The : is missing in the link on the tutorial page!

This should be fixed (shift+reload to prevent cache effect).
Thanks for the feedback. :ok_hand:t2:

A useful tip.

If you want to SEE the Bootstrap components BUT with the Bootswatch style that you have selected, just use a custom page library and enter the URL of the demo from the style you have selected.

Screenshot 2020-04-22 15.59.33

Here, I have selected the sktechy style, and I load the URL as a library.

Then I can clearly see the look of the elements that I can drag/drop into my page/tree.


Thanks for this wonderful tutorial!

Minor feedback - would be good to have the imports in custom.scss under the relevant comments like below, as the order matters, and it’s also a good way to understand what the two bootswatch files are…

/* Bootstrap theme customized with Pinegrow Web Editor */

/* Vars go before the @import */
@import "variables";

/* Import the Bootstrap files */
@import "bootstrap/bootstrap";

/* Custom CSS rules come here */
@import "bootswatch";

.lead-text {
    color: $green

this also syncs with the flow in the main bootstrap customization documentation -

Hi @Akayy
Thanks for the feedback! You are right. For tutorial purposes I should have been a little more clear with this. In the end, the file load order is correct, but adding the comments in between makes it clearer.

1 Like

Do I need to delete the original bootstrap folder from my project? When I customize bootstrap everything looks fine while in Pinegrow but once I upload to the host it defaults back to normal bootstrap.

As an example if I changed $primary: $blue; to $primary: $gold; It shows up perfectly in Pinegrow but goes back to the default color once uploaded.