Bootstrap gutter not working

[marina_khamis]

I can’t create space between columns using bootstrap, Here’s my code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="container">
    <div class="row g-2">
        <div class="col-4 shadow bg-body rounded ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
            repellat iusto exercitationem numquam adipisci commodi necessitatibus nam odit accusamus minus vitae, velit,
            perspiciatis impedit dolores incidunt nesciunt maiores cumque! Suscipit.
        </div>

        <div class="col-8  shadow bg-body rounded ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
            repellat iusto exercitationem numquam adipisci commodi necessitatibus nam odit accusamus minus vitae, velit,
            perspiciatis impedit dolores incidunt nesciunt maiores cumque! Suscipit.
        </div>
    </div>
</div>

[Roma]

isn’t the format "row gx-2"
x = horizontal
y = vertical

[marina_khamis]

Yeah right, I tried both and I tried g-2 as well, but none of them worked

[Roma]

I haven’t played with BS 5 but you got me curious.

In their doc it states Gutters start at 1.5rem ( 24px ) wide

I quickly put something together and used your code to test with the exception that I took out the shadow attribute.
When I inspected I could see that using gx-2 (0.5rem) was too small and was being overwritten by the default.
I slowly increased the number while simultaneously keeping inspection open to see where the gutter specified overwrites the default.

Edit: I should not have said it’s being overwritten by the default but since that gx-2 is so much smaller than the default it appears as if it does nothing. If you remove it you’ll see the gutter actually gets wider because the default is larger that what you’ve specified.