CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JGV
JGV

Reputation: 5187

Increase width of textbox inside bootstrap form-inline

I am trying to increase the width of the text boxes inside a form-inline. But, I am not able to increase the width. Even the associated label is getting hidden below the text box.

<div class="row">
  <div class="col-xs-12">
    <form class="form-inline">
      <div class="form-group">
        <label for="UserNameTextBox">Name</label>
        <div class="col-xs-6">
          <input type="text" class="form-control" id="UserNameTextBox" placeholder="User Name">
        </div>        
      </div>
      <div class="form-group">
        <label for="UserEmailTextBox">Email</label>
        <input type="email" class="form-control" id="UserEmailTextBox" placeholder="User Email">
      </div>
      <button type="button" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/2/

Current:

enter image description here

Expected: (length of the text box is increased)

enter image description here

Any suggestion is appreciated.

Upvotes: 1

Views: 1939

Answers (1)

Jad Chahine
Jad Chahine

Reputation: 7149

You can set the width of the text boxes using this CSS code:

.form-inline .form-group input {
    width: 1000px;
}

Update (another solution)

Set label and input display to inline-block as below:

.myform label, .myform input {
  display:inline-block;
}

and set input width to 80% as below:

.myform input {
    width:80%;
}

Give the name container (input+label) 5 boostrap columns col-lg-5 col-md-5 col-xs-5

Give the email container (input+label) 5 boostrap columns col-lg-5 col-md-5 col-xs-5

Give the button 2 boostrap columns col-lg-2 col-md-2 col-xs-2

Output:

enter image description here

Check it out.

Upvotes: 1

Related Questions