1

No me sale en columnas y estoy copiando códigos de ejemplos. Y me salen una debajo del otro sin importar el tamaño del col que le de Ayuda por favor, soy primeriza en bootstrap.

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Proyecto</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-t-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie-edge">
    <link rel="stylesheet" type="text/ccs" href="ccs/bootstrap.css">
    
</head>
<body>
    <p>welcome</p>
    <div class="container">
        <div class="row">
            <div class="col-6">uno </div>
            <div class="col-4">dos </div>
            <div class="col-2">tres </div>
        </div>
    </div>
    
  <!--para que pueda trabajar sin conexion a internet-->
    <script src="jq/jquery-3.5.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
5
  • 2
    Lee por favor Cómo preguntar y provee un ejemplo mínimo verificable de otro modo con solo una captura de pantalla poco o nada podemos hacer
    – user128299
    el 10 feb. 2021 a las 2:56
  • 2
    puede que estes escribiendo mal la ruta de bootstrap. podes compartir tu codigo asi podemos encontrar mejor el error? el 10 feb. 2021 a las 3:21
  • ¿Por qué unos js los invocas de una carpeta js y otro de una jq?, ¿es así o lo escribiste mal?
    – user128299
    el 10 feb. 2021 a las 19:39
  • Es probable que este sea un error de dedo: <script src="jq/jquery-3.5.1.min.js"></script> al no encontrar la ruta no te cargara esta librería. Por lo general si tienes bien indicadas las rutas de tus librerías boostrap ya sea de manera local o remota, el código que obtengas del sitio oficial de bootstrap cualquier ejemplo te debería funcionar sin problema.
    – Cesarin
    el 10 feb. 2021 a las 20:09
  • Por la ruta de la URL, parece que estás abriendo el archivo .html directamente desde el explorador de archivos de tu teléfono. Junto a tu archivos, están los demás enlaces externos de CSS? el 10 feb. 2021 a las 22:14

2 respuestas 2

1

el problema es que me faltaba link rel="stylesheet" href="css/bootstrap.rtl.css"> gracias a todos

0
0

No estoy del todo seguro de esto, pero creo que es porque lo estás visualizando en Android, intenta a verlo en el navegador de tu PC en el modo de inspector Ctrl+Shift+I, para previsualizar tu proyecto del tamaño de un móvil, o intenta instalar Bootstrap desde su CDN que proveen en su página Get Started.

Ir a la documentación de Bootstrap 4

No olvides instalar de igual forma las dependencias indicadas en su sitio. Te dejo un ejemplo de un archivo con las columnas que tienes en tu ejemplo.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Mi sitio con Bootstrap</title>
  <!-- Bootstrap 4 CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>

<body>
  <header class="text-center bg-danger p-4 text-white">
    <h1>Header</h1>
  </header>
  <main>
    <div class="container p-3 my-4">
      <h1 class="text-uppercase">welcome</h1>
      <h2>Aquí va el contenido</h2>
      <div class="container">
        <div class="row text-center">
          <div class="p-4 col-6 bg-primary">1. col-6</div>
          <div class="p-4 col-4 bg-secondary">2. col-4</div>
          <div class="p-4 col-2 bg-primary">3. col-2</div>
        </div>
      </div>

      <div class="container">
        <br /><br />
        <p>
          Igual te dejo este ejemplo de como hacer que se adapten automáticamente sin importar cuantas columnas quieras poner
        </p>
      </div>

      <div class="container">
        <div class="row">
          <div class="p-4 col bg-primary">1</div>
          <div class="p-4 col bg-secondary">2</div>
          <div class="p-4 col bg-primary">3</div>
          <div class="p-4 col bg-secondary">4</div>
          <div class="p-4 col bg-primary">5</div>
        </div>
      </div>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam perspiciatis dolores eos maxime, amet veniam temporibus ducimus assumenda iusto expedita cupiditate distinctio perferendis exercitationem nihil quaerat neque quis laboriosam officia.
      </p>
    </div>
  </main>
  <footer class="text-center bg-danger p-4 text-white">
    <h3>Footer</h3>
    <p>Este es el footer</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam perspiciatis dolores eos maxime, amet veniam temporibus ducimus assumenda iusto expedita.
    </p>
  </footer>
  <!-- Dependencias de bootstrap -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.