bootstrap 4 - Unable to load bootswatch theme in twig template in symfony

Question

Welcome To Ask or Share your Answers For Others

bootstrap 4 - Unable to load bootswatch theme in twig template in symfony

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

bootstrap 4 - 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/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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 %}

question from:https://stackoverflow.com/questions/65842938/unable-to-load-bootswatch-theme-in-twig-template-in-symfony

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:31:28+0000

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/bootswatch@4.6.0/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/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

Here is a working snippet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.6.0/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/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

Categories

bootstrap 4 - Unable to load bootswatch theme in twig template in symfony

bootstrap 4 - Unable to load bootswatch theme in twig template in symfony

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags