How can I use Bootstrap button buttons in my MVC view

Question

I find it difficult to get Bootstrap extra buttons to work in my MVC view. I am using the latest version of NuGet ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).

I have the following in my opinion (now that I fixed it only with manual encoding code and not with Html.EditorFor() , trying to make it work):

 @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> @Html.ValidationSummary(true) <div class="row"> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="col-lg-6"> &nbsp; </div> </div> 

This generates the following HTML:

 <form action="xxx" method="post"> <input name="__RequestVerificationToken" type="hidden" value="T3k..." /> <div class="form-horizontal"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="col-lg-6"> &nbsp; </div> </div> </div> </form> 

The problem is that when this is displayed in the browser (Chrome 32 / IE 11), there is a big gap between the input field and the button. For example:

If I reduce the size of the div surrounding the input-group div by col-lg-3 or less, that will be fine. But something more than that leaves a gap.

As if there is a maximum size on input - and indeed, all my inputs seem smaller than their container div ...

What could be the reason for this?

Answer 1

The standard Site.css , which comes with the new MVC 5 project, has a rule that limits the maximum input width. What you get is the result of a control covering the entire available width as intended, but then the input itself is limited to a certain width. Just comment out this part of the stylesheet and everything will work as it should.

 /* Set width on the form input elements since they're 100% wide by default */ input, select, textarea { max-width: 280px; } 

This is a pretty egregious shortcut that the team seems to have taken to quickly create a sample site.