hola buenas tardes a todos, estoy aprendiendo bootstrap5 y estoy creando un ejemplo sencillo donde teno una fila que tiene 12 columnas, el problema aqui es que no logro poder asignar un espacio entre columnas ya probe con cosas como offset ,gx, justify-content-between pero no logro un resultado, me gustaria que me puedieran explicar o si tengo algun error por favor mencionarme que estoy haciendo mal y como solucionarlo , gracias adjunto codigo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<title>Document</title>
<style>
.ContenedorPrincipal{
background-color: aquamarine;
}
.ColSaturday{
background-color: aqua;
color: black;
border: 2px groove black;
}
</style>
</head>
<body>
<div class="container ContenedorPrincipal px-4">
<div class="row row-cols-3 gy-4 justify-content-around">
<div class="col pull-right ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
<div class="col ColSaturday">SATURDAY</div>
</div>
</div>
<script src="../js/bootstrap.bundle.js">
</script>
</body>
.gutters
, no deberías usar utilidades de espacio en los elementos con clase.col-*
, lo ideal es que sea dentro de contenedores hijos de estas columnas. Te dejo el enlace por si quieres entender cómo funciona: getbootstrap.com/docs/5.2/layout/gutters