Skip to main content

Using Bootstrap with MVC Views

I’m a lazy developer by nature. That means I don’t like to do extra work when it isn’t necessary. Therefore, I am a big fan of MVC’s HTML helpers. One of my favorites is Html.EditorForModel().

In case you haven’t heard about it, Bootstrap is a newish set of CSS and JavaScript from Twitter that makes designing responsive web sites pretty easy. The CSS has a modern and clean look, and pages based on it scale very well, even on mobile devices.

The problem I ran into is that Bootstrap expects form elements (labels, inputs, etc.) to have specific classes so that it knows how to display them properly. But the EditorForModel helper doesn’t know about Bootstrap. Thus, I needed to find a way to substitute the default classes for Bootstrap’s.

The first thing I tried was to use jQuery to change the classes dynamically.


It worked, but I didn’t like having to rely on JavaScript for this. Short of rewriting all of the editing views and abandoning Html.EditorForModel, I thought that there must be a way to customize how the helper generates its HTML.

I found the solution at an older blog post by Brad Wilson. He describes how to override the default template used by EditorForModel to generate a table layout for the form fields.
Once I got that code, it was a simple matter of changing the HTML to include the form classes used by Bootstrap. The example uses ASP.NET syntax. I’m using Razor, so I had to make some minor modifications. The complete class is shown here.


This is really just the default template with the classes changed to the ones used by Bootstrap:

  • control-group
  • control-label
  • controls
  • help-inline

There are obviously a lot more things that could be added to this, but this should be enough to get you started.

As is typical for me, I spent a lot of time working so that I could be lazy. In the end, however, I’m happy with this solution. I didn’t have to make any changes to my Views, and it keeps my code nice and DRY.


Popular posts from this blog

How to copy your Frozen Free Fall progress to a new phone

It's happened to all of us. You are about to get a branch new smartphone, when it hits you. You're on level 250 of Frozen Free Fall. If you get a new phone, you'll lose all of that progress! Ok, admittedly this isn't the most pressing problem of our time, but it's annoying. So today I decided to do something about it.

I have a Samsung Galaxy S4 (Android), and just received an iPhone 5c. Before you bash me on my phone choice, let me explain that the iPhone is provided by my employer at no cost to me. Now you may proceed to bash me for putting games on my work phone. 
First step: Frozen Free Fall had already been installed on both devices. Next, using the Astro File Manager on my Galaxy, I searched and found the Frozen game save stored in /storage/sdcard0/Android/data/com.disney.frozensaga_goo/files/user.dat. I imagine it will be in the same location on any Android phone. If not, just look for user.dat in a folder with a similar name. So, using a USB cable and the A… Review: Get Free Images for Your Web Site or Application

I have a new favorite site this week. The other day I was looking for a picture of a swimming pool for a mobile app I'm writing (more on that later). Much to my excitement, I stumbled upon an online image catalog called Pixabay. This site claims to have over 360,000 images that can be used free of charge. Their terms of service indicate that every image is bound to the CC0 Public Domain license, which puts them into the public domain, and thus can be used for any legal purpose.

The site is attractive and easy to use. I typed "swimming pool" into the search box and was quickly rewarded with more than 450 images to review.

Pixabay offers three different types of images: photos, vector graphics, and illustrations. You can choose a single image type or all. I changed my search to include only photos, which reduced my search results to 414. Obviously most of their images of swimming pools are photographs.

There are more search options available. You can search by portrait or…

Windows 10/Server 2016 100% Disk on BootCamp and Parallels!

I've been wrestling with Windows on my 2014 Mac Mini for more than two years. Soon after I bought the Mac, I made a 200GB BootCamp partition and installed Windows 7. I also bought Parallels 10 Desktop and pointed it at the BootCamp partition. It was great. I had a convenient VM when I needed something quick. I also had BootCamp when I needed native performance. Not long after that, I upgraded it to 8.1. Then sometime later, Windows 10.

I don't remember exactly when it happened, but one day I fired up Parallels and my entire system ground to a halt. Shutting down the virtual machine caused everything to go back to normal, so I figured the problem was with Parallels. So I upgraded it. Same problem. I made sure Windows was up-to-date, thinking that maybe the Windows Update service was going nuts. Nothing changed. Whenever Windows was running in Parallels, the Task Manager showed the disk activity pegged at 100%.

I tried all sorts of online solutions, but none worked. On a whim, I…