Skip to content
Bootstrap is great MVC5 is great lets combine the two together.
PowerShell C# JavaScript Other
Latest commit daf8615 Jul 16, 2014 @JellyMaster Update


So what is this?

This is a simple project that provides an alternative replace to the the default MVC validation summary html helper.

I was not happy with it's lack of styling and customization in the modern world and as a big fan of using Twitter's Bootstrap framework I wanted something more in keeping with it.

In addition I missed some of the controls that I had from webforms and included a simple visual "required fields indicator"

With that in mind here is my little pet project which replaces the default control and gives you the flexibility to show errors in a number of ways.

Before you start

Ensure you have bootstrap version 3 and jquery setup within your project before you use this. Also make sure that you have jquery loaded on the page before this is called. Due to using JQuery a lot in this control a javascript error will fire up if it is loaded at the bottom. This is scheduled as part of an update in the future to pull out all the javascript into a separate file and get this called in.

How to get it working?

Well it's pretty simple:

Step 1) Download the source code from here or install from nuget (search for BootstrapMvc via nuget)

  Install-Package BootstrapMvc 

Step 2) Add the following declaration to your views\webconfig file under pages: (Version has a webconfig transform for this but if you are using areas you will need add this change manually)

<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
  ..... //removed for brevity
 <add namespace="BootstrapMvc.HtmlHelpers"/>

Step 3) Go to the view you want to add this too and simply add:


This adds the default Alert panel mode like this:

Alert Model(Default Mode)

Step 4) Leave as is or customise.

Samples of the various modes available currently:

Sample Showing all main modes

Sample Showing modal mode with required field indicators on

How to use it?

For full details go to the project wiki below:

To customise the summary panel we pass in a new BootstrapValidationSummaryOptions() object.

This allows you to pass in the various settings to enable/disable features as well as change the styling of the summary panel.

public BootstrapValidationSummaryOptions(
 ErrorMode mode = ErrorMode.Alert,
 bool showModelErrors = true,
 string title = "Oops! There seems to be a problem.",
 string introductionBlock = "There seems to have been a problem with your request. See below: ",
 bool enableRequiredFieldIndicators = false,
 bool enableRequiredFieldHelp = false,
 AlertStyleSettings alertStyleSettings = null,
 PanelStyleSettings panelStyleSettings = null,
 ModalStyleSettings modalStyleSettings = null)
     DisplayMode = mode;
     ShowModelErrors = showModelErrors;
     Title = title;
     IntroductionBlock = introductionBlock;
     EnableRequiredFieldIndicators = enableRequiredFieldIndicators;
     EnableRequiredFieldHelp = enableRequiredFieldHelp;
     AlertDisplaySettings = (alertStyleSettings == null) ? new AlertStyleSettings() : alertStyleSettings;
     PanelDisplaySettings = (panelStyleSettings == null) ? new PanelStyleSettings() : panelStyleSettings;
     ModalDisplaySettings = (modalStyleSettings == null) ? new ModalStyleSettings() : modalStyleSettings;
  • DisplayMode mode: this is an enum and can be put in ErrorMode.Alert, ErrorMode.ClosableAlert, ErrorMode.Panel, ErrorMode.CollapsablePanel, ErrorMode.Modal
  • bool showModelErrors: turns on or off model errors
  • string title: The text displayed at the top of the summary panel
  • string introductionBlock: Some text introducing the errors to the user
  • bool enableRequiredFieldIndicators: Turns on/off highlighting fields that are set as required
  • bool enableRequiredFieldHelp: Turns on/off the required field text help section
  • AlertStyleSettings alertStyleSettings: Sets the css classes for the Alert panel styling
  • PanelStyleSettings panelStyleSettings: Sets the css classes for the Panel Alert styling
  • ModalStyleSettings modalStyleSettings: Sets the css classes for the Modal Alert styling

For further details check the wiki.

So what's next?

Well a feature I am still looking at is unobtrusive support and this is something that will hopefully give you the same level of customization as this control. It also gives me the perfect chance to pull out all the jquery that I have stuffed in the helper and maintain it in a more sensible way.

Thanks for taking the time to have a look at this project and if you have any suggestions on improvements/bugs feel free to let me know.

Something went wrong with that request. Please try again.