I use bootstrap3 in my project.
I have this html elements:
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">from-</span>
<input id="input1" class="form-control input-sm" type="text/>
<!--How can I make here space-->
<span id="span2" class="input-group-addon">to-</span
<input class="form-control input-sm" type="text" />
</div>
</div>
</form>
Here is working PLUNKER.
As you can see I have spans and inputs inside form element.How can I make space between element with id =input1 and span with id = "span2"?
The problem was with how you grouped elements. Just wrap each of your span and input with a div that has class="input-group"
Here is the codepen
HTML
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">from-</span>
<input id="input1" class="form-control input-sm" type="text" />
</div>
<!--How can I make here space-->
<div class="input-group">
<span id="span2" class="input-group-addon">to-</span>
<input class="form-control input-sm" type="text" />
</div>
</div>
</form>
You could add another element in there, like:
<div id="spacer"></div>
with a style like
#spacer { width: 14px; display:table-cell;}
Related
I am creating a pay rate with two input boxes for number's,
The problem I am running into is the input boxes are being stretched way to much causing the cent's file to drop down onto the next line. The Maxlength with bootstrap is being ignored, So I can adjust the length of the input box.
<div class="form-group col-md-6">
<label for="pay_rate">Pay Rate</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" name="pay_rate" id="pay_rate" class="form-control" style="text-align: right;" placeholder="0" maxlength="4" size="4">
<div class="input-group-append">
<span class="input-group-text">.</span>
</div>
<div class="input-group-append">
<input type="number" name="pay_rate" id="pay_rate" class="form-control" placeholder="00"maxlength="2" size="2">
</div>
</div>
</div>
What is the best option to do money input field that will show the $ and cents? But when loading into SQL, I cant have the $ be entered into the database.
Nice question... out of the box, it seems that having multiple input-group-append classes doesn't affect the last input boxes... so we gotta manage the width for it ourselves: We do this with the max-width property on it.
Working snippet below:
.myClass {
max-width: 32%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="form-group col-md-6">
<label for="pay_rate">Pay Rate</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" name="pay_rate" id="pay_rate" class="form-control" style="text-align: right;" placeholder="0" maxlength="4" size="4">
<div class="input-group-append">
<span class="input-group-text">.</span>
</div>
<div class="input-group-append myClass">
<input type="number" name="pay_rate" id="pay_rate" class="form-control" placeholder="99" maxlength="4" size="4">
</div>
</div>
</div>
I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash.
I want this all on the same line using bootstrap, but I cannot seem to get it to work correctly.
Here's my code:
<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>
Here's what it looks like now:
How about using an input group to style it on the same line?
Here's the final HTML to use:
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
Which will look like this:
Here's a Stack Snippet Demo:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
I'll leave it as an exercise to the reader to translate it into an asp:textbox element
#KyleMit's answer on Bootstrap 4 has changed a little
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
The problem is that .form-control class renders like a DIV element which according to the normal-flow-of-the-page renders on a new line.
One way of fixing issues like this is to use display:inline property. So, create a custom CSS class with display:inline and attach it to your component with a .form-control class. You have to have a width for your component as well.
There are other ways of handling this issue (like arranging your form-control components inside any of the .col classes), but the easiest way is to just make your .form-control an inline element (the way a span would render)
For Bootstrap 4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<div class="input-group-prepend">
<span class="input-group-text" id="">-</span>
</div>
<input type="text" class="form-control" placeholder="End"/>
</div>
Bootstrap 3.3.7:
Use form-inline.
It only works on screen resolutions greater than 768px though. To test the snippet below make sure to click the "Expand snippet" link to get a wider viewing area.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>
Reference: https://getbootstrap.com/docs/3.3/css/#forms-inline
did you check boostrap website? search for "forms"
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
#KyleMit answer is one way to solve this, however we may chose to avoid the undivided input fields acheived by input-group class. A better way to do this is by using form-group and row classes on a parent div and use input elements with grid-system classes provided by bootstrap.
<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>
Just put two inputs inside a div with class form-group and set display flex on the div style
<form method="post">
<div class="form-group" style="display: flex;"><input type="text" class="form-control" name="nome" placeholder="Nome e sobrenome" style="margin-right: 4px;" /><input type="text" class="form-control" style="margin-left: 4px;" name="cpf" placeholder="CPF" /></div>
<div class="form-group" style="display: flex;"><input type="email" class="form-control" name="email" placeholder="Email" style="margin-right: 4px;" /><input type="tel" class="form-control" style="margin-left: 4px;" name="telephone" placeholder="Telefone" /></div>
<div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
<div class="form-group"><input type="password" class="form-control" name="password-repeat" placeholder="Password (repeat)" /></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" />I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a class="already" href="#">You already have an account? Login here.</a></form>
I want to align TextBox which will be used as Searchbox and button.
Problem is when I use inline form class on div the textbox is loosing its width.
<div class="col-lg-6">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<input type="button" value="Search" class="form-control btn-lg"/>
</div>
</div>
</div>
what I'm missing here..
here is a good solution for you:
Screenshot:
Code:
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E.g. Manchester" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
Result:
http://jsfiddle.net/j9EdZ/
You might be best using the col-md-* values here, e.g.:
<div class='col-lg-6'>
<form class='form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-10'>
<input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
</div>
<div class='col-md-2'>
<input type='button' class='form-control btn btn-block' value='Search'>
</div>
</div>
</div>
</form>
</div>
Text-box is not loosing its width you can check here.
CODE : http://jsfiddle.net/Jaysinh/awYm3/
As per the Bootstrap documentation of Form you have to set the width of the element. Default is 100 % wide.
Requires custom widths
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Here, check this out.
Demo
HTML
<div class="col-lg-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
</div>
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
<input type="button" value="Search" class=" btn btn-lg btn-default" />
</div>
<div class="form-group "></div>
</div>
</form>
</div>
I have this form with some inputs:
I would like to make the space between the input and the + and = symbols to be smaller. This is my code:
<div class="form-group">
<div class="col-lg-10 grupo">
<div class="col-lg-2 grupo">
<input id="num1" class="sum form-control input-sm" type="text" name="num1" value=" {$unique_id}" readonly="readonly" /> </div>
<div class="col-lg-1 grupo">
<label class="" >+</label> </div>
<div class="col-lg-2 grupo">
<input id="num2" class="sum form-control input-sm" type="text" name="num2" value=" {$unique_id2}" readonly="readonly" /></div>
<div class="col-lg-1 grupo">
<label class="" >=</label> </div>
<div class="col-lg-4 grupo">
<input id="captcha" class="captcha form-control input-sm" type="text" name="captcha" style="width:20%" maxlength="2" />
</div>
</div>
</div>
If i leave the input and label in the same col
There are a couple different ways to do this. Here is a simple, easy way to get it done as well as maintain responsive qualities:
http://jsfiddle.net/hHWeG/
.form-group span {
margin-left: 0.75em;
}
<form class="form-inline" role="form">
<div class="form-group">
<input id="num1" class="sum col-xs-10 input-sm" type="text" name="num1" value=" {$unique_id}" readonly="readonly" /> <span>+</span>
</div>
<div class="form-group">
<input id="num2" class="sum col-xs-10 input-sm" type="text" name="num2" value=" {$unique_id2}" readonly="readonly" /> <span>=</span>
</div>
<div class="form-group">
<input id="input" class="col-xs-10 input-sm" type="text" name="" />
</div>
</form>
The labels are inside divs with the col-lg-1 class so they'll always be a full column's width. Consider moving them into the same container as the inputs and styling from there.
I would like to control the size of my input elements using the class .col-lg-* outlined here on the bootstrap website. However, putting the <span> element inside of a div completely messes it up:
HTML with div:
<div class="input-group input-group-lg">
<label for="" class="control-label">Paycheck</label>
<div class="col-lg-10">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
How can I set the width of the input elements so that they are all the same?
I want the left margin of each input element to be flush like so:
This is what it looks like now:
This is my current HTML:
<div class="col-md-6">
<div class="content">
<h2>Income</h2>
<form class="form-income form-horizontal" role="form">
<div class="input-group input-group-lg">
<label for="" class="control-label">Paycheck</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<div class="input-group input-group-lg">
<label for="" class="control-label">Investments</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<div class="input-group input-group-lg">
<label for="" class="control-label">Other</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
</form>
</div>
LIVE EXAMPLE: http://jsfiddle.net/jfXUr/
As per my comment above, try grouping the label and .input-group together with a .form-group container.
<div class="form-group">
<label for="" class="control-label">Paycheck</label>
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
Demo here - http://jsfiddle.net/jfXUr/1/