CODEWITHSUNDEEP
symfonybootstrap-4twigbootswatch
user14299195
user14299195

Reputation:

Unable to load bootswatch theme in twig template in symfony

I am using HTML Twig template for render page in symfony framework, i want to include Bootswatch theme in my base.html.twig file, and then extends this file into test.html.twig file. I included css CDN link and Javascript CDN links from getbootstrap.com, but it did not working correctly. please help me to find my mistake.

Here is my code.

base.html.twig


  

      <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>{% block title %}Welcome!{% endblock %}</title>
            <link rel="stylesheet" href="https://bootswatch.com/solar/" >     <!--  bootswatch theme CSS link   -->  
            {% block stylesheets %}{% endblock %}
    
            {% block javascripts %}{% endblock %}
        </head>
        <body>
    
        <!-- getbootstrap JS link  -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
            {% block body %}{% endblock %}
        </body>
    </html>

test.html.twig


    {% extends 'base.html.twig' %}  
    
    {% block title %} Testign Symfony {% endblock %}
    
    {% block body %} 
    <h1> 
    Test
    </h1>
     {% endblock %}

Upvotes: 0

Views: 992

Answers (1)

Arleigh Hix
Arleigh Hix

Reputation: 10877

You have the url for the demo page href="https://bootswatch.com/solar/" not the css file.
The bootswatch help page says:

You can also use the themes via CDN at jsDelivr.

So it looks like you use the following for the latest version of the solar theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/solar/bootstrap.css">

Also the javascript should be after your {% block body %} and you should use only bootstrap.bundle.min.js (single file) OR both popper.min.js and bootstrap.min.js (two files) not all three. I recommend using v4.6.0 to match the bootswatch theme version, which still requires jQuery:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Here is a working snippet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/solar/bootstrap.css">

<h1>test</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Upvotes: 0

Related Questions