Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 not working in Symfony3

I've just started to learn Symfony3, and I'm trying to theme my form using bootstrap3. According to the documentation, bootstrap_3_layout.html.twig is built-in and can be activated globally by altering the Twig settings in config.yml:

# Twig Configuration
twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    form_themes: 
        - "bootstrap_3_layout.html.twig"

When I reload the page, the page loads without CSS, the twig file and page source are as follows:

{# app/Resources/views/experiment/new.html.twig #}

{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}


<form name="form" method="post">
<div id="form"><div class="form-group"><label class="control-label required" for="form_title">Title</label><input type="text" id="form_title" name="form[title]" required="required" class="form-control" /></div><div class="form-group"><button type="submit" id="form_save" name="form[save]" class="btn-default btn">Create Task</button></div><input type="hidden" id="form__token" name="form[_token]" class="form-control" value="O7tN2AUjyLByEz2tkNf675jqixxjev0p4ivzs5Bn4VA" /></div>
</form>

Which shows the bootstrap3 classes have been injected correctly. The site itself looks like this:

enter image description here

What step(s) have I missed to get the CSS to work correctly?

like image 862
Darkstarone Avatar asked Dec 09 '15 07:12

Darkstarone


2 Answers

You still have to add the bootstrap files, CSS and JS, to your application and templates. The form theme only ensures that the markup is well formed according to bootstrap.

like image 173
Joshua Avatar answered Sep 29 '22 22:09

Joshua


As an alternativ way you could include the bundle

https://github.com/phiamo/MopaBootstrapBundle

Into your Project and get the Bootstrap files (sass/less) Into your Project.

Documentation on Installation is also available on that Page. I'm using an self written integration that uses quite similar methods to.

Advantage is, that you can include custom sass into your project and compile into one single css file that you include in the template header.

like image 45
Chris West Avatar answered Sep 30 '22 00:09

Chris West