Hi, anyone knows why when I create a row with columns and add gutters (gx-*) doesn’t work.
I create a new file .bbs file without SASS modification, just standard.
thanks
Heres ir an example, when I apply a Gutter on the x-axis doesn’t work, only en the vertical axis.
https://gutters-test.bss.design
Impossible to tell just from a screenshot. Post your site, or a provide a link to your .bsdesign file.
ok, I did, thanks.
I don’t know if it will be an error in my program but when I want to separate columns horizontally with the Gx-* class it does not separate them, it literally does nothing, the other thing is how to remove the margins and padding from each element such as columns and paragraph that comes by default with a margin bottom of 8px
The problem is that you’re setting p-5 on your columns, and then adding a background color to the columns. The padding inherits the background color, so you cannot see any space between the the columns.
If you want to see a visible white “gutter space” between each of the columns, put a div in each of your columns, place your paragraphs (or other content) inside the divs, then add your p-5 and background colors to the divs. Then you’ll see the gutters between the columns. Should look like this…
The simplest way to remove the margin from the bottom of elements like paragraphs and headings is to select the component add the mb-0 utility class through the Attributes panel. Similarly, you can add px-0 to columns. NOTE: be careful when setting the padding to zero on columns as I’ve seen it cause an x-overflow issue where a scroll bar appears.
Hi, thanks but it doesn’t work on the horizontal axis, I performed what you said I didnt work, you can update the website and see, and if you notice only the vertical axis works.
https://gutters-test.bss.design
thanks
EDIT: I have noticed that when doing edit sass by creating a SCSS stylesheet the X gutters don’t work, when deleting the SASS stylesheet the X gutters work. I don’t why it is that
I only used multiple rows in my example to show you how to set the X gutter.
If you want to create an even grid of both horizontal and vertical columns, you wouldn’t use multiple rows. You use a single row, and then fill it with columns, and then use the Row Options (Gutter Size X and Y and the Per Row settings) to create the grid. See below…
Ok, but in the X axis didn’t work. When I deleted the sass file (custom.scss) the class GX-* works fine. Do you why is that? Maybe I m doing something wrong in the process to edit via sass, I import all the files of scss files into the bss file and the I create a scss file and use @import
No idea. I don’t use sass. All I know is that the example I’ve shown above is how the Bootstrap grid works in BSS when using the standard Bootstrap files and components.
