Bootstrap input width using form-inline

Asked

Viewed 24,209 times

4

I have a form-inline in bootstrap, as I control the width of input without losing responsiveness?

Example w3schools form-inline bootstrap

<form class="form-inline" role="form">
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
  <label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>

I’ve already tried style="width: 300px" in input and works, increases the size of the field, but loses responsiveness, I have tried to put the <div class="form-group"> within a tag <div class="col-sm-5">, for in that way a form-horizontal works, IE, just does not work in the form-inline

In short, I want exactly the functionality of a form inline , the only problem is I can’t control the width inputs without losing responsiveness.

twitter-bootstrap bootstrap-3

  • I’m not sure I quite understand your question, but from what I understand what you want to do here is give one width:300px; to input - <input class="form-control" /> to be your initial size, but at the same time not lose your responsiveness is this?

  • That though I know if I specify the width:300px; I know you lose responsiveness, I mean, the right thing to do would be to specify the size of the column, but that doesn’t work when you use the form-inline

  • 1

    Puts the form within a <div class="row"> </div> and then put a <div class="col-md-4"></div> outside the inputs (including the button). Replace 4 with the size you want, remembering that the sum has to give 12.

2 answers

7


Simple, you can do this using the property min-width in your CSS:

.form-control{min-width:300px;}

or by implementing it directly into HTML:

<input type="email" class="form-control" id="email" style="min-width:300px;" placeholder="Enter email">

Here’s an online jsFiddle example: http://jsfiddle.net/74sgvd5h/

The estate min-width is used to set the minimum width of an element. This prevents the value width become smaller than the minimum width - min-width.
You can read more about this property at CSS min-width Property - w3schools.

  • It worked! That’s exactly what I wanted! Thanks Chun

  • You’re welcome @Rodrigorodrigues , always at your service! ;)

-2

You can use percentage instead of pixels.

Ex: style="min-width:50%;"

  • 1º - Why or how do I use Percentage instead of Pixels would solve the problem? 2º - This is basically a copy of my answer just using percentage instead of pixels. Unless you wanted to post this as a comment in my reply and not as a new one, this reply does not make much sense. At least the part that is not code.

Browser other questions tagged twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.