2

Estoy haciendo una app web a la cual quiero incorporarle bootstrap como asi tambien estilos personalizados. El problema es que me toma los estilos predeterminados de bootstrap pero no los personalizados que aplico. Por ejemplo: en el index.php tengo un jumbotron, al cual quiero personalizar.

          <?php include('includes3/meta2.php'); ?>

            //Mas codigo
        <div class="jumbotron">
        <div class="container"><h1>QUIENES SOMOS</h1></div>
        <img src="img3/imgHeadAcercaDe.jpg">
      </div>

Y en el .css

/*JUMBOTRON*/

.jumbotron {
background-color: transparent;
position: relative;
padding-top: 0;
padding-bottom: 0;
}

.jumbotron img {
width: 100%;
}

.jumbotron h1{
position: absolute;
bottom: 25%;
color: #FFF;
text-shadow: 3px 3px 1px #18367c;
font-size: 40px;
font-weight: 400;
}

Sin embargo no me toma esos estilos ya que no se ve así y cuando veo mediante F12 me muestra que el estilo del jumbotron lo toma de bootstrap.min.css y la tipografía, etc inherited from body.

En el meta2.php:

      <!DOCTYPE html>
     <html lang="es">
     <head>
     <meta charset="utf-8>"
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Stylesheets-->
     <link rel="stylesheet" type="text/css" href="css3/estilos.css"/>
      <!--Bootstrap-->
     <script 
      src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

Como podría solucionarlo?

8
  • Si, me referia a que el index es .php y que la hoja de estilos está añadida mediante un include, según he leído quizas a veces por eso no toma los estilos. Commented el 19 feb. 2018 a las 14:16
  • estas importando los estilos 2 veces, y en el segundo caso en el href te falta el http en la url
    – Lucas. D
    Commented el 19 feb. 2018 a las 14:27
  • Como dos veces? en el primero importo el min.js y en el segundo el min.css Commented el 19 feb. 2018 a las 14:27
  • No, importas 2 veces lo mismo. href="css3/estilos.css" y href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'.
    – Lucas. D
    Commented el 19 feb. 2018 a las 14:29
  • Nop, estilos.css es mi hoja de estilos personalizada. Commented el 19 feb. 2018 a las 14:31

2 respuestas 2

5

Tal como dice la documentacion de Bootstrap tienes que añadir el siguiente codigo en tu etiqueta head. No debes olvidarte de importar los archivos de JavaScript!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Si ya tienes en alguna carpeta de tu proyecto el archivo bootstrap.min.css o bootstrap.css seria algo asi:

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

Tu codigo deberia quedar asi:

<head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Acá es donde tienes mal apuntada la dirección, te falta el http -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <title>Hello, world!</title>
</head>
1

los estilos amigo, se deben aplicar en HTML, después de eso deberías:

  1. poner tu hoja de estilos personalizada en segunda posición
  2. luego invocar a bootstrap, para que esta última no te sobre escriba tus estilos

MUESTRA DE CÓDIGO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="MiHojaEstilos.css">
</head>
<body>

</body>
</html>

los estilos al ser en cascada, se ejecutarán primero los del enlace a boostrap y posteriormente los de MiHojaEstilos.css para de este modo mantener los estilos que tu mismo generaste

3
  • 1
    Alfredo noto que eres nuevo en el sitio. Tu respuesta es correcta pero le darías mas peso y relevancia si colocas un ejemplo con código funcional. De esta forma el dueño de la pregunta se guía mejor y los otros usuarios de la comunidad puntuan tu valioso aporte con mayor frecuencia. Un Saludo!
    – Eztronics
    Commented el 19 feb. 2018 a las 23:34
  • entendido gracias por las observaciones
    – user75901
    Commented el 19 feb. 2018 a las 23:35
  • De nada bro!!!!
    – Eztronics
    Commented el 19 feb. 2018 a las 23:38

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.