CSS Conflict With Bootstrap-based Template – Justify-content Classes - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

CSS Conflict With Bootstrap-based Template – Justify-content Classes

DR

Davide Reitano

SP Page Builder 7 months ago

Hi, I’m experiencing a CSS conflict between your component and my website’s Bootstrap-based template.

The template uses the following media query: @media (min-width: 768px) { .justify-content-md-end { justify-content: flex-end !important; } }

Your component applies this class: .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; }

When both classes are applied to the same element (e.g., <div class="justify-content-center justify-content-md-end">), they conflict on screens larger than 768px, due to conflicting justify-content rules with !important.

Could you please consider updating the component to avoid hardcoding .justify-content-center, or apply it conditionally based on screen size? This would improve compatibility with Bootstrap-based layouts.

Thanks! Davide

0
12 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 7 months ago #188763

Hi

Thanks for contacting us and thanks for your opinions. I will inform our DEV team about it.

-Regards.

0
DR
Davide Reitano
Accepted Answer
7 months ago #188786

Hi, thanks for the reply — however, I’d really appreciate it if this could be escalated with higher priority.

This issue is breaking the layout of my website, and it’s caused by your component applying utility classes that conflict directly with Bootstrap’s responsive logic.

Please ask your DEV team to address this as soon as possible or at least provide a temporary workaround.

Thanks for your understanding

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 7 months ago #188851

Ok I will inform them.

0
DR
Davide Reitano
Accepted Answer
7 months ago #189097

hello, i still have the issue and i need to solve it asap

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 7 months ago #189132

Hi,

Our team is now in vacation that's why it may take some time. Allow us some time please.

0
Pavel
Pavel
Accepted Answer
7 months ago #189144

Hi Davide.

In the world of web development, it is impossible to completely eliminate conflicts between hundreds of thousands, or even millions, of components. Therefore, as webmasters, we must be able to handle this ourselves in specific cases. This code will fix your problem (if it concerns the language switcher).

@media (min-width: 768px) {
    .top-bar-content .justify-content-center.justify-content-md-end {
        justify-content: end !important;
    }
}

I suspect that the cause of your problem is that your template is not rendering the order of the CSS files correctly.

You can use this code and forget about the problem, or wait for a solution from Joomshaper for the next 100 years. And it's not because the Joomshaper team works poorly, but because it's impossible to make everything in the world compatible with each other.

By making these changes in core SP Page Builder CSS, the Joomshaper team could break thousands of other users' sites that do not have this problem. Therefore, there is a 99% chance they will not do it.

0
DR
Davide Reitano
Accepted Answer
7 months ago #189234

Hello Pavel, thank you. Yes, i'm with you with some of these things. I saw that SP Page builder is a lot "aggressive" in its css, with a lot of !important that outperform other plugins. And since it's a component and not a template, its files are loaded after the template ones, resulting in this issue. At every update i need to manually edit SPPB css, but i think this can be fixable at least removing the !important from the css in the next update

0
Pavel
Pavel
Accepted Answer
7 months ago #189237

Hi Davide.

Joomshaper does not modify the Bootstrap code in SPPB CSS but uses it as is.

Here is a screenshot from a Bootstrap 5 site. There is a huge amount of !important. It is obvious that there is some sense in using this by Bootstrap developers.

0
Pavel
Pavel
Accepted Answer
7 months ago #189238

I can confidently say that no one will change this in the next update, as it will cause difficulties with updating Bootstrap itself.

So don’t waste time unnecessarily; just resolve it on your own through CSS.

0
Pavel
Pavel
Accepted Answer
7 months ago #189240

And since it's a component and not a template, its files are loaded after the template ones

Speaking of templates, this issue is addressed in Helix. The entire Bootstrap placed below sppb css, along with Bootstrap configured by the template tools is compiled into template.css and also placed below sppb css (by the way, the same goes for Cassiopea). Your template simply does not take this into account.

If you are the developer of your template, simply change the order of loading the CSS files.

0
DR
Davide Reitano
Accepted Answer
7 months ago #189244

I think you’re missing the point here. I’m not a beginner, nor am I a developer of my template. If I were, I wouldn’t be purchasing commercial components to build my site. I paid for SP Page Builder because it’s marketed as a professional tool that’s supposed to work seamlessly with popular frameworks like Bootstrap.

Your tone and approach make it sound like I’m at fault for simply expecting compatibility between a page builder and a template. Let me make one thing clear: not every site in the world is identical. It’s not uncommon for users to install additional solutions or use custom templates — that’s how the web works.

When SP Page Builder forces CSS rules with !important, it creates unnecessary conflicts, especially since the component’s CSS is loaded after the template. This is not about “handling it myself” or “fixing it on my own” — it’s about pointing out a design flaw that could be improved, especially when many users might face the same problem.

When a paying customer reports a conflict, the right approach is to acknowledge the problem and discuss potential improvements, not dismiss it as a trivial issue or blame the user.

I expect a more professional response from the team, especially when the issue clearly originates from how the component handles CSS priorities. As a paying customer, I have the right to expect support and not be treated like I’m at fault for pointing out a legitimate problem.

Thank you.

0
Pavel
Pavel
Accepted Answer
7 months ago #189246

I am not an employee of Joomshaper. I just wanted to help you save time. I have been here for a long time and believe that your issue will not be resolved in the next update, as Joomshaper uses standard Bootstrap in SPPB. All !important come from the standard Bootstrap.

The Bootstrap developers put some thought into the use of !important. Therefore, changing this just for one site could break thousands of other users' sites.

Whether you take my advice or wait is up to you.

If my words seemed rude to you, I apologize. I never intended to be rude or accuse you of anything. Perhaps this issue is related to the nuances of translation. I am not a native English speaker.

0