maxresdefault 45

Gutters (Canales) en Bootstrap 5 (Mi primer página Web)

Los Gutters (Canales) en Bootstrap 5 son el relleno entre las columnas, que se utilizan para espaciar y alinear el contenido de las rejillas Bootstrap.

Los Gutters (Canales) son los espacios entre el contenido de la columna, creados por el padding horizontal . Establecemos padding-right y padding-left en cada columna, y usamos un margin negativo para compensar eso al principio y al final de cada fila para alinear el contenido.

Los 1.5rem comienzan en 1.5rem ( 24px ) de ancho. Esto nos permite hacer coincidir nuestra cuadrícula con la escala de espaciadores de margen y relleno .

Los Gutters (Canales) se pueden ajustar de forma sensible. Utilice clases de canaletas específicas de puntos de interrupción para modificar las canaletas horizontales, las canaletas verticales y todas las canaletas.

Codigo de los Gutters (Canales) en Bootstrap 5: https://github.com/programadornovato/MiPaginaWeb/commit/c516f51916122c6131111ec16a121e09aaf4af35

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Mi primer pagina Web</title>
</head>

<body>
    <div class="container">
        <div class="row g-sm-0 g-md-1 g-lg-2 g-xl-5">
            <div class="col-4 bg-primary border">
                <div class="bg-light border">Texto</div>
            </div>
            <div class="col-4 bg-primary border">
                <div class="bg-light border">Texto</div>
            </div>
            <div class="col-4 bg-primary border">
                <div class="bg-light border">Texto</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>

</html>

🎦[Curso] Visual Studio Code 🆚 de 0 a 100: https://www.youtube.com/watch?v=s47z_qh16j4&list=PLCTD_CpMeEKQbdlT8efsS-veXuvYZ1UWn&ab_channel=programadornovato
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/watch?v=_paV6qQ-a4M&list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT&ab_channel=programadornovato
🎦[Curso] Javascript🔥 de 0 a 100: https://www.youtube.com/watch?v=fwtaVaiR-Kg&list=PLCTD_CpMeEKQZtB8mNm0J1qWmHdZ2QUt-&ab_channel=programadornovato

Anterior tutorial Siguiente tutorial

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)