Twitter Bootstrap Question posted in

Combining Bootsrap controls with Razor HTML helpers – Twitter bootstrap

My first time ever learning and doing ANY web development, so it might look like an obvious question but my confusion is this:
In my MVC app at first I started using controls from examples of Twitter Bootstrap site so for example a drop down looked all pretty and nice then I learned that I want to use for example @HTML.CheckBoxFor, etc. in my Razor code so used that, now the controls look ugly and just like their plain HTML definition looks.
So my question is how can I keep using @HTML helper for my controls and model binding in Razor while keeping the look and flexibility of their Bootstrap controls?

Tags:

2

Answers


  1. 0

    All of the HTML helpers have an overload that allows you to pass in an object hash that get converted to HTML Attributes.

    You can use that to add classes to your control:

    @Html.CheckBox("Blah", new { @class = "form-control" })
    Login or Signup to reply.
  2. 0

    If your property is of type bool then try this for a checkbox:

    <div class="form-group">
        @Html.LabelFor(model => model.property1, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.property1)
                @Html.ValidationMessageFor(model => model.property1, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    the checkbox class name is from bootstrap

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search