Here's the HTML:
<div class="row">
<div class="right-block-title col-xs-12">Change Password</div>
</div>
<form id="change-password-form" class="form-horizontal">
<div class="form-group">
<label for="oldpass" class="control-label col-xs-4">Old Password</label>
<input id="oldpass" type="password" name="oldpass" class="col-xs-8"/>
</div>
<div class="form-group">
<label for="newpass" class="control-label col-xs-4">New Password</label>
<input id="newpass" type="password" name="newpass" class="col-xs-8"/>
</div>
<div class="form-group">
<label for="confirmnew" class="control-label col-xs-4">Confirm Password</label>
<input id="confirmnew" type="password" name="confirmnew" class="col-xs-8"/>
</div>
</form>
And here's the result:
https://jsfiddle.net/bsdca8zc/7/
If your screen is big enough, you'll see that the form gets sucked to the right. I want to have it all aligned to the left (like the title).
I tried pull-lefton the form-group elements, but it breaks the layout.
A negative margin-left on the form-group elements works, but it's not clean at all since it'll break every time we change the labels (and I also don't think it's good for responsive reasons).
The horizontal form is intended to show the labels inline for resolutions small and up. It shows the labels on top for xs. You would need to add the class form-control to your inputs for this behavior. It wasn't clear if that is what you were after or not.
If you are just wanting to align the labels here is an example. The col-sm-3 was replaced with col-xs-3 and text-right was added to right align the text.
<div class="form-group">
<label for="oldpass" class="control-label col-xs-3 text-right">Old Password</label>
<input id="oldpass" type="password" name="oldpass" class="col-sm-6"/>
<div class="indicator col-offset-3"></div>
</div>
https://jsfiddle.net/1heet5re/
Might need a better explanation of what you are trying to achieve to help more.
Related
I can't make out the convoluted logic behind where <label> elements are actually placed. I want a form with two rows. I want a label for each row, and then an input box after that. I would like the responsive behavior that when the viewport gets narrow, the label appears just above the input. When wide the label is left and the input right.
Works OK most of the time, but sometimes the <label> behaves so strange and I struggle trying to just get a simple two row form to work. Here is the sample:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="well">
<div class="form-group">
<label class="col-md-2 control-label">
Reminder
</label>
<div class="col-md-5 container">
<input type="text" class="form-control"/>
</div>
<div class="col-md-5 container">
Minutes before meeting
</div>
</div>
<!-- Form Control TYPE Begin -->
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" value="1"
class="form-control">
Circle Meeting
</label>
<label>
<input type="radio" value="2"
class="form-control">
Operational Meeting
</label>
</div>
</div>
</div>
</div>
<body>
I just spent 15 minutes making this selfstanding, so you should be able to put this in a file and load it directly into a browser.
The result is that instead of putting the label on the left, it is put in the row above (in that DIV) instead of in the DIV that the label is declared in. I have tried a number of manipulations, but the label seems to want to "jump" out of the DIV it is defined in, and into the DIV before it, and that messes up the layout of both DIV tags which are meant to be rows in a form.
See that the "Type" label does NOT appear on the left edge, but rather floating in the previous DIV and with the last element within that DIV.
Also the layout of the radio buttons and the labels on them are very inconvenient.
I would very much appreciate if someone can explain what is going on, and how to avoid this in the future. (Not just a solution to this case, but an explanation that will allow me to avoid future cases as well.)
This should fix it; Set the form and fields tags around your form; some class changes
<div class="well">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">
Reminder
</label>
<div class="col-md-5">
<input type="text" name="textinput" class="form-control"/>
</div>
<div class="col-md-5">
Minutes before meeting
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<label class="radio-inline" for="radios-1">
<input type="radio" name="radios" id="radios-1" value="1">
Circle Meeting
</label>
<label class="radio-inline" for="radios-2">
<input type="radio" name="radios" id="radios-2" value="2">
Operational Meeting
</label>
</div>
</div>
</fieldset>
</form>
</div>
I'm trying to make a longer label display inline with a textbox. I want the label to be on one line and display inline with the textbox. I'm using Bootstrap 3 and I can't seem to figure out how to make this happen. Here is some example code:
<div class="form-group">
<label for="d" class="control-label col-sm-2"> Two line label here:</label>
<div class="col-sm-10">
<input type="text" placeholder="" required="true" name="p" id="d" class="form-control" title="">
</div>
</div>
What classes should I be using to do this?
You can implement like this way..
<div class="input-group">
<div class="input-group-addon">Two line label here</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"/>
</div>
Is there any way to place the labels closer together to the controls using horizontal forms with the below code?
I've been experimenting with "pull-left", "pull-right", "nopadding" on different controls, but just can't seem to move them together more closely.
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<div class="row">
<div class="form-group nopadding">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group nopadding">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group nopadding">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
</div>
</div>
I think this is what you want.
FIDDLE
You can reduce the space between the labels and the inputs by adding a negative margin to the labels.
CSS:
label {
margin-right: -20px;
}
HTML:
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password"></input>
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
</div>
</div>
</form>
</div>
Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.
The width of the label is determined by the col-sm-2 classes attached to them. You could modify this to be col-sm-1 instead, but this could cause problems on smaller devices.
Though bootstrap recommends doing the horizontal forms similarly to the way you do them (see here), I don't feel like this approach allows for much flexibility in spacing.
Personally, I'd change the form to behave like this. Because you're declaring the widths yourself in the CSS, you can customize spacing as you wish. This may not collapse down well, but if you wish you can write further CSS to handle low-resolutions.
I want to narrow the size of input boxes in the horizontal form.
I used col-sm-4 to make text boxes narrower.
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 control-label">date</label>
<div class="col-sm-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
For big size it works, however when I resize the form and make it smaller, suddenly, the length of input box will stretch and become larger. So for big screens the input will have 230px and for smaller screen it will have 608px
The fiddel http://jsfiddle.net/3YWkd/
I want that the size of text box remain the same during page shrink.
You just need to add the mobile (xs) classes, like so:
<div class="col-sm-4 col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
Or just leave the col-xs-4, no need for the sm in this case.
Edit:
Re: your comment, you may use slightly different html, like soQ
<div class=" form-group">
<div class="col-xs-2">
<label class="control-label" for="fromDate">date</label>
</div>
<div class="col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
</div>
fiddle
This should do it:
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 col-xs-12 control-label">date</label>
<div class="col-sm-4 col-xs-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
Yes, you can do this by bootstrap column structure.
<div class="form-group">
<label for="name" class="col-lg-4">Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
Here is a Bootply Demo
The div is a block element, that means it will take as much width as it can and the input element is in it.
If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
Source: https://getbootstrap.com/docs/3.3/css/#forms-inline
You can take help directly from website they provided, well documented.
Here is a link to a Fiddle with Bootstrap css.
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>