3

Estoy desarrollando una pagina y para agregarle iconos decidi hacerlo a traves de Bootstrap por medio de un enlace CDN. Sin embargo, me di cuenta que el CSS de Bootstrap anula el CSS que yo cree.

Mi pregunta es si es posible que ambos convivan al mismo tiempo y si es asi como lograrlo.

Cabe resaltar que soy nuevo usando Bootstrap.

De antemano gracias

Codigo de mi head

introducir la descripción de la imagen aquí

Como se ve con mi CSS activo y Bootstrap comentado

introducir la descripción de la imagen aquí

Como se ve con mi CSS y el de Boostrap activos

introducir la descripción de la imagen aquí

7
  • 1
    puedes poden el codigo donde los enlazas? y explicar como ves que lo anula
    – ivanao
    el 23 ene. 2019 a las 0:23
  • Listo ya agregue el codigo y las pantallas @ivanao
    – Erick Finn
    el 23 ene. 2019 a las 0:33
  • Si la única función de Bootstrap que estás aprovechando son los iconos, te recomiendo que utilices una librería específica para eso. Por ejemplo: Font Awesome. La versión gratuita incorpora muchísimos iconos y es muy fácil de usar. Yo lo utilizo en prácticamente todos mis proyectos web. Además, si no lo quieres cargar localmente puedes hacer una petición externa a través de su CDN (igual que Bootstrap)
    – Ángela
    el 23 ene. 2019 a las 0:39
  • Si estaba usando Font Awesome, pero Firefox no carga lo iconos, solo chrome.
    – Erick Finn
    el 23 ene. 2019 a las 0:40
  • Pues yo no tengo ningún problema con Firefox. Puedes ver aquí la compatibilidad con los distintos navegadores: fontawesome.com/how-to-use/on-the-web/other-topics/…
    – Ángela
    el 23 ene. 2019 a las 0:44

4 respuestas 4

2

Yo tenía el mismo problema pero vi que si tus selectores estan bien y son específicos tu CSS no debería estar anulado por bootstrap, pero si puedes considerar que cada propiedad que no vayas a establecer, se usaría la que bootstrap tiene definida, entonces debes definir todo tu mismo si no quieres que se use las de bootstrap.

Espero con los siguientes ejemplos se pueda ilustrar lo que mencioné.

Por ejemplo:

#logo h1 {
  font-family: "Verdana", "Arial";
  font-size: 30px;
  letter-spacing: 14px;
  line-height: 75px;
  background: #235E3D;
  color: white;
  text-align: center;
  width: 50vw;
  height: 80px;
  
  /*todas estas propiedades se estan aplicando por encima de las de bootstrap sin 
necesidad de colocar important pero las que no utilicé se aplicarán 
las de bootstrap o sea cada propiedad que no quieras de bootstrap deberías establecerla
en el valor que quieres*/
      
}
<!DOCTYPE html>
<html lang="es">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



  <title>Ejemplo 1</title>

</head>

<body>

  <header>

    <div id="logo">

      <h1>
        Proyecto
      </h1>

    </div>


  </header>

</body>

</html>

Ejemplo 2

  #logo h1 {
      /* no font family*/
      font-size: 30px;
      line-height: 75px;
      /* no letter spacing */
      background: #235E3D;
      color: white;
      text-align: center;
      width: 50vw;
      height: 80px;
      
/* font family y letter spacing por default de bootstrap al no establecerla
nosotros,pero si la establecemos como en el ejemplo 1
entonces no habría problema que se anulen nuestros 
estilos si nuestros selectores estan correctamente
hechos pero cuando me pasa esto tomo en cuenta sobreescribir 
los estilos que a mi parecer evitan llegar al diseño deseado
y dejo sin sobreescribir los que no presentan problema*/
          
    }
    <!DOCTYPE html>
    <html lang="es">

    <head>

      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



      <title> Ejemplo 2 </title>

    </head>

    <body>

      <header>

        <div id="logo">

          <h1>
            Proyecto
          </h1>

        </div>


      </header>

    </body>

    </html>

0

Sólamente prueba poniendo en tu css: Al final de cada unapropiedad de tus clases !important por ejemplo.

p{ font-size: 18px !important }

Con eso forzas al navegador a ultilizar esa propiedad en vez de la de cualquier otro con menos jerarquía si no funciona has lo mismo pero pones la propiedad en tu HTML con el !important

2
  • No es buena práctica ni buen consejo usar !important para resolver este tipo de conflictos el 23 ene. 2019 a las 16:15
  • Es mejor sobreescribir las propiedades mediante herencia forzada que usar !important lo cual solo es aceptable en situaciones específicas. el 28 ene. 2019 a las 19:58
0

Pon el enlace a tu css despues del de bootstrap. Siempre se deben poner los enlaces a archivos propios despues de los enlaces a framework o librerias.

Dentro de tu html podrias:

<title>Pagina Principal</title>
<link rel="styleheet" htref="url enlace a bootstrap">

.. otros enlaces a framework o librerias

.. y por utimo e de tu css propio
<link htref="SQL.css" rel="styleheet>
1
  • mejora tu aporte con código indicando como hacerlo
    – user75901
    el 23 ene. 2019 a las 0:46
0

Coloca los enlaces a tus propios archivos de CSS al final del resto.

<!DOCTYPE html>
<html lang="es">
  <head>
    
    <!-- Archivos CSS, primero Bootstrap, luego el tuyo -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="SQL.css" rel="stylesheet">
    
    <!-- En caso de que tengas archivos Javascript sigue la misma logica -->
    <!-- Primero Jquery, luego Boostrap, y luego el tuyo -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/mi_javascript.js"></script>
  </head>
  <body>
    <div class="alert alert-success" role="alert">Tus archivos siempre van al final de todos los demás archivos que los frameworks requieran</div>
  </body>
</html>

1

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