Gap property in BSS css editor

Bootstrap Studio Help
1

Hi,

Please, can you update the gap property in CSS editor?
Now there are only those related to css grid, missing the “gap” for flexbox and also for the grid (short version).

I know BS has the gap classes, but it might be useful to have gap property available also in the css editor to better customize the style.

Thanks and Happy New Year everyone!

1 Like
2

Thank you for the suggestion! We will add the gap property in our next update.

3 Likes
3

Hi I couldn’t figure out where to edit the gap property? Was it added in the updates?

4

If you’re talking about gutters, you will find the settings in the Options panel > Row Options > Gutters > Gutter Size (X) and Gutter Size (Y).

You can also add the gx and gy utility classes directly via the Attributes panel in the Class Names field.

image
image327×597 9.02 KB

1 Like
5

Thanks, good to know where gutters is, but I’m more interested in finding gap, (auto complete works in the attributes panel)

<div class="grid gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>
6

You start typing gap in the Class Names field in the attribute panel and you will get suggestions of all the different gap utilities. Bootstrap css grid isn’t activated by default, you must activate it first and have the compiled bootstrap.css as a theme in BSS. You will not find a g-column in the component panel.

You can use a css grid by writing a css class here is an example

BTW your link goes to Bootstrap 5.3 BSS using Bootstrap 5.2.3 at the moment

1 Like
7

Thanks, I’m using the matria theme in BSS, if that’s what you mean?

8

@neil.coder