# Including external CSS frameworks **URL:** \ **Category:** Developer\ **Tags:** feature-request, custom-widgets\ **Created:** [April 25, 2022, 2:41pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072 "2022-04-25T14:41:58Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![kirons](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@kirons](https://community.tulip.co/u/kirons)\ **Post date:** [April 25, 2022, 2:41pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/1 "2022-04-25T14:41:59Z")
Is it possible to use external CSS frameworks like bootstrap with custom widgets? ---
**Author:** ![EddyA](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/eddya/32/467_2.png) [@EddyA](https://community.tulip.co/u/EddyA)\ **Post date:** [April 26, 2022, 10:02am UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/2 "2022-04-26T10:02:56Z")
Hey Kevin, Yes it is. You can leverage external CSS library in a similar way to the external JS library. You need the code below in the JS of your widget. Here I referencing the [https://getbootstrap.com/](https://getbootstrap.com/) library. It is possible to use others in the same way. I also attaching an example widgets which you can download and install in your instance to test. [customWidget-Example External CSS - Bootstrap.json](https://community.tulip.co/uploads/short-url/4tIx1aHYWZwaH8UwqI1e2uMHmL1.json) (2.4 KB) This is the output from a simple example: Before Bootstrap CSS: ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/4/4c4354a1adcfd80f6e56fa85a02d7ef6e97d67b3.png) With Bootstrap CSS: ![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/7/74dda51875145c7f8b92b315f4484a5759df8387.png) Code required in JS: ```auto let urls = ["https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"]; loadStyles(urls); async function loadStyles(...urls) { for (const thisUrl of urls) { console.log(`Loading style "${thisUrl}"...`); const response = await fetch(thisUrl); const responseBody = await response.text(); const styleElm = document.createElement("style"); const inlineStyle = document.createTextNode(responseBody); styleElm.appendChild(inlineStyle); document.body.appendChild(styleElm); console.log(`Style "${thisUrl}" successfully loaded`); } } ``` ---
**Author:** ![EddyA](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/eddya/32/467_2.png) [@EddyA](https://community.tulip.co/u/EddyA)\ **Post date:** [May 10, 2022, 10:56am UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/3 "2022-05-10T10:56:16Z")
@parth.parmar ^^^ see this for CSS library ---
**Author:** ![EddyA](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/eddya/32/467_2.png) [@EddyA](https://community.tulip.co/u/EddyA)\ **Post date:** [May 18, 2022, 8:23am UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/4 "2022-05-18T08:23:53Z")
@kirons How did you get on with the CSS? Anything tips and tricks to share? I am thinking of a couple of widgets to build that would leverage external CSS. So any learnings appreciated. ---
**Author:** ![kirons](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@kirons](https://community.tulip.co/u/kirons)\ **Post date:** [May 18, 2022, 12:22pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/5 "2022-05-18T12:22:31Z")
Hi Eddy, I haven’t gotten back to this beyond testing it after you initially provided feedback. However, I have used a couple of custom widgets in apps recently. One was the label preview that you built, modified for our environment, and the second was a text box that updates the ZPL for the label preview when the values change. ---
**Author:** ![jajzler](https://avatars.discourse-cdn.com/v4/letter/j/779978/32.png) [@jajzler](https://community.tulip.co/u/jajzler)\ **Post date:** [June 19, 2022, 8:36pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/6 "2022-06-19T20:36:33Z")
Would be nice to add this as default for all widgets. Switch option on the widget dashboard, to use the default one or the reference ---
**Author:** ![Pete\_Hartnett](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/pete_hartnett/32/3678_2.png) [@Pete\_Hartnett](https://community.tulip.co/u/Pete_Hartnett)\ **Post date:** [June 21, 2022, 5:53pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/7 "2022-06-21T17:53:03Z")
Hey @jajzler - Can you give a little more context here? - You thinking just CSS formatting libraries could be selected from the widget configuration pane? - Would there be cases where you might use a widget in multiple steps or apps, but with different css libraries? - Would this behavior exist for JS libraries too? If there are external libraries you want us to add native support for, please reach out and we can add them to the dropdown list. The code @EddyA shared above is really just a stopgap until we can natively support anything anyone would ask for. Pete ---
**Author:** ![jajzler](https://avatars.discourse-cdn.com/v4/letter/j/779978/32.png) [@jajzler](https://community.tulip.co/u/jajzler)\ **Post date:** [June 21, 2022, 7:57pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/8 "2022-06-21T19:57:45Z")
![image](https://us1.discourse-cdn.com/flex020/uploads/agilemfg/original/2X/6/6aef80b5d81e90309e3e12f27ea328d307dca65b.png) Okay, maybe i was not explained clearly. In the picture the have snapshot from the widget view. If the settings has a new options like - define widget settings Under that, the developer can set the new default settings that will be automatic load into to widget. It is like the current default css style, that came by default. for each new widget. Sometimes i need the same css style for many application, so the user has the same feeling. (Material Design) If you can add Bulma CSS as an external lib, without the code from Eddy. That would be nice. I dont wont to put the same code in many widgets again and again. ---
**Author:** ![RussWaddell](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/russwaddell/32/3774_2.png) [@RussWaddell](https://community.tulip.co/u/RussWaddell)\ **Post date:** [June 22, 2022, 4:42pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/9 "2022-06-22T16:42:07Z")
> [@jajzler](#): > > …If you can add Bulma CSS as an external lib, without the code from Eddy. That would be nice. > I dont wont to put the same code in many widgets again and again. I like the idea of applying CSS across all widgets, and that’s a common mechanism/feature many places where CSS is supported. What do you think about a “helper widget” with the connection to external library or framework, then referencing that helper widget instead of the entire code block? ---
**Author:** ![jajzler](https://avatars.discourse-cdn.com/v4/letter/j/779978/32.png) [@jajzler](https://community.tulip.co/u/jajzler)\ **Post date:** [June 23, 2022, 1:05pm UTC](https://community.tulip.co/t/including-external-css-frameworks/5072/10 "2022-06-23T13:05:16Z")
That sounds very good 😀