Yes it works without!important when I remove the bg-light class.
And now I understand what the bg-light class does 
@Teodor I guess I understand now too what you mean. I add my own class but using the bootstrap-parents but without the bg-light class. In this way I can override the background-color without using !important .
I hope this is right way 
I’m finding that there are lots of times that I would like to change just one or two default attributes that is locked to a BS4 component. So, if I understand correctly, that means adding my own css styling and removing the BS4 class.
It would be great to have a quicker way to build up the css style to match the default BS4 one and then make the one or two modifications. Maybe something such as “copy current style” option when creating a new one in the design panel.
Also, when I remove the default BS4 class the component is removed from view in the design editor. Is that expected behavior?
No, you can just override the bootstrap class in your own CSS either manually or using the design panel. No need to remove it from the component in the HTML.
So just copy the class name to your custom CSS file and apply your own rules there.
So, would it have two classes in the design panel: the default BS4 one and my custom created one? Does that override even the locked attributes?
You can just override the class, or if you prefer add a second class to the element.
So either:
.bs4-class.my-class {
my rules here
}
or
.bs4-class {
my rules here
}
Thanks @Teodor!
I figured out how to do the first method to override the locked BS4 class using the Design Panel.
For everyone’s reference, the BS4 class alone may have locked properties (pink).
By simply combining the BS4 class with a new class that we create, it unlocks those properties (now orange) by creating an entirely new class.
Here’s the new class it creates in the Styles Panel:
However, doing it this way was a little bit buggy. Even after creating a new class, sometimes it would still have locked properties until I would click away from the Design Panel and click back.
Also, when just using the Design Panel, if you remove all of the classes and then add them back, you have to be careful to add them back in the same order, otherwise you will create a completely new class. For example, getting the order mixed up in the Design Panel resulted in these two classes being created:
It would seem that Wappler could be improved by recognizing these and not allowing us to create two separate classes. I have no idea how hard that would be, though @George
Also, as I experimented to find a solution, I ended up creating a bunch of css classes that I wish to now delete. The Styles Panel shows a link w/tooltip path to the css file each class draws from and clicking on that link opens the corresponding file (assuming it is a style sheet we created not a default BS4 one) and takes us to the class. I can delete the class from there, but it would be pretty awesome to be able to delete a class right from the Styles Panel UI. I’m thinking maybe through a dropdown option or something similar. @George
In general, figuring out how the various CSS tools (BS4 options in Design View, Design Panel, Styles Panel, custom CSS file, BS4 default CSS file vs source files) interplay has been a challenge in Wappler as someone new to CSS and BS4.
Thanks for the detailed tutorial @ben! If I understand correctly, some use cases for your tutorial would be if you are going to change a lot of the BS4 classes on a project (makes your css cleaner) or want to setup your own reusable standard classes that are based on BS4 for a consistent look across multiple projects. Does that sound about right?
Have a look at https://getbootstrap.com/docs/4.0/getting-started/theming/, you will see that using the source files will give you a lot more flexibility.
Hi, thank you for the very helpful video. I have started my project that way and it is perfect for customizations. You mentioned to never put node_modules on server. How do you do that when publishing to your server with Wappler? and should they also be Git ignored when working with Github from different computers?
Hello,
That’s already possible in Wappler by using the new Theme Manager:
Please check it and provide your feedback
