# Styling your Bootstrap project with Bootswatch and SASS

**URL:** <https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995>\
**Category:** Tutorials\
**Created:** [April 22, 2020, 11:05am UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995 "2020-04-22T11:05:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 22, 2020, 11:05am UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/1 "2020-04-22T11:05:07Z")

</div>

This tutorial is now available from: [https://pinegrow.com/tutorials/styling-your-bootstrap-project-with-bootswatch-and-sass/](https://pinegrow.com/tutorials/styling-your-bootstrap-project-with-bootswatch-and-sass/)

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

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [April 22, 2020, 11:40am UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/2 "2020-04-22T11:40:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 22, 2020, 1:16pm UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/3 "2020-04-22T13:16:21Z")

</div>

This should be fixed (shift+reload to prevent cache effect).  
Thanks for the feedback. 👌🏻

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 22, 2020, 2:02pm UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/4 "2020-04-22T14:02:46Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/be29a94420e500cc9f7eb776a43f01c1ef425f87.jpeg)

Here, I have selected the **sktechy style** , and I load the [https://bootswatch.com/sketchy/](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.

 ![Screenshot 2020-04-22 15.57.51](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/79bd7bb6398e979aac8e9a43e42a0cbf81f4bded.jpeg)

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [June 16, 2020, 1:38pm UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/6 "2020-06-16T13:38:33Z")

</div>

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…

```auto
/* 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 -

> **[Customize Bootstrap 4 themes | Pinegrow Web Editor](https://pinegrow.com/docs/bootstrap-visual-editor/customize-bootstrap-4-themes/)**
>
> See how you can use Pinegrow to customize your Bootstrap 4 theme by modifying Bootstrap SASS variables and adding CSS rules.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [June 16, 2020, 7:24pm UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/7 "2020-06-16T19:24:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BryantDesigns](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/bryantdesigns/32/2774_2.png) [@BryantDesigns](https://forum.pinegrow.com/u/BryantDesigns)\
**Post date:** [August 9, 2020, 4:25pm UTC](https://forum.pinegrow.com/t/styling-your-bootstrap-project-with-bootswatch-and-sass/3995/8 "2020-08-09T16:25:31Z")

</div>

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.