This tutorial is now available from: https://pinegrow.com/tutorials/styling-your-bootstrap-project-with-bootswatch-and-sass/
Have questions or comments about this tutorial? Let’s talk about it!
2 Likes
The : is missing in the link on the tutorial page!
This should be fixed (shift+reload to prevent cache effect).
Thanks for the feedback. 
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.
Here, I have selected the sktechy style, and I load the https://bootswatch.com/sketchy/ URL as a library.
Then I can clearly see the look of the elements that I can drag/drop into my page/tree.
4 Likes
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 @TechAkayy
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.
Bob
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.