How to align button to text box?
<form accept-charset="UTF-8" action="/action" method="get">
<div class="form-group">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<label for="from_date">From date</label>
<input class="form-control" id="from_date" name="from_date" type="text">
<p class="help-block">* Dates are inclusive</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<label for="to_date">To date</label>
<input class="form-control" id="to_date" name="to_date" type="text">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="btn btn-primary" name="commit" type="submit" value="Go">
</div>
</div>
</div>
</form>
Adding a padding to your last div is one solution.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 toppadding">
<input class="btn btn-primary" name="commit" type="submit" value="Go">
</div>
in css class add
.toppadding
{
padding-top:23px;
}
Check this Demo
Labels are what's throwing it off, you can use the solution above or get rid of labels altogether by using placeholders:
<input class="form-control" name="to_date" type="text" placeholder="To Date">
http://jsfiddle.net/6y88u1ts/
Related
I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group">
<label for="input3">Input 3
<input name="input3" type="checkbox" id="input3">
</label>
</div>
<div class="form-group">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<button class="btn btn-default">Add</button>
</form>
</div>
If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form
Thanks
Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:
<div class="container">
<form class="form-inline">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
<label for="input3">Input 3
</label>
<input name="input3" type="checkbox" id="input3">
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<div class="col-xs-12 col-lg-1">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW
You can wrap those inputs with div and display:inline-block style to make them stay together.
I have a problem with <div>, as you can see :
firefox display:
chrome display:
html structure :
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="from_area" class="form-control input-lg typeahead typeahead-area-tariff" id="from_area" placeholder="Origin" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<input type="text" name="to_area" class="form-control input-lg typeahead typeahead-area-tariff" id="to_area" placeholder="Destination" />
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="weight" class="form-control input-lg" id="weight" placeholder="Weight" />
<span class="input-group-addon">Kg</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="length" class="form-control input-lg" id="length" placeholder="Length" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="width" class="form-control input-lg" id="width" placeholder="Width" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="number" name="height" class="form-control input-lg" id="height" placeholder="Height" />
<span class="input-group-addon">Cm</span>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-sm-offset-4 text-center">
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="7"><span class="fi flaticon-search"></span> Search </button>
</div>
</div>
I am using <div class="col-sm-4"> but when I see it on firefox, input text "Width" breaks to a new line. Please help :(
[SOLVED] Added <div class="clearfix"></div> after the third input text.
Reference
Solved: JSfiddle
here is what I wanted, sample:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
</form>
.css:
.form-inline .form-group {
margin-left: 0;
margin-right: 0;
}
END
UPDATE:
I see where my problem is but i have form-horizontal that I want and if i change it to form-inline everything else is messed up please have a look at the updated jsfiddle
How do I make it inline in one row without spacing as shown in the screen shot:
<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
<div class="form-group col-md-12">
<label class="col-sm-3 control-label">Location</label>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
as you can see spacing between the input:
JSFiddle
Use form-inline instead of form-horizontal:
<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
<div class="form-group">
<label class="control-label">Location</label>
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
bootply
Simple calculation: col-sm-3 * 4 + col-sm-2 == col-sm-14 Which is not good. You should make sure that the total will not exceed 12 cols for each row.
Suggestion - change the first col-sm-3 to col-sm-1
In Bootstrap, if I have an input box with label and button in the same row, how do I get the button to align? I don't want to append it to the input box using input-append - any ideas?
<div class="row">
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
From:</label>
<input type="text" class="form-control input-sm" id="txtSchedFromDate" />
</div>
<div class="form-group col-sm-3">
<label for="txtSchedToDate">
To:</label>
<input type="text" class="form-control input-sm" id="txtSchedToDate" />
</div>
<div class="form-group col-sm-3">
<button type="button" id="btnResetEngineers" class="btn btn-default">
Reset Engineers</button>
</div>
</div>
JSFiddle
Many thanks
These are the changes I have made
Just include form-control in the button class and an empty label for the button's div
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
</label>
<button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>
Here's a corrected fiddle
https://jsfiddle.net/Indu9594/rcwyso3x/
Labels are not in aligned with the fields.I want to make sure that labels be wrapped elegantly if exceeds the column width. Here is complete jsfiddle
HTML
<div class="row row-padded">
<strong>Question: </strong><p>Are you 18 years old?</p>
<strong>Answer:</strong>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Yes</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios1" id="optionsRadios2" value="option1">No</label>
</div>
<div class="row">
<div class="col-md-8 childFields">
<p class="">Give full details here: </p>
<div class="row">
<div class="col-md-6 colChildFields">
<label>Nature of Condition</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Dates and Duration</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name Of Doctor</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name of Hospital</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Address of Hospital</label>
<input type="text" name="city"/>
</div>
</div>
</div>
</div>
</div>
I'm not sure I understood you right, but if that's what you're looking for, you should just add this to the CSS:
.col-md-6 label {
width: 150px;
}
If you want to do an horizontal form, you'll have to use a container div with class form-group and add a class control-label to the label, form-control to the input, with a structure like this :
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Replace (in classes) -lg- by -xs- and it will be responsive and self managed if the label is longer.
See example with my jsFiddle