Using Bootstrap CSS and stylses

I am wondering if it possible to use the latest version of Bootstrap v5 to create a more responsive UI? Has any one attempted integrating Bootstrap into their design?

I havent used Bootstrap in a long time, but it’s fully doable! From the top of my head I see three ways of doing it.

Using CSS only
Now, as I mentioned my Bootstrap days are long gone, but when I used to Bootstrap a lot of it could be done with CSS classes alone. Not sure if it works the same way nowdays, since a quick glance of the Bootstrap 5 docs shows a big reliance on Sass/SCSS and a build step, but if they provide a built version of Bootstrap 5 it could be enough to include that in the head section of your app and then add the classes you need on the visual nodes.

Coding your component library
The method most similar to what you might be used to in code is to use the Noodl SDK to build your own Module with all the UI components you need. This would involve building your component library in React, like you would do usually, but exposing all component props to the Noodl editor. Your React components would then become their own nodes in the editor that you can use to build your views.

If you’re unfamiliar with how to use Bootstrap 5 with React I did a quick Google search and this looks like a good guide.

Noodling your component library
Another way of using Bootstrap 5 with Noodl is to include the Bootstrap files from their CDN into the head section of your Noodl app and then use the visual nodes in Noodl to build the UI and attach all JS functionality to the components using the Function node.

The visual nodes have an output called this that you can connect to the function node to get the reference to that specific instance of the node, so instead of doing

var myModalEl = document.getElementById('myModal')

in the Function node you would do

var myModalEl = Inputs.MyElement.innerReactComponentRef.scrollRef.current

This will create an input port on the Function node where you can connect to the this output from the visual node.

Hope this helps!