TwitterBootstrapMVC

Development for ASP.NET MVC with Bootstrap made simple.

TwitterBootstrapMVC is a library of ASP.NET-MVC HTML helpers that make writing Bootstrap related html markup a breeze.

Coding with TwitterBootstrapMVC has many benefits:

  • Less time coding and fewer lines of code needed
  • Code is cleaner and easier to read
  • You get intelli-sense
  • Ability to customize inputs and controls using fluent syntax (chaining)
  • Never worry about applying Bootstrap css classes
  • Easy switch from version 2.3.2 to 3.0.0 of Bootstrap
  • Advanced HTML helpers to produce complex inputs

Consider a simple login form:

Html required by Bootstrap and ASP.NET MVC:
<form action="/" class="form-horizontal" method="post">
  <div class="form-group">
    <label class="control-label col-sm-3 col-md-2" for="Email">
      Email
      <span class="required">*</span>
    </label>
    <div class="col-sm-9 col-md-10">
      <input class="form-control" id="Email" name="Email" type="text" value="">
      <span class="help-inline">
        <span class="field-validation-valid" data-valmsg-for="Email"></span>
      </span>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-3 col-md-2" for="Password">
      Password
      <span class="required">*</span>
    </label>
    <div class="col-sm-9 col-md-10">
      <input class="form-control" id="Password" name="Password" type="text" value="">
      <span class="help-inline">
        <span class="field-validation-valid" data-valmsg-for="Password"></span>
      </span>
    </div>
  </div>
  <div class="form-group">
    <div class="control-label col-sm-3 col-md-2"></div>
    <div class="col-sm-9 col-md-10">
      <div class="checkbox">
        <label for="RememberMe">
          <input id="RememberMe" name="RememberMe" type="checkbox" value="true">
          <input name="RememberMe" type="hidden" value="false">
          Remember Me
          <span class="required">*</span>
          <span class="help-inline">
            <span class="field-validation-valid" data-valmsg-for="RememberMe"></span>
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <span class="control-label col-sm-3 col-md-2"></span>
    <div class="col-sm-9 col-md-10">
      <button class="btn-default  btn" type="submit">Submit</button>
    </div>
  </div>
</form>
With TwitterBootstrapMVC:
@using (var f = Html.Bootstrap().Begin(new Form().LabelWidthMd(2).LabelWidthSm(3)))
{
    @f.FormGroup().TextBoxFor(m => m.Email)
    @f.FormGroup().TextBoxFor(m => m.Password)
    @f.FormGroup().CheckBoxFor(m => m.RememberMe)
    @f.FormGroup().CustomControls(Html.Bootstrap().SubmitButton())
}

The example above demonstrates a couple of things:

  • To create html markup for a single labeled input you need just 1 line of code instead of 12 or more.
  • Form groups could be either a simple textbox, dropdownlist, checkbox... or a custom combination of any html markup (in this case a single submit button).
  • If you need to apply classes for device-specific sizes (col-md-*, col-sm-*, ...), you do not need to specify them on each input. Instead, specify them once via extension methods on Form class.


See Installation Information

Read through Bootstrap 3 Documentation or Bootstrap 2 Documentation to familiarize yourself with the capabilities of TwitterBootstrapMVC.

Check out Plug-ins that you can use to get access to even more capabilities.