Archived topic
GP 3 and Bootstrap CSS conflict
11 replies · Started by Michel on October 22, 2020
Hi guys,
Short question for you after applying the GP 3 update and updating GP Premium.
Upon checking out Flexbox, I see that it overrides CSS styles that I apply to Bootstrap elements such as Labels. Both for shaping and colours.
What approach do you suggest when encountering such a problem?
Hi there,
I would say that you should try to use Flexbox instead of implementing Bootstrap.
Adding CSS Frameworks especially Bootstrap is going to cause many conflicts with the theme as they use generic CSS classes that are common across many WordPress themes.
I get the logic if it's about grids and containers, but what about other elements such as buttons, labels and other stuff? Will Flexbox offer that?
but what about other elements such as buttons, labels and other stuff?
What do you mean by that?
For buttons, I'd recommend going with the buttons block from GenerateBlocks:
https://docs.generateblocks.com/article/buttons-overview/
Or you can simply just use HTML:
https://docs.generatepress.com/article/adding-buttons/
This kind of thing:
https://getbootstrap.com/docs/3.3/components/#labels
https://getbootstrap.com/docs/3.3/components/#alerts
If there is an alternative that plays better, I'm totally down to make a migration so I can use Flexbox, but I might need a recommendation.
I'd say that things like that is pretty easy with a bit of HTML and CSS and shouldn't need to import an entire library for that.
GenerateBlocks should be super helpful too if you are using the block editor?
Haven't made the transition to the block editor yet. Been waiting for it to evolve since the first use of it, when wordpress.org made it the default, was very clunky.
Does the typical migration to the block editor require a lot of adaptation?
Does the typical migration to the block editor require a lot of adaptation?
That sort of depends on what kind of content you are adding.
I've had pretty good luck by simply clicking the "convert to block" option.
It would probably be the best to do this in a staging site first.
To avoid dragging you into a long discussion... let's say that I don't want to migrate to the block editor yet.
Any pointer to an HTML/CSS resource I could dig in to replace use of Bootstrap for elements as simple as little labels and buttons? I don't mind taking time to figure it out if I have a decent resource as a starting point.
That would help for the time being.
You could just use the browser inspector tool to see the HTML and CSS involved:
https://www.screencast.com/t/v33FNXKus
I was basically using CSS instead of an entire framework. Alright. I'll look into the bits that conflict with Flexbox, and I've already identified a few things. Will be able to put it together with a little time and work.
Sounds good :)
