¿Como puedo hacer que mis estilos se muestren en laravel?

publicado por: Anonymous

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.

solución

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>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.