Using Bootstrap 3 form theme in symfony2 does nothing

Question

I'm trying to use Bootstrap3 form theme in my Symfony2 forms as described here:
http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme

I'm adding this in main config:

twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']

And adding this in every form:

{% form_theme form 'bootstrap_3_layout.html.twig' %}

classes are applied to html elements but no theme is applied.
I checked page source and found no bootstrap.css (Should I include it by myself? )
I included bootsrap but still I had a very bad and messy full width textboxes and nothing else got affected! My symfony is 2.6.4 (upgraded from 2.5.10)
What is the problem?

if you're using a theme (or making your own) you have to include css in the base file. — Samia Ruponti
– Samia Ruponti, Commented Oct 10, 2015 at 15:39
As @SamiaRuponti said, you need to import the css and js files on your own. However, you don't need to set form_theme on your forms if you have already defined the resource in your config.yml. — tftd
– tftd, Commented Oct 10, 2015 at 23:26
@tftd - one of you needs to turn one of those comments into an answer ... with a little elaboration of course. — Ragdata
– Ragdata, Commented Oct 10, 2015 at 23:35

tftd · Accepted Answer · 2015-10-10 23:48:23Z

With Symfony >= 2.6 a bootstrap form theme is already available as part of the framework and you don't need to do anything more than set the resource in your config.yml:

twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']

You don't need to define {% form_theme %} in your templates because the form template/theme is already available. What you need to do is to include the bootstrap css/js files in your app/Resources/views/base.html.twig (or whatever your base template is).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Then you just extend this base template in your other view templates and everything should be working fine. For example:

// App\MyBundle\Resources\views\homepage.html.twig
{% extends '::base.html.twig' %}

{% block content %}
    // your html/forms/etc goes here; this content will then be rendered with the base.html.twig file as part of the "content" block in base.html.twig.
{% endblock %}

For more information you should read the documentation.

Collectives™ on Stack Overflow

Using Bootstrap 3 form theme in symfony2 does nothing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related