Setting the width of Textarea in Bootstrap 3

I was looking for a way to make my "textarea" go 100% inside this column. I saw several different ways (none of which I could work) for the "text area" to expand to 100% in Bootstrap. I have everything from CSS custom styles to using class = "form-control col-lg-12" to overwrite Bootstrap CSS.

Does anyone have a working suggestion that would allow for a redesign of the fluid?

Here is the code I have. Right now, the width goes a little past the placeholder text.

<div class="row">
            <div class="col-lg-7">
                <h2>@Model.EmployeeName</h2>
                <h3>Employee #: @Model.EmployeeNumber</h3>

                <h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
                <textarea rows="2" placeholder="Exception Log comments."></textarea>
            </div>
            <div class="col-lg-5 text-right">
                <div ng-controller='TimeCtrl'>
                    <h2>{{ clock | date:'fullDate'}}</h2>
                    <h1>{{ clock | date:'HH:mm:ss'}}</h1>
                    <input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
                </div>
            </div>
        </div>
+4
source share
5 answers

, bootstrap (form-control) - , , .

<textarea class="form-control"></textarea>
+7

'form-control' textarea. , col-lg-7 col-lg-5 .

. col-sm-12 .

<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
+3

class="form-control" . , , - css max-width , . site.css max-width.

+3

- CSS,

min-width: 100%
max-width: 100%

bootstrap "form-control"

0
source

Just add a class form-controlto yours textareaif you need 100% width on it, there is no need to add a col-lg-12bcoz class form-controlthat gives 100% the width of the parent element.

<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
0
source

All Articles