# Add a bootstrap class to my custom style sheet **URL:** \ **Category:** Beginners\ **Created:** [January 27, 2019, 5:10pm UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646 "2019-01-27T17:10:28Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [January 27, 2019, 5:10pm UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/1 "2019-01-27T17:10:28Z")
I’m trying to copy the bootstrap button behavior of my webpages to a custom form I’m making but without all the other behaviors that the bootstrap.css controls. So I’m trying to add just the “btn btn-primary” class (I believe this is what controls bootstrap’s button behavior?) from the generic bootstrap.css to my custom style.css so the button on my custom form behaves like the buttons do on my other pages. (i.e., my custom form’s button does not color-change when I hover over it). Is there a tutorial that covers how to add or modify classes in PG Pro 5.1? I haven’t found any. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [January 29, 2019, 12:47am UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/2 "2019-01-29T00:47:46Z")
Well, @randyrie mate… you might just want to start with using the docs search function ie [http://docs.pinegrow.com/?s=add+classes](http://docs.pinegrow.com/?s=add+classes) which is only the FOURTH Item on the list…of getting starting docs [http://docs.pinegrow.com/docs/how-to-guides/](http://docs.pinegrow.com/docs/how-to-guides/) or the older beta docs, ie > **[Countdown to Pinegrow 3.0 - A New Feature Presented Every Week - Pinegrow Web...](http://docsbeta.pinegrow.com/countdown-pinegrow-3-0/?highlight=editing%2520classes)** > > We are getting close to the release of Pinegrow Web Editor 3.0. > > Pinegrow 3.0 will be our biggest update so far. We re-developed large parts of the app to make Pinegrow more powerful, faster and easier to use. (but your saved from a whitty remark there as its NOT for version 5! which is per your actual request) And since PG is basically ALL ABOUT …styling and positioning… But I do know what you mean with regards some of the docs but, C’mon Randy… _must try harder_, search is your friend. 4/10 …there will be homework and questions to follow! 😉 nb, you need to start to have some idea about how to edit and strip out bootstrap etc. and inherience of classes This is qutie good . > **[Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance)** > > In this article we will define what the CSS cascade is, what specificity is, what importance is, and how properties inherit from different rules. and for instance in your above post, you mention the **“btn btn-primary”** class, well… that’s 2 classes, with the 2nd being more specific than the first. You can’t just write the magic words _btn btn-primary_ as . you have to go and find those 2 actual class in your bootstrap.css file and copy them out BUT\>\>\>\>\>\>\>\>\> where ELSE is btn class? So, using Pinegrow, …do this to check out just WHERE you find ALL THE BUTTON classes… Kind of overwhelming. but you just need the bits…you…er…need. have a vid! If no one else has stuck up some better vid then Ill do one for you tmrw. but basically what you want do do is click on a button whose behaviour you WANT TO REPLICATE BUT. …it WONT just be the button class, because the button is an element elements are ALSO styled in Bootsrap for repsonsiveness etc. and many thing.s ie, if i click on a button on one of my sites. ![2019-01-29_02-36-44](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5e00865ec24b845744c1a9fce8ac6b654d0d49c8.png) I see that it’s also affected by other style sheets too. and a button is made of various _bits_ they are styled… and the button is contained within…something! rows, columns, containers of some forrm and guess what? yep! these TOO are styled…by some mysterious dark forces somewhere \*oh! unless you use Pinegrow to see where 🙂 \* each time I go away from Pinegrow…I forget all this myself. so you need to repicate all these OTHER BITS corrctly too. right im Uber tired. good night 🙂and thanks for reminding me of some stuff. hopefully someone else will give you a better go of it before me tomorrow ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [January 29, 2019, 3:19am UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/3 "2019-01-29T03:19:02Z")
When you say “behavior” do you mean the way the color of the button slowly changes as you hover over it, and then changes back when you move the pointer off it? This is accomplished easily with CSS transitions. You don’t have to go digging through Bootstrap classes to make this happen. There is a transition panel when you can add this behavior. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [January 30, 2019, 2:58pm UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/4 "2019-01-30T14:58:50Z")
SO how’s it going with the Bootstrap Button cloning @randyrie? ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [January 31, 2019, 3:00am UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/5 "2019-01-31T03:00:41Z")
I went with an inline css solution until I get a better handle on how to add classes to the style.css file. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [January 31, 2019, 3:12am UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/6 "2019-01-31T03:12:07Z")
oh well done. It is a bit bonkers, getting your head around all the styling, and just how to do it with Pinegrow as well. I just spent 3 hours doing what turned into a glitch/bug report, to add what would have been one line! To add a text shadow 🙂 did you check out the link on how to create a class? Also, the tutorial I just followed is good (showing an introduction to media queries too) but I may have found a bug. not sure if that or operator error (that being me 🙂 ) its a half an hour Walkthrought tutorial. > **[Pinegrow Walkthrough – Video | Pinegrow Web Editor](https://pinegrow.com/docs/getting-started/pinegrow-walkthrough-video/)** > > Watch this video to quickly learn how HTML and CSS editing is done in Pinegrow. ive been on it for about 4 hours 😛 its gone 3am now 🙂 Welcome to PineLand! 🙂 Also I was just looking for some docs on how to add your inline styles to separate stylesheet, have you checked out > **[Quick Introduction to Pinegrow | Pinegrow Web Editor](https://docs.pinegrow.com/docs/getting-started/quick-introduction-to-pinegrow/)** > > New to Pinegrow? This interactive guide is the best place to start. We’ll go through all Pinegrow panels and take them for a spin. particularly , points 3 and 4 @randyrie and cheers for reminding me of sooooo much stuff I have to relearn. while you are happy knocking out websites, I’m being considerably less productive, so well done 🙂It will all come for you I’m pretty sure 🙂 ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [January 31, 2019, 4:01am UTC](https://forum.pinegrow.com/t/add-a-bootstrap-class-to-my-custom-style-sheet/2646/7 "2019-01-31T04:01:08Z")
and this is a REALLY GOOD explanation…of something that can be had bending when getting to grips with Pinegrow, styling and css and the Bootstrap CSS styles (which you wish to replicate) ive been looking for it for ages again, just found it for you 😉 this vid > **[Pinegrow Walkthrough – Video | Pinegrow Web Editor](https://pinegrow.com/docs/getting-started/pinegrow-walkthrough-video/)** > > Watch this video to quickly learn how HTML and CSS editing is done in Pinegrow. and the part at 27:20 in, about the difference between Properties Panel and styling panel, and when to use what, if playing with a framework, like Bootstrap or Foundation. WHICH…are you supposed to use and when and why. This Is a pretty good explanation. this is. link straight to that bit