CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
John S
John S

Reputation: 8349

How to control form field widths in Bootstrap?

Given the code below I am trying to figure out the correct way to display the form fields wider then they do. i.e. The first two rows display roughly two bootstrap columns wide but I would expect the third row to display at the full width. 

<div class="well">
<div class="row">
    <div class="col-xs-4">
        @Html.LabelFor(m => m.To)
        @Html.EditorFor(m => m.To)
    </div>
</div>
<br />
<div class="row">
    <div class="col-xs-4">
        @Html.LabelFor(m => m.Subject)
        @Html.EditorFor(m => m.Subject)
    </div>
</div>
<div class="row">
    <div class="col-md-10">
        @Html.LabelFor(m => m.Body)
        @Html.EditorFor(m => m.Body)
    </div>
</div>

******* Update ******** Changed one of the fields to this

  <div class="row">
    <div class="col-md-12">
        @Html.TextBoxFor(m => m.Body, new { @class = "form-control", placeholder = "Body" })
    </div>
</div>

Upvotes: 0

Views: 234

Answers (1)

DavidG
DavidG

Reputation: 119186

You need to apply the form-control class to your inputs as this sets the input width to be 100% which means they will completely fill the column. Unfortunately EditorFor doesn't let you do that. However, TextBoxFor does:

@Html.TextBoxFor(m => m.To, new { @class = "form-control" })

Upvotes: 2

Related Questions