I've got some problems with sizing and positioning bootstrap input filds.
I've added the css class="form-controle" to the inputs.
and Now it looks like this:
But this is a cloze text to fill in and it should look like this:
It should always be like this: <> input <> input
Any hint how I can get this view with bootstrap?
check this example in bootstrap site
http://getbootstrap.com/css/#forms-inline
Try form-inline - check it on bootstrap's site here.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
Related
I use a bootstrap Template. I use bootstrap modal for register in my website.
for textboxes, I use form-control class but it does not work.
Can anyone help me?
...<div class="modal-body" dir="rtl" style="font-family:BYekan; text-align:center">
<center>
<div class="form-group">
<asp:TextBox ID="txtemail_reg" runat="server" CssClass="form-control" placeholder=" Email Address" Width="300px"></asp:TextBox>
</div> ....
Make sure that you placed class="form-group". For example
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Amount">
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
I checked the css of template. the input tag has some css,I remove those and my problem fixed.
This spacing issue was driving me crazy. I finally figured out that in order to have spaces between the form elements, I need to format my HTML code as shown below.
Could somebody explain what's going on here? Is this some newline issue?
Notes:
I'm using Bootstrap 3 CSS file, no other styling in place
the only difference between the 2 samples below is in how .form-group divs are laid out
1. Form elements with spaces:
<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>
2. Form elements without spaces:
<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div><button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>
Inline elements are sensitive to white space in your code. Since you have divs in your example which are normally block level elements, but they're appearing side by side, your CSS is most likely changing them to display inline. You could also remove the gap by using HTML comments.
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><!--
--><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
According to the Bootstrap docs (http://getbootstrap.com/css/#forms-inline), form-group is used to wrap the form-control so your 2nd approach is better.
Your 1st example is rendering as expected since the Bootstrap CSS sets inline-block and no margin on the form-control itself. You could override this behavior by using margin in the CSS..
.form-inline .form-control {
display: inline-block;
margin-right:4px;
}
Demo: http://bootply.com/86947
As an alternative to j08691 answer, this is the method I use to prevent white-space:
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
You don't introduce unnecessary comments, but auto-formatting in some IDEs might mess up your indentation a bit.
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.
i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.
So far i have:
<form action="#">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
http://jsfiddle.net/A8RaG/
So i need inputs on the same line and labels must be on the top of each input.
How do i do that?
Another solution is putting a div around each label/input combination and setting the css to float left
HTML
<form action="#">
<div>
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div>
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
CSS
form div{
float: left
}
jsFiddle
you can put a div around each label and block, and in the css put this div in inline-bloc
like :
<form action="#">
<div class = "css">
<label for="city">City</label>
<input type="text" id="city"/>
</div><div class="css">
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
and in the CSS:
.css{
display : inline-block;
}
You could also just use <br />. It will work for a form as well.
If you use Bootstrap you need to use the css of bootstrap !
Use class="form-horizontal" or class="form-inline"
You can try this with no css added :
<form action="#" class="form-horizontal">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
Simple no ?
I have a simple login form:
<form action="/users/login" class="form-inline" id="UserLoginForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST"/>
</div>
<input name="data[User][email]" class="input-small" placeholder="E-mail" maxlength="50" type="text" id="UserEmail"/>
<input name="data[User][password]" class="input-small" placeholder="Password" type="password" id="UserPassword"/>
<button class='btn' type='submit'>Login</button>
</form>
It is using bootstrap for styling. As for js jquery and AngularJS is loaded.
My issue is, when I display this form my submit button goes to the next line. If I inspect dom I see an <div class="actions">...</div> wrapper around my submit button. This does not happen if I omit type='submit' part from the form definition.
My question who is adding this wrapper and how can I avoid it.
If you see the examples of Twitter Bootstrap, I can see they are using two classes for form-inline example. Please check this. fro different types and form with buttons. Try applying well class along with it.
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>