This forum has moved, please join us on github discussions. We will keep these old posts available for reference. Thank you!

External assets e.g Bootstrap clash with admin UI

Hello,

I am having some problems integrating external plugins like bootstrap as it seems to clash with the apostrophe admin UI.
See attached image.

Simply just added the bootstrap.min.css (renamed to *.less) to lib/modules/apostrophe-assets/css/vendor/
Then added entry in site.less
@import ‘vendor/bootstrap.less’;

What is the correct way to add bootstrap without messing up the admin UI?

Hi !
As it seems, you might just be having an issue with the font’s color css property on the icons (set it back to a dark color ?).

On the other hand you might want to get rid of the H4 displaying the images names above the picture by a simple display:none in your css too (as it is done by Apostrophe devs in the sandbox demo repository https://github.com/punkave/apostrophe-sandbox)

Otherwise the way you display bootstrap shall be all right except that rather than the bootstrap.min.css version turned to a .less, it would be way more convenient for you to add to your project the npm bootstrap-less package in order to enjoy overriding accurately variables and so on.

Enjoy Apostrophe even if when starting digging into it at first you might feel a little struggling.
Once you’ll get use to it’s logic Apostrophe is a nodeJs’s best practices CMS.