Adding a Flexbox using within Bootstrap Studio 5 environment

I am not finding links in Google to “create Flexbox in Bootstrap Studio 5”. I understand that BSS5 uses Flexbox, and has not created it. But on the left side of BSS in Components there is no Drag&Drop selection for “Flexbox”. Is just dropping in a Container the implied creation of a Flexbox? I have not actually seen those words saying that, but it seems so.

There are lots of videos on YouTube about Flexboxes, hand crafted in an IDE, but when using BSS, that infers some restrictions around BSS Locked Classes, which makes some things difficult, like “text-align: right” in dollar amount fields.

Is there a video that mucks around with a Flexbox IN the BSS environment?

Thanks, Ric

I don’t know if that’s what you’re looking for, on the right, in options, see all of them until the end, the arrows next to each one is a dropdown menu.

I think you’re thinking of a Flexbox as being an object which can get quite confusing for sure. In reality it’s CSS settings that are added to Containers, rows, cols, etc. I’m pretty sure that some of the components are already set up for flexbox default, but it’s been a bit confusing for me as I can see that in the CSS Style window as part of the default Bootstrap CSS, but it doesn’t show up in the UI at all showing it’s applied. Makes it a bit confusing, but I’m pretty sure that Rows and Containers are default set. Best way to be sure is to drag each of the container type components into a project and then select them and examine the CSS in the Styles window and see what it says.

Merry Christmas!

Thanks dj, what I had been experiencing is that when I set an option to the desired spec, it often kicked off a round yellow explanation icon, saying my option was being ignored due to a BSS Locked Class, like the BSS text-start Locked Class in a span, which stops me from setting a span to display amount fields right aligned. I try to remove the Locked Class but BSS will not let me.

I did not notice this when I first dragged a span into the column. In my over zealousness I had dragged a div into the column and then the span:
column
…div
…span (BSS added class=‘text-start’, a Locked Class)

So I deleted the Span, deleted the div and dragged a span in under the column. That seemed to come in clean without the text-start Locked Class.

I would really like to read up on when and why BSS utilizes their Locked Classes, and how to avoid them!

Thanks for the help!

jo-r, you saw me! Yes, I was thinking that though Flexbox is a implementation of CSS, BSS would have put together a UI option of Flexbox as a minimal object that you would then extend. Then I saw that the BSS Container is actually just a DIV, and that though never stated, a Container is really the confines of a Flexbox ! They should say that for us newbies!

Then I was good as I realized I could control width of columns. I first I was trying to “fill” out the container size with empty columns on the left and right, with my work in containers in the center. What a mess that was! And then again as I mentioned in another comment, what’s the purpose of this Locked Class, like text-start that stops you from refining your control? Is there a write-up on the use/miss-use and avoidance of getting trapped by unexpected Locked Classes?

Thank you for your help! Merry Christmas to you too… and a bit of good eggnog in your glass too!