CODEWITHSUNDEEP
asp.netcssasp.net-mvctwitter-bootstrapasp.net-mvc-5
ASPCoder1450
ASPCoder1450

Reputation: 1651

Bootstrap Form Horizontal Alignment Errors

enter image description here

My textboxes aren't aligning with my form properly at all. I'm using Bootstrap within ASP.NET MVC 4. As you can see I'm using the form-horizontal div but im not sure why my elements are appearing all out of line. How do I get the elements to align with the labels?

    <div class="form-horizontal">
    @Html.ValidationSummary(true)

    <div class="form-group">
            @Html.Label("Please enter the Inventory No", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off"})
                @Html.ValidationMessageFor(model => model.Log.InventoryNo)
                <span class="help-block">Inventory No is physically located on the Inventory sticker device on the side of a device.</span>
            </div>
        </div>

    <div class="form-group">
        @Html.Label("Please add any keywords", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250"})
                    @Html.ValidationMessageFor(model => model.Tags)
                    <span class="help-block">Required: Enter the keywords of your fault description. For emample, Printer, Jammed, Paper and etc. </span>
                </div>
            </div>

    <div class="form-group">
            @Html.Label("Please enter a description of the fault", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
                @Html.ValidationMessageFor(model => model.IncidentDescription)
            </div>
        </div>

Upvotes: 2

Views: 2262

Answers (1)

hutchonoid
hutchonoid

Reputation: 33306

First I would add the form-control class to your textboxes and textarea i.e

@Html.TextBoxFor(model => model.Log.InventoryNo, new {maxlength = "10", autocomplete = "off", @class="form-control"})
....
@Html.TextAreaFor(model => model.Tags, new {autocomplete = "off", maxlength = "250", @class="form-control"})

See here for more info on form-control:

http://getbootstrap.com/css/

Secondly you need to add your labels within your column divs like this:

<div class="form-group">
            <div class="col-md-10">
                @Html.Label("Please enter a description of the fault", new { @class = "control-label col-md-2" })
                @Html.TextAreaFor(model => model.IncidentDescription, new {maxlength = "90"})
                @Html.ValidationMessageFor(model => model.IncidentDescription)
            </div>
        </div>

Here is a simple example here:

http://www.bootply.com/128038

Upvotes: 1

Related Questions