Make Episerver Forms a Little More Bootstrap Friendly
You may have noticed that the way the Episerver Forms package renders form elements that it isn’t really bootstrap friendly. Well there is a way to fix that.
Dig down into \modules\_protected\EPiServer.Forms\EPiServer.Forms.zip\Views\ElementBlocks\ and copy those ascx files into \Views\Shared\ElementBlocks.
Then you can tweak each template.
A couple of examples:
- On TextboxElementBlock.ascx add “form-group” to the class attribute on the outer DIV and add “form-control” to the class attribute for the input tag.
- On SubmitButtonElementBlock.ascx add “btn” to the class attribute.
Your form should now pickup bootstrap’s form styles.
Oct 19, 2016
Good article .. the other good thing I found is in episerver form configuration we can turn off BEM style using injectFormOwnStylesheet:
http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/forms/configuring-episerver-forms/
And then load our own css which inherits from bootstrap:
http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/forms/load-additional-resources-after-form-rendering-using-iviewmodeexternalresources/
With this you make sure you always get latest ASCX on nuget upgrade.
Aria, thanks for the info!
Also, if you want to apply DisplayOptions for the elements, can use this trick.
Wow Valdis that is great.