Html Question posted in
Some basic documentation can be found here.

Gutters GX and GY dont work for some reason in bootstrap, html/css

i tried to add gutters to my grid with bootstrap, but they do not appear. i dont know why they dont as im following the steps as noted on the bootstrap docs.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="container-sm text-center gy-6 gx-6">
        <div class="row">
            <div class="col">
                <div class="p-3 bg-success">1x12</div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="p-3 bg-danger">1x6</div>    
            </div>
            <div class="col">
                <div class="p-3 bg-danger">2x6</div>    
            </div>
        </div>
        <div class="row">
          <div class="col">
           <div class="p-3 bg-warning">1x4</div>
          </div>
          <div class="col">
            <div class="p-3 bg-warning">2x4</div>
          </div>
          <div class="col">
            <div class="p-3 bg-warning">3x4</div>
          </div>
        </div>
        <div class="row">
            <div class="col">
             <div class="p-3 bg-info">1x3</div>
            </div>
            <div class="col">
              <div class="p-3 bg-info">2x3</div>
            </div>
            <div class="col">
              <div class="p-3 bg-info">3x3</div>
            </div>
            <div class="col">
              <div class="p-3 bg-info">4x3</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
             <div class="p-3 bg-success">1x2</div>
            </div>
            <div class="col">
              <div class="p-3 bg-success">2x2</div>
            </div>
            <div class="col">
              <div class="p-3 bg-success">3x2</div>
            </div>
            <div class="col">
              <div class="p-3 bg-success">4x2</div>
            </div>
            <div class="col">
              <div class="p-3 bg-success">5x2</div>
            </div>
            <div class="col">
              <div class="p-3 bg-success">6x2</div>
            </div>       
      </div>
      <div class="row">
        <div class="col">
         <div class="p-3 bg-warning">1x2</div>
        </div>
        <div class="col">
          <div class="p-3 bg-warning">2x2</div>
        </div>
        <div class="col">
          <div class="p-3 bg-warning">3x2</div>
        </div>
        <div class="col">
          <div class="p-3 bg-warning">4x2</div>
        </div>
        <div class="col">
          <div class="p-3 bg-warning">5x2</div>
        </div>
        <div class="col">
          <div class="p-3 bg-warning">6x2</div>
        </div>
        <div class="col">
            <div class="p-3 bg-warning">1x2</div>
           </div>
           <div class="col">
             <div class="p-3 bg-warning">2x2</div>
           </div>
           <div class="col">
             <div class="p-3 bg-warning">3x2</div>
           </div>
           <div class="col">
             <div class="p-3 bg-warning">4x2</div>
           </div>
           <div class="col">
             <div class="p-3 bg-warning">5x2</div>
           </div>
           <div class="col">
             <div class="p-3 bg-warning">6x2</div>
           </div>              
        </div>
    </div>
      
</body>
</html>

And a screenshot of the current page i have.
Does anyone have an idea on what i am doing wrong?

Tried to add gutters with bootstrap using gy-6 and gx-6, tried multiple values. but didnt change the problem.

Tags:

2

Answers


  1. 0

    From my experience with bootstrap, padding, gutters, and margin classes only go up to five, i.e. .g-1, .g-2, .g-3, .g-4, .g-5. Same with p-1, p-2, p-3, p-4, p-5 and m-1, m-2, m-3, m-4, m-5.

    Login or Signup to reply.
  2. 0

    Bootstrap 5 provides gutter values from 0 to 5. If you have created 6th gutter then only g-6 can work.

    To add extra gutter, please update variables.scss as below:

    $grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
);

    Make sure you update numbers as per your requirements.

    You can use gutter classes with flex elements like row class. So your code should be updated as below:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="container-sm text-center">
    <div class="row gy-6 gx-6">
        ...
    </div>
    <div class="row gy-6 gx-6">
      ...
    </div>
    <div class="row gy-6 gx-6">
      ...
    </div>
    <div class="row gy-6 gx-6">
      ...
    </div>
  </div>
</body>
</html>

    You can also use "g-6" class in place of "gy-6 gx-6" classes

    Happy coding!!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search