maxresdefault 48

Alignment en Bootstrap 5 (Mi primer página Web)

La herramienta alineación (alignment) en Bootstrap 5 nos ayuda a modificar columnas con un puñado de opciones, orden y compensación gracias a nuestro sistema de cuadrícula. Además, veremos cómo usar las clases de columna para administrar los anchos de los elementos que no pertenecen a la cuadrícula.

Codigo de alignment en Bootstrap 5: https://github.com/programadornovato/MiPaginaWeb/commit/acf6a2bc19a03dbeaf322f3f320a4377758f894e

<!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="row border align-items-start" style="height:200px;">
        <div class="col-1 border bg-light">1</div>
        <div class="col-1 border bg-light">2</div>
        <div class="col-1 border bg-light">3</div>
        <div class="col-1 border bg-light">4</div>
        <div class="col-1 border bg-light">5</div>
        <div class="col-1 border bg-light">6</div>
    </div>
    <div class="row border align-items-center justify-content-around" style="height:200px;">
        <div class="col-1 border bg-light order-last">1</div>
        <div class="col-1 border bg-light offset-3">2</div>
        <div class="col-1 border bg-light">3</div>
        <div class="col-1 border bg-light">4</div>
        <div class="col-1 border bg-light order-first">5</div>
        <div class="col-1 border bg-light">6</div>
    </div>
    <div class="row border align-items-end" style="height:200px;">
        <div class="col-1 border bg-light">1</div>
        <div class="col-1 border bg-light">2</div>
        <div class="col-1 border bg-light">3</div>
        <div class="col-1 border bg-light">4</div>
        <div class="col-1 border bg-light">5</div>
        <div class="col-1 border bg-light">6</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. :)