CODEWITHSUNDEEP
phphtmlcsstwitter-bootstrapsymfony
Ariyan
Ariyan

Reputation: 15168

Using Bootstrap 3 form theme in symfony2 does nothing

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?

Upvotes: 0

Views: 2731

Answers (1)

tftd
tftd

Reputation: 17062

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.

Upvotes: 3

Related Questions