CODEWITHSUNDEEP
c#htmlcsstwitter-bootstrapmodel-view-controller
Greyhammer
Greyhammer

Reputation: 183

Correct way to display a MVC Form using bootstrap

I am using a form to capture various items from users, but I cant seem to get them to display the way I want.

I'm using bootstrap to have 2 columns of text boxes and their associated labels.
Unfortunately when it get to the last EditorFor, it displays out of line with the rest.
Am I using the divs and column options wrong?
Also how would I go about adding some space between the top and bottom of the text boxes?
Using padding in css?

What I'd like is to have the last label start at the left and then the textbox to be in line with it and take up the rest of the space in that column, maybe add a little space in between the rows.

Here is the code in my View

@model iskbv5.Models.Vendor

@{
    ViewBag.Title = "Add New Vendor";
}

<h2>@ViewBag.Title</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <hr />
    <div class="form-group">
        <div class="control-label col-md-2">
            Vendor Name
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-2">
            Vendor Website
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.Website, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-2">
            Vendor Address
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-2">
            Vendor Username
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control " } })
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-2">
            User Managing the Vendor
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.ManagingUser, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-2">
            Vendor Password
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group">
        <div class="control-label col-md-2">
            Reason We Use the Vendor
        </div>
        <div class="col-md-4">
            @Html.EditorFor(model => model.Usage, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
        <div class="col-md-12">
            <input type="submit" value="Create" class="btn btn-xs btn-primary" /> or
            <a href="@Url.Action("Index")" class="btn btn-xs btn-default">Cancel</a>
        </div>
        }

I have the Usage property set to 

[DataType(DataType.MultilineText)]
public string Usage { get; set; }

This is how it currently displays.

Upvotes: 1

Views: 5845

Answers (1)

Greyhammer
Greyhammer

Reputation: 183

Ahh, after making a few adjustments, and adding a <br/> in between each "row", I got the desired look. Thanks. enter image description here

Upvotes: 1

Related Questions