0

estoy empezando con boostrap, alquien sabe que esta mal en mi código? parece que no me carga bootstrap, no usa ni las fuentes, ni la tipología ni nada de las librerías. Las rutas de las carpetas están bien. he revisado todo y no entiendo porque no cambia el formato, se ve igual que si no hiciera referencia a las librerias, siento que es algo muy basico pero es lo que tiene ser autodidacta, jejeje. un saludo a todos y gracias.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mi pagina</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
</head>
<body>
    <header class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <a href="index.html" title="Chaplin Cafe">
                <img src="imagenes/logo_chaplin.jpg" alt="logo Chaplin Cafe"/>
                </a>
            </div>
            <div class="col-md-4 col-md-offset-4">
                <nav style="margin-top:50px">
                    <a href="https://www.facebook.com/ChaplinCafeTorredelmar/" title="Establecimiento">Establecimiento</a>
                    <a href="https://www.facebook.com/pg/ChaplinCafeTorredelmar/about/?ref=page_internal" title="Contacto">Conctacto</a>
                </nav>
            </div>
        </div>
    </header>
    <div id="slogan" class="container text-center bg-info">
        <i class="glyphicon glyphicon-calendar"></i>
        <h2>Un Lugar Magico Donde Todo Puede Pasar</h2>
    </div>
    <footer class="container-fluid">
        &copy; Chaplin Cafe, Since 1984.
    </footer>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js" ></script>
</body>

tenia la carpeta del proyecto en una carpeta con mas proyectos y las carpetas de bootstrap en la raíz del proyecto en cuestión, no se porque pero se arreglo aislando la carpeta fuera de la de proyectos. Lo extraño es que no funcionara tampoco con el enlace al CDN como sugirió el compañero. La razón de que lo pusiera en local es porque estoy aprendiendo y así es como lo dictaba el cursillo, pero gracias a vosotros he aprendido otra manera de hacerlo. Gracias a todos por vuestra ayuda

6
  • 1
    Este enlace es correcto href="css/bootstrap.min.css" ?, es decir tienes a bootstrap dentro de una capeta llamada css?, recomiendo abre la consola del navegador y revisa si te devuelve algún error
    – user128299
    Commented el 26 sept. 2019 a las 18:43
  • Podrías abrir la consola del navegador y verificar el error que marca? Commented el 26 sept. 2019 a las 18:46
  • 1
    ¿Por qué quieres usar bootstrap en local, cuando puedes usar la versión que ellos ofrecen en su CDN? Prueba a cambiarlo por esto: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> Así vas menos cargado, porque se incluirá el archivo de forma segura desde el CDN de bootstrap.
    – A. Cedano
    Commented el 26 sept. 2019 a las 18:48
  • ... y también para la parte Javascript que tienes en el footer: <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    – A. Cedano
    Commented el 26 sept. 2019 a las 18:50
  • 1
    Para que funcione tal como tienes las rutas, tu archivo html debe estar almacenado en la raíz de la carpeta donde tienes las carpetas css y js
    – DjCrazy
    Commented el 26 sept. 2019 a las 18:54

4 respuestas 4

0

intenta importar el css de boostrap con esta etiqueta:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
1
  • sigue sin funcionar, no se que estoy haciedo mal, el codigo parece correcto
    – richi pae
    Commented el 26 sept. 2019 a las 19:08
0

Agrega las referencias de CDN que ofrece Boostrap revisa este snippet

<html>
<head>
    <meta charset="utf-8">
    <title>mi pagina</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <header class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <a href="index.html" title="Chaplin Cafe">
                <img src="imagenes/logo_chaplin.jpg" alt="logo Chaplin Cafe"/>
                </a>
            </div>
            <div class="col-md-4 col-md-offset-4">
                <nav style="margin-top:50px">
                    <a href="https://www.facebook.com/ChaplinCafeTorredelmar/" title="Establecimiento">Establecimiento</a>
                    <a href="https://www.facebook.com/pg/ChaplinCafeTorredelmar/about/?ref=page_internal" title="Contacto">Conctacto</a>
                </nav>
            </div>
        </div>
    </header>
    <div id="slogan" class="container text-center bg-info">
        <i class="glyphicon glyphicon-calendar"></i>
        <h2>Un Lugar Magico Donde Todo Puede Pasar</h2>
    </div>
    <footer class="container-fluid">
        &copy; Chaplin Cafe, Since 1984.
    </footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

0

Segun tu codigo debiste descargar el codigo de bootstrap, en su defecto traerlo directo desde un sito web. en vez de

 <link rel="stylesheet" href="css/bootstrap.min.css">

coloca este

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
0

acabo de notar algo curioso mientras veía este error, espero sirva a los demás, lo que hice fue direccionar desde la carpeta de proyecto, quedando así:

<link rel="stylesheet" href="/proyecto/css/bootstrap.min.css">

<link rel="stylesheet" href="/proyecto/css/bootstrap.min.css">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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