# Best Practice When Creating Custom CSS On Top of Bootstrap

**URL:** <https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649>\
**Category:** Bootstrap\
**Tags:** css\
**Created:** [February 23, 2018, 4:32am UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649 "2018-02-23T04:32:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wcjensen](https://avatars.discourse-cdn.com/v4/letter/w/74df32/32.png) [@wcjensen](https://forum.pinegrow.com/u/wcjensen)\
**Post date:** [February 23, 2018, 4:32am UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649/1 "2018-02-23T04:32:41Z")

</div>

I was curious about your thoughts on workflow and best practices when customizing a bootstrap page. I really haven’t developed much in Bootstrap, but from what I can tell, the best way to customize Bootstrap CSS is to load a “custom.css” sheet after the bootstrap.css and override any rules you want to change, to prevent issues when upgrading bootstrap.

I’m trying to figure out how to mimic that approach while using Pinegrow.

1. I could change styles and properties straight in the doc and run a diff on the css files to create a standalone custom.css file.
2. I could create custom classes for changing properties, but I don’t think I would be able to figure out how to handle conflicting styles on elements.
3. Or I could not worry about upgrading bootstrap

Thoughts or suggestions? Thanks!

---

<div class="post-metadata">

**Author:** ![mandarin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mandarin/32/806_2.png) [@mandarin](https://forum.pinegrow.com/u/mandarin)\
**Post date:** [February 23, 2018, 7:35am UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649/2 "2018-02-23T07:35:35Z")

</div>

The easiest and fastest way is to install a local copy of bootstap css file and call it say “custom.css” then add it after call to normal css file in html pages.

Then you can just make changes to that knowing that original will remain unchanged.

with experience you can either just delete all the bits not being changed or just create a blank custom.css and add changed bits into that.

Really depends on own level of experience.

---

<div class="post-metadata">

**Author:** ![wcjensen](https://avatars.discourse-cdn.com/v4/letter/w/74df32/32.png) [@wcjensen](https://forum.pinegrow.com/u/wcjensen)\
**Post date:** [February 23, 2018, 2:34pm UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649/3 "2018-02-23T14:34:12Z")

</div>

Thank you, makes sense. I’ll give it a go.

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [July 4, 2018, 9:50pm UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649/4 "2018-07-04T21:50:16Z")

</div>

@mandarin just re-create the bootstrap style the you want to change in the style.css file, no need to have a duplicate bootstrap style included. Because of how css works (cascade) the new rules created in style.css will either overwrite existing rules or append to them. Hope that makes sense.

---

<div class="post-metadata">

**Author:** ![mandarin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mandarin/32/806_2.png) [@mandarin](https://forum.pinegrow.com/u/mandarin)\
**Post date:** [July 5, 2018, 8:39am UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649/5 "2018-07-05T08:39:15Z")

</div>

Just a matter of personal preference really. I’ve been creating custom css files since i started working with Bootstrap.The joy of custom is that if necessary you can have a different one on each page if you want something different uniquely on that page. Have a look at this article which might help decide:

> **[How to Customize the Default Bootstrap Style, the Right Way](https://bootstrapbay.com/blog/customize-bootstrap/)**
>
> If you are just starting to learn Bootstrap, we have created a series of tutorials

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [July 18, 2018, 9:47pm UTC](https://forum.pinegrow.com/t/best-practice-when-creating-custom-css-on-top-of-bootstrap/1649/6 "2018-07-18T21:47:26Z")

</div>

@mandarin I don’t think I explained myself properly. Pinegrow creates a style(s).css file by default which you can add style rules too. This is the same as creating your own custom.css file but why bother when PG already provides one. Same concept as the link you shared just a different name.

So good times… we’re both talking about the same thing 😉
