Bootstrap horizontal gutters issue

I have a blank project with nothing but a code snippet from Bootstraps horizontal gutters page https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal-gutters I dont see any horizontal gaps, why is that? Vertical gutters only work...

image

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <title>Dash</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <div class="container px-4 text-center">
      <div class="row gx-5">
        <div class="col border">
         <div class="p-3">Custom column padding</div>
        </div>
        <div class="col border">
          <div class="p-3">Custom column padding</div>
        </div>
      </div>
    </div>

  </body>
</html>

https://pastebin.com/raw/UXU2ePk2 https://pastebin.com/raw/cnBsCPvF

Solution

I hope this can help you:

<!doctype html>
<html>
   <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
   </head>
   <body>
  <div class="container px-4 text-center">
     <div class="row gy-3">
        <div class="col-6">
           <div class="p-3 border">Custom column padding</div>
        </div>
        <div class="col-6">
           <div class="p-3 border">Custom column padding</div>
        </div>
        <div class="col-6">
           <div class="p-3 border">Custom column padding</div>
        </div>
        <div class="col-6">
           <div class="p-3 border">Custom column padding</div>
        </div>
     </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
</html>

Or this one:

<!doctype html>
<html>
   <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
   </head>
   <body>
  <div class="container px-4 text-center">
     <div class="row gx-5">
        <div class="col">
           <div class="p-3 border">Custom column padding</div>
        </div>
        <div class="col">
           <div class="p-3 border">Custom column padding</div>
        </div>
     </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> 
   </body>
</html>