CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
J.Olufsen
J.Olufsen

Reputation: 13915

How to make input extend to width of column in Bootstrap 3?

I need my 2 inputs which placed inline to have width of parent div which defines col-md-6 and col-md-3. Right now inputs are aligned correctly but have width which in one case less than col-md-6 and in second case more than col-md-3. How to make this inputs have width col-md-6 and col-md-3 correspondingly?

<div class="col-md-9">
    <form action="" role="form" class="form-inline">
        <div class="col-md-6">
            <div class="form-group">
                <label for="iR" class="sr-only">i R</label>
                <input type="text" class="form-control" id="iR" placeholder="some mid long explanation" />
            </div>
        </div>
<div class="col-md-3">
            <div class="form-group">
                <label for="iS" class="sr-only">i S</label>
                <input type="text" class="form-control" id="iS" placeholder="some mid long explanation 2" />
            </div>
        </div>
</div>

Upvotes: 1

Views: 6298

Answers (2)

esvendsen
esvendsen

Reputation: 1500

As others have mentioned, you need to specify custom widths with inline forms. From the docs:

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

In your case, you need to specify width: 100% for both the input and the form-group:

<div class="form-group" style="width: 100%">

and

<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />

Working example in JSFiddle

Upvotes: 3

Blkc
Blkc

Reputation: 612

Just put style="width: 100%;" on the input; Btw, you are missing a form closing tag.

Also if you look at bootstraps for any elements you set up most of the time they leave a bit of margins. So if you don't want any margins just change the margins to 0.

Upvotes: 0

Related Questions