CODEWITHSUNDEEP
twitter-bootstrapasp.net-mvc-4
user2146538
user2146538

Reputation: 344

Bootstrapping an MVC application

I have gone through a basic tutorial to get bootstrap working in a simple html page and all works great. I went to http://getbootstrap.com/customize/ and downloaded the files and created a js, fonts and css folder with the correct files placed in my root directory. Once I had everything working I decided to create an MVC version so I created a Basic MVC4 application and added the same folders and contents to my Visual Studio solution. I took some of the html content like the header and footer and put those into the _Layout.cshtml file and ran the application and everything looks great.

Next I decided to create a simple example from the Bootstrap examples page so I added the following to my Index.cshtml page

@using BootstrapTest.Models

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@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())
}

When I run the application I get the following error: System.Web.Mvc.HtmlHelper does not contain a definition for Bootstrap. I am not sure how to resolve this issue. Is there a directive I need to add to the top of the page or in the web.config?

Upvotes: 0

Views: 824

Answers (1)

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

This HTML helpers you are trying to use to write inputs are not from Bootstrap.

They are from TwitterBootstrapMVC library, a .NET library that makes easy to write a clean HTML with bootstrap.

If you are trying to use common Bootstrap without this library, you will have to write HTML tags like this:

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

Upvotes: 1

Related Questions