CODEWITHSUNDEEP
c#asp.net-mvctwitter-bootstraprazor
Bohn
Bohn

Reputation: 26919

Combining Bootsrap controls with Razor HTML helpers

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?

Upvotes: 1

Views: 503

Answers (2)

Grizzly
Grizzly

Reputation: 5943

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

Upvotes: 2

Josh
Josh

Reputation: 44906

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" })

Upvotes: 2

Related Questions