Not able to apply allignment for Controls in MVC Razor view using Bootstrap 3

Question

Problem Statement:

In one of my edit view I want make textbox as disabled, so for this i'm using DisplayFor instead of TextboxFor. But when I use Displayfor, alignment is not coming properly. You can see images attached for your reference. I'm using Bootstrap CSS 3.0

Any help would be appreciated. What inline CSS I should use to align properly??

Image1: In this image you can see that Acquire Status ID label and Textboxfor properly aligned.

Image2: When I use DisplayFor instead of Textboxfor, Acquire Status ID label and Displayfor are not aligned properly.

View:

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

        <div class="form-group">
            @Html.LabelFor(model => model.AcquirestatusID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DisplayFor(model => model.AcquirestatusID,new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.AcquirestatusID)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>

Answer 1

I solved my problem using readonly attribute to my Textboxfor.

 @Html.TextBoxFor(model => model.AccessoriesID,new { @class = "form-control",@readonly="readonly" })

After applying above line of code my edit view looks:

Answer 2

It might be happening due to the style.css which is by default in your project.

Remove style.css from the project

Note: you might only need some of the validation classes inside it

Answer 3

I agree with csoueidi , check with developer tools on IE or inspect element on chrome to see which css is loading the styles for that textbox.

Answer 4

If you want to line up the text and not use a textbox, use the class "form-control-static"

<div class="col-md-10 form-control-static">@Html.DisplayTextFor(model => model.AcquirestatusID)</div>