Css cannot be loaded correctly when following a link

I have my homepage with a bootstrap theme.

When I go on : localhost/boardgamedb/public/index.php

everything looks fine.

However when I click on the "home" link I get redirected to : localhost/boardgamedb/public/index.php/ (as normal considering my controller)

I do get the same content but with no css (and I don’t know yet for the JS)

my base.html.twig is :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="stylesheet" href="style/bootstrap.min.css">
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="{{ path('homepage') }}">Boardgame DB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{{ path('homepage') }}">Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            
            </ul>
            
        </div>
    </nav>
        {% block body %}{% endblock %}
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

my home.html.twig :

{% extends 'base.html.twig' %}

{% block body %}
    <h1>Test2</h1>
{% endblock %}

and my controller is :

class BgdbController extends AbstractController{

    /** 
    * @Route("/", name="homepage")
    */
    public function home() {
        return $this->render(
            "home.html.twig"
        );

    }
}

I cannot see why the css work on one but not on the other, probably a problem with the route to the css file.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *