maxresdefault 44

Puntos de ruptura en Bootstrap 5 (Mi primer página Web)

En esta clase vamos a ver los puntos de ruptura en Bootstrap 5, en otras palabras vamos a personalizar como queremos que se miren nuestras columnas en los diferentes dispositivos (teléfonos, tablets televisiones e incluso cines :o)

Codigo de los puntos de ruptura en Bootstrap 5: https://github.com/programadornovato/MiPaginaWeb/commit/d60cf0003757bd6d18a2b1a37c247997c9d12cfa

<!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">
            <div class="col-xs-4 col-sm-6 col-md-1 col-lg-9 bg-primary border">1</div>
            <div class="col-xs-4 col-sm-6 col-md-1 col-lg-9 bg-primary border">2</div>
            <div class="col-xs-4 col-sm-6 col-md-1 col-lg-9 bg-primary border">3</div>
        </div>
        <div class="row">
            <div class="col-sm-6 bg-danger border">1</div>
            <div class="col-sm-6 bg-danger border">2</div>
            <div class="w-50 bg-success border">50</div>
            <div class="col-sm-6 bg-danger border">3</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. :)