Put bootstrap style to a textbox in MVC for a search box

Question

I have a search box that I want to customize with Bootstrap style. The textbox code in the aspx is:

@Html.TextBox("SearchString")

But I get a textbox with a standard style. Otherwise, the button of the searcher is shown with a bootstrap style with this code:

<button class="btn" type="submit">Buscar</button>

So I have the reference of the bootstrap library in my project. What is the best approach to get the textbox with the correct style?

Thank you in advanced.

adding that class to your helper should then work for you. see here http://stackoverflow.com/questions/5435842/using-html-textboxfor-with-class-and-custom-property-mvc — Matt Bodily, Apr 09 '15 at 17:40
I'm using Razor code: @Html.TextBox("SearchString") How can I apply bootstrap style in this case? — Levimatt, Apr 10 '15 at 08:42
if you follow the link I included it shows you how to add classes to helpers — Matt Bodily, Apr 10 '15 at 15:42

score 6 · Accepted Answer · answered Apr 10 '15 at 15:16

You can add a class or id to your Html helpers by passing an anonymous object to the htmlAttributes property in the helper constructor like this.

@Html.TextBox("txtBox", null, new { @class = "your class name here", id = "your id name here" })

In Bootstrap you may want to use the classes form-group and form-control. More information in the docs http://getbootstrap.com/css/

Dawood Awan · Answer 2 · 2015-04-10T15:29:06.060

You could do it like this:

@Html.TextBox("SearchString", null, new {@class="form-control"})

If you want to append the button to your textbox?

 <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
</div>

http://getbootstrap.com/components/#input-groups-buttons

You replace your <input> with @Html.TextBox("SearchString", null, new {@class="form-control"})

 <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      @Html.TextBox("SearchString", null, new {@class="form-control"})
</div>

WITH HTML Helper:

If you want a HTML Helper for Bootstrap TextBox your could do something like this:

public static class MyHtmlHelpers
{
    public static MvcHtmlString BootStrapTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> helper, 
         Expression<Func<TModel, TProperty>> expression)
    {
        return helper.TextBoxFor(expression, new { @class = "form-control" });
    }
}

And then use like this:

@Html.BootStrapTextBoxFor(model => model.FirstName)

Put bootstrap style to a textbox in MVC for a search box

2 Answers2