New in Symfony 2.6: Bootstrap form theme

Contributed by
Grégoire Pineau
in #10272.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. Bootstrap is so widely used that it has become the de facto standard for frontend development. That's why Symfony 2.6 will include a new form theme designed for Bootstrap 3.

The new form theme comes in two flavors: normal layout and horizontal layout. To apply this new theme to all the forms of your application, use the following configuration:

1
2
3
4
5
# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']

To apply this theme only for some forms, add the following instruction at the top of the Twig template where the form is defined:

1
2
{% form_theme form 'bootstrap_3_layout.html.twig' %}
{# {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' %} #}

The new theme defines styles for all types of form controls, as shown in the following image:

Symfony Bootstrap Form Theme

As you probably guessed, this new feature is part of the Symfony DX initiative. We believe that having a built-in Bootstrap theme will save you lots of hours of tedious and repetitive work.

Although this pull request just adds two tiny Twig templates, it took eight months to get merged. In fact, this was the most commented pull request in Symfony's history (196 comments at the time of writing this post) and provoked some lively discussions between proponents and opponents of it.

Comments

Great news i'll love this feature !
Will there one for ui-kit too for example?
I'am waiting for that since i know this framework..
@Iltar we discussed a lot about this issue in the related pull request. Being "a frontend framework" is not the same as "being as relevant as Bootstrap".

We'll add a UI-Kit theme when that project achieves the same number of stars on GitHub as Bootstrap. Right now: Bootstrap = 72,509 GitHub stars and UI-Kit = 3,489 stars.
Wow that's fantastic and it's funny to read the story about all the comments around this PR ;) Well done guys, keep "pushing" :P
finally! great news and good job!
i know that i'm late to the party, but wouldn't it make more sense to put this into symfony-standard rather then into core?
@gondo: nope because it will not be available in silex (and other projects without the symfony-standard)
So stars show how populair something is? What's the required amount of stars for something to be put in core? Using bootstraps stars is not fair, as it has the most stars on GitHub.

Foundation has 18.2K stars, is that enough?

Jquery, 32K stars. Time to remove Sfjs and use jQuery instead?

Html5 boilerplate, 27K stars.
@WouterJ the thing that I'm not able to explain is that using Bootstrap is almost as standard as using pure HTML code. That's why Bootstrap is special and that's why it's the only framework included.

Answering your questions:

> Foundation has 18.2K stars, is that enough?

No, it's not enough. Bootstrap has more than 80,000 stars (72,515 for the LESS version and 7,493 for the SASS version)

> Jquery, 32K stars. Time to remove Sfjs and use jQuery instead?

I wish they would consider that. jQuery is the exact same case as Bootstrap. It's not just popular, it's the standard.

> Html5 boilerplate, 27K stars.

I think it's irrelevant because Symfony includes just a few HTML pages.
Nice. We can finally remove a bunch of our questionable block customizations.
You are doing a great job with the Symfony DX initiative!! Keep adding cool features :)
At first I was wondering the same thing, is symfony core a good place to put this, because many people do not use bootstrap or use some other framework. However I think it is great. Every single project I have to copy and paste my own templates, so having it built in is going to be a lot better.
I think adding in jQuery would also be a good idea as it is just as popular (if not more so) than bootstrap.
Finally! Great news ;)
Cool! With this feature life will be much simpler:D
Awesome !
Really, it is very useful ..
Very Helpful !

Thanx a lot !
Great news, good job!
Great job!

Could be nice to have an implement for menu and pager, like mopa-bootstrap does.

Thanks.
Just a newbie question: that means that the bundles that integrates bootstrap are obsolete now ? Or can (must?) they be still used ?

Thanks
where is the doc?
@oswaldo, they're not obsolete (unless they are obsolete for other reasons). this is just a default bootstrap template for forms.
Just to expand on what I said above, this just means the html elements of forms rendered by the Symfony Forms component will be given classes from with Twitter Bootstrap. It's still up to you to include the Bootstrap CSS and Javascript on your page.

Comments are closed.

To ensure that comments stay relevant, they are closed for old posts.