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:
What step(s) have I missed to get the CSS to work correctly?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With