Views: 2739
Number of votes: 3
Average rating:

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\\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

Aria Zanganeh
( By Aria Zanganeh, 10/19/2016 2:04:19 AM)

Good article .. the other good thing I found is in episerver form configuration we can turn off BEM style using injectFormOwnStylesheet:

And then load our own css which inherits from bootstrap:

With this you make sure you always get latest ASCX on nuget upgrade. 

( By KennyG, 10/19/2016 2:11:30 AM)

Aria, thanks for the info!

( By valdis, 10/19/2016 1:36:23 PM)

Also, if you want to apply DisplayOptions for the elements, can use this trick.

Aria Zanganeh
( By Aria Zanganeh, 10/19/2016 9:38:18 PM)

Wow Valdis that is great. 

Please login to comment.