Bootstrap input width using form-inline

Question

Bootstrap input width using form-inline

Navigation

#1 by (5 votes)
#2 by (-1 votes)

4

I have a% bootstrap%, how do I control the input of input without losing responsiveness?

<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 form-inline in the input and it works, it increases the size of the field, but it loses responsiveness, I already tried to put style="width: 300px" inside a <div class="form-group"> tag, therefore <div class="col-sm-5"> that is, it just does not work on form-horizontal

In short, I want exactly the functionality of a form-inline , the only problem is that I can not control the form inline of inputs without losing responsiveness.

twitter-bootstrap bootstrap-3

asked by anonymous 11.06.2015 / 04:22

2 answers

-1

You can use percentage instead of pixels.

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

11.06.2015 / 05:35

Calculate age by day, month and year How to change the font color of the application title

score 5 · Accepted Answer

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

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

or by implementing it directly in HTML:

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

Here you have an online example in jsFiddle: link

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