CODEWITHSUNDEEP
csstwitter-bootstrap
Karra
Karra

Reputation: 669

Bootstrap 3 inline-form with different widths for input boxes

I have some bootstrap 3.0 based markup that produces an inline form like this: What I have now

The code for this is:

<div class="container">
  <form class="form-inline" role="form" id="gh_save">
        <div class="form-group">
            <input type="text" placeholder="Github username" class="form-control" id="gh_user">
        </div>
        <div class="form-group">
            <div class="col-lg-6">
            <input type="text" placeholder="API Key" class="form-control" id="gh_apikey">
            </div>
        </div>
        <button type="submit" class="btn btn-success"> Save </button>
    </form>

I am trying to increase the width of the second box (API Key) to be twice what it is now, but no matter what I change the width of the div holding the second input is changing the width. Can someone show me how this done?

when I manually set the width of the second INPUT, I get this: enter image description here

Upvotes: 0

Views: 967

Answers (2)

4dgaurav
4dgaurav

Reputation: 11506

<form class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-4">
            <input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
        </div>
        <div class="col-xs-6">
            <input type="text" placeholder="API Key" class="form-control" id="gh_apikey" />
        </div>
        <div class="col-xs-2">
            <button type="submit" class="btn btn-success"> Save </button>
        </div>
    </div>
</form>

DEMO

PS : close input tags as <input class="" />

Final edit here, I guess external bootstrap 3.1.1 was not getting included thus you got the result in 3 different lines, take a look at this

Final Demo

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="container">
  <form class="form-inline" role="form" id="gh_save">
        <div class="form-group">
            <div class="col-xs-4">
              <input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-6">
                <input type="text" placeholder="API Key" class="form-control" id="gh_apikey"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-2">
                <button type="submit" class="btn btn-success"> Save </button>
            </div>
       </div>
   </form>
</div>

Upvotes: 2

MarioD
MarioD

Reputation: 1703

You should be able to target your ID within your css and set your desired width like so:

#gh_apikey{width:400px;}

Upvotes: 0

Related Questions