want to load bootstrapcdn js and css [#3127363]

hello guys,

my site is on a bandwidth limited server, so I want to load bootstrap js and css from the bootstrapcdn, how can I realize this?

I edited the libraries.yml of the theme, as

replace
js/bootstrap/bootstrap.min.js: {}

with

https//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js: {type: external, minified: true}

but the site went wrong and the error alert is:

Drupal\Core\Asset\Exception\InvalidLibraryFileException: Invalid library definition in themes/contrib/vartheme_bs4/vartheme_bs4.libraries.yml: Unable to parse at line 114 (near " dependencies:"). in Drupal\Core\Asset\LibraryDiscoveryParser->parseLibraryInfo() (line 322 of core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).

I am using the vartheme_bs4.

would you please tell me how can I deploy the bootstrapcdn?

thanks very much!

Comments

Comment #1

13 April 2020 at 23:41

jjwfcd created an issue. See original summary.

Comment #2

joachim namyslo

German

Kulmbach 🇩🇪 🇪🇺

commented 17 April 2020 at 09:34

Follow this example and change the values to your needs

bootstrap:
  css:
    theme:
      https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css: {type: external}
  js:
    https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js: {type:external

Comment #3

jjwfcd commented 20 April 2020 at 23:05

dear @Joachim Namyslo，

Thank you very much for your reply.

I ll try it

thanks again

Comment #4

renatog commented 21 October 2020 at 13:08

I want to do this as well

I can do this:

js:
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js: {type:external

It works, but the problem is: If there is another project that loads boostrap cnd it is a conflit.

Do you know if there is a way to load bootstrap cnd only if not exists?

Comment #5

joachim namyslo

German

Kulmbach 🇩🇪 🇪🇺

commented 21 October 2020 at 13:14

I am pretty sure a function with an if statement in your themename.theme would do the trick. But I am not a programmer. So I cannot solve that by show you the code. An alternative way is to use bootsrap libraries and download the librarie-Filöes locally. By doing that you are even a bit more gdpr compliment, because you do not send the users IP to a second server anymore.

So just use https://www.drupal.org/project/bootstrap_library