0

tengo un proyecto en laravel y estoy utilizando bootstrap 4 para los estilos pero tengo un problema cuando quiero agregar o sobreescribir los estilos de bootstrap en mi propio archivo styles.css ya que no respeta los cambios que realice, pues toma los propios de bootstrap.

Dentro de la carpeta resources > views cree una carpeta admin > layouts que contiene las vistas template, otra para el footer y otra para el nav. Y como tal en la carpeta admin tengo mi archivo index.blade.php que incluye a las vistas anteriores. El contenido de mi vista template que es en donde mando llamar a las hojas de estilo, es:

<!-- Styles -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
    <main class="py-4">
        @yield('content')
    </main>  
    <script src="../js/jquery-3.3.1.min.js" ></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

Por otro lado las hojas de estilo de bootstrap y de styles las coloque dentro de public > css.

¿cual es el error que estoy cometiendo?

Intente cambiar el href con ../css/style.css, pero me sigue mostrando los mismos estilos de bootstrap.

1
  • El error es que estas incluyendo tu CSS antes del de Bootstrap, por ende Bootstrap sobreescribe tus estilos, debes incluir el tuyo despues
    – IvanS95
    el 4 abr. 2019 a las 20:31

1 respuesta 1

1

El orden en que incluyes los archivos externos importa; en este caso, ya que el documento HTML y CSS se va leyendo arriba hacia abajo (por eso el Hoja de Estilos en Cascada), primero lee tus estilos y los aplica, pero luego lee los de Bootstrap y reemplaza los primeros que leyo (los tuyos) y los vuelve a ajustar a Bootstrap.

Simplemente cambia el orden de las hojas externas para que tus estilos sean los ultimos en aplicar.

<!-- Styles -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <main class="py-4">
        @yield('content')
    </main>  
    <script src="../js/jquery-3.3.1.min.js" ></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>
2
  • vaya no lo había notado, gracias. el 5 abr. 2019 a las 16:52
  • No hay problema :) si te ayudo recuerda marcar la respuesta como correcta o al menos un voto positivo; si tienes otro problema puedes plantearlo si aun no funciona
    – IvanS95
    el 5 abr. 2019 a las 16:56

Tu Respuesta

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

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