maxresdefault 43

Contenedores y rejillas en Bootstrap 5 (Mi primer página Web)

En este tutorial vamos a estudiar los contenedores y rejillas en Bootstrap 5.

Codigo de los contenedores y rejillas en Bootstrap 5: https://github.com/programadornovato/MiPaginaWeb/commit/f1b916870aaa69c62b8c868d5cfe757e6ae6b067

<!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 bg-primary">
        <p>
            texto
        </p>
        <p>
            texto
        </p>
        <p>
            texto
        </p>
        <p>
            texto
        </p>
        <p>
            texto
        </p>
    </div>
     -->
<!-- 
     <div class="container">
         <div class="row">
             <div class="col bg-primary">1</div>
             <div class="col bg-primary">2</div>
             <div class="col bg-primary">3</div>
             <div class="col bg-primary">4</div>
             <div class="col bg-primary">5</div>
             <div class="col bg-primary">6</div>
             <div class="col bg-primary">7</div>
             <div class="col bg-primary">8</div>
         </div>
     </div>
      -->
      <div class="container">
          <div class="row">
              <div class="col-4 bg-primary">1</div>
              <div class="col-4 bg-primary">2</div>
              <div class="col-4 bg-primary">3</div>
          </div>
          <div class="row">
              <div class="col-9 bg-danger">9</div>
              <div class="col-2 bg-danger">2</div>
              <div class="col-1 bg-danger">1</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. :)