I can't adjust the MVC5 Bootstrap TextAreaFor Width

I'm struggling for hours now to render a notes field to have full width and a few rows on a bootstrap tab. What I want is this:

What I have done so far is looking for solutions/posts but none is working for me. My razor-code is:

<div class="tab-pane" id="notes">
<br />
<div class="row">
    <div class="form-group">
        @Html.LabelFor(model => model.Project.sysNotes, new { @class = "col-md-2 control-label" })
        <div class="col-md-8">
            @Html.TextAreaFor(model => model.Project.sysNotes, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysNotes, "", new { @class = "text-danger" })
        </div>
    </div>
</div>
<div class="row">
    <div class="form-group">
        @Html.LabelFor(model => model.Project.sysUser_Add, new { @class = "col-md-2 control-label" })
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.Project.sysUser_Add, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysUser_Add, "", new { @class = "text-danger" })
        </div>
        @Html.LabelFor(model => model.Project.sysDD_Add, new { @class = "col-md-2 control-label" })
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.Project.sysDD_Add, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysDD_Add, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

I adjusted the css files (bootstrap, bootstrap-sandstone and site) to resp.:

textarea.form-control {
width: 100%;
height: 200px;}

and

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

What can I do???

edit: see also comment below @T_Roy, the new screendump:

Maybe, does the wrongly rendering has to do with the _layout.cshtml?

edit (last time): I accept the answer of T_Roy, the way to go, but what eventually solved my current problem was the add-on (hack) of Laiman. I still see strange behavior in my solution but it works and need to go on now. I will have to refactor however and gain more understanding of how it all works together.

Thank you all!

So taking this a little deeper so that you can understand how this works.

First off, a row element can have up to 12 columns.

Documentation

For example, using what you provided:

<div class="row">
    <div class="form-group">
        @Html.LabelFor(model => model.Project.sysUser_Add, new { @class = "col-md-2 control-label" })
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.Project.sysUser_Add, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysUser_Add, "", new { @class = "text-danger" })
        </div>
        @Html.LabelFor(model => model.Project.sysDD_Add, new { @class = "col-md-2 control-label" })
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.Project.sysDD_Add, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysDD_Add, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

Your labels each have a class named col-md-2 meaning they take up 2 columns in the row.. so since you have 2 labels (model.Project.sysUser_Add, and model.Project.sysDD_Add), you are really taking up 4 columns in the row. So you have 8 columns left before that row is filled to capacity. So your TextBoxFor account for those 8 columns because your TextBoxFor's each are inside a div which have classes named col-md-4. 4 + 4 = 8.

Now taking that logic and applying it to your TextAreaFor.

You have a label which has a class of col-md-2, so you have 10 columns left before that row is filled to capacity. As of now, your TextAreaFor is inside a div that is col-md-8. 8 + 2 = 10. You still have 2 columns to use before that row is filled. So change the div that your TextAreaFor is inside to col-md-10. 10 + 2 = 12. That should adjust your TextAreaFor to use the full-width to match your TextBoxFors.

Here is a working demo.

Let me know if this helps!