CSS doesn't effect in blade

Question

I'm encountering a problem today: I just created a new blade view that displays my HTML, but my CSS doesn't work! I tried several ways like putting it directly on the page, putting it outside my layout, nothing to do... it works on all my other pages that are exactly the same place on my workspace.

Here is my blade file:

@extends('layouts.default')

@section('content')
    <section class="blog-outer-area mt-5">
        <div class="content-area">
            <div class="blog-area-sec">
                <!-- Start: Blog Sec -->
                <div class="blog-sec">
                    <div class="container">
                        <!-- Start:Blog Area -->
                        <div class="blog-inner-area row">
                            <!-- Start:Blog Left Content-->
                            <div class="col-lg-8 left">
                                <div class="item-box">
                                    <div class=" img-holder">
                                        <img src="template/img/home-blog-1.jpg" alt="">
                                    </div>
                                    <div class=" img-holder">
                                        <img src="template/img/home-blog-1.jpg" alt="">
                                    </div>
                                    <div class="info-text-holder">
                                        <h4>{{ $article->titre }}</h4>
                                        <span>{{ $article->created_at->format('d/m/Y') }}</span>
                                        <p>{{ $article->description }}</p>
                                        <ul class="social-icon-simple">
                                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- End:Blog Left Content-->

                            <!-- Start:Blog Right Content-->
                            <div class="col-lg-4 ">
                                <div class="right">
                                    <input type="text" name="search" class="search-btn" placeholder="Search Here">

                                    <!-- Start:Recent Posts-->
                                    <h5>Recent posts</h5>
                                    <ul class="recent-post">
                                        <!-- Start:Post 1-->
                                        <li>
                                            <div class="row">
                                                <div class="col-lg-5">
                                                    <img src="template/img/blog-4.jpg" alt="">
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="text">
                                                        <p><a href="#">Stetina savours Tour de France return</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End:Post 1-->
                                        <!-- Start:Post 2-->
                                        <li>
                                            <div class="row">
                                                <div class="col-lg-5">
                                                    <img src="template/img/blog-5.jpg" alt="">
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="text">
                                                        <p><a href="#">Top Fitness Gear to Help You Workout</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End:Post 2-->
                                        <!-- Start:Post 3-->
                                        <li>
                                            <div class="row">
                                                <div class="col-lg-5">
                                                    <img src="template/img/blog-6.jpg" alt="">
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="text">
                                                        <p><a href="#">The Southern Ocean is the 'newest' named ocean</a></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- End:Post 3-->

                                    </ul>
                                    <!-- End:Recent Posts-->

                                </div>
                            </div>
                            <!-- End:Blog Right Content-->
                        </div>
                        <!-- End:Blog Area -->
                    </div>
                </div>
                <!-- End: Blog Sec -->
            </div>
        </div>
    </section>

@endsection

My Layout integrations:

<link type="text/css" rel="stylesheet" href="template/css/bootstrap.min.css"><!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
    <link type="text/css" rel="stylesheet" href="template/css/animate.min.css"><!-- Animation -->
    <link type="text/css" rel="stylesheet" href="template/css/flexslider.css"><!-- FlexSlider CSS -->
    <link type="text/css" rel="stylesheet" href="template/css/style.css"><!-- Light Theme Core CSS -->

    <!-- Google Fonts here -->
    <link href="template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
    <link href="template/css/fonts/open-sans.css" type='text/css'>
    <link href="template/css/fonts/lato.css" rel='stylesheet' type='text/css'>

My workspace looks like this:

which code doesn't work put that code pls and where is your css — Kamlesh Paul, Sep 08 '20 at 03:51
@KamleshPaul The CSS does not seem to be recognized by the template blade. Even if you put it directly in the blade file — dolor3sh4ze, Sep 08 '20 at 03:53
check this https://stackoverflow.com/questions/45279612/including-a-css-file-in-a-blade-template if u don't understand i can make answer for u as well just let me know — Kamlesh Paul, Sep 08 '20 at 03:57
The problem is that I've already integrated the CSS in the layout, it works on all the other pages but not on this one, so there's no difference... — dolor3sh4ze, Sep 08 '20 at 03:59
`css` always work in head tab so u should always put css in `head` tag — Kamlesh Paul, Sep 08 '20 at 04:01
you are using relative pathing ... use the URL helpers to generate absolute URLS to your resources and assets — lagbox, Sep 08 '20 at 06:14

score 0 · Accepted Answer · answered Sep 08 '20 at 07:25

Try this

<link type="text/css" rel="stylesheet" href="/template/css/bootstrap.min.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="/template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="/template/css/animate.min.css"><!-- Animation -->
<link type="text/css" rel="stylesheet" href="/template/css/flexslider.css"><!-- FlexSlider CSS -->
<link type="text/css" rel="stylesheet" href="/template/css/style.css"><!-- Light Theme Core CSS -->

<!-- Google Fonts here -->
<link href="/template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
<link href="/template/css/fonts/open-sans.css" type='text/css'>
<link href="/template/css/fonts/lato.css" rel='stylesheet' type='text/css'>

CSS doesn't effect in blade

1 Answers1