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.

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.

• shortcode
• css
• twitter-bootstrap

Share Improve this question asked Nov 18, 2019 at 17:49 icolumbroicolumbro 7911 silver badge99 bronze badges 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 Commented 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 Commented Nov 18, 2019 at 18:09

Add a comment  | 

1 Answer 1

Sorted by: 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,
});