1

I'm writing a simple WordPress plugin that uses some shortcodes to show content on public side of the side. These shortcodes use some Bootstrap's components like buttons, input groups and popovers but the CSS of the selected theme interferes with Bootstrap CSS and rendering is not optimal... How can use "pure" Bootstrap CSS just for my shortcodes making them independent of the selected WordPress theme?

I read this possible solution but now Bootstrap no longer uses LESS but SASS and I tried to compile .scss file but some components doesn't work, like tooltips, and some CSS is wrong, like font-family.

Improve this question
2
  • The answer is still just as valid. Them switching from less to sass changes nothing in that context, you just need to fix your build pipeline
    – kero
    Nov 18, 2019 at 17:56
  • I followed this more recent discussion almost work but tooltips and I can't understand why... How jQuery can be affected by this customization?
    – icolumbro
    Nov 18, 2019 at 18:09

1 Answer 1

Reset to default
1

Ok, I think I solved: followed this discussion so I imported Bootstrap SASS file in a new SASS file creating a custom class as container to isolate Bootstrap components and compiled the custom .scss to .css. Fixed html and body selector in new CSS file and to have working tooltips I did:

$('[data-toggle="tooltip"]').tooltip({
  container: '.custom-container', //needed to have working tooltips
  html: true,
});
Improve this answer
1
  • Glad you could solve it. I think you need to wait some time before accepting your own answer, but feel free to do so after the period
    – kero
    Nov 18, 2019 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.