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>
Related
I have a form group with both a label and input
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
However the label displays above the input field, i need it at its side. I have bootstrap 4.0 installed.
I've tried with class="col-sm-2 col-form-label" and does not work either.
Any suggestions?
The col-sm-2 shouldn't be nested directly in col-md-12. Use the grid like this...
https://www.codeply.com/go/Gdt1BZs9Hg
<form class="col-12">
<div class="form-row">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</form>
Notice that form-row must used to contain the col-. The col-sm-10 controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
Also, note the correct use of the grid row > columns from the Bootstrap docs...
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
You can achieve it by using class form-inline
<div class="form-inline">
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</div>
The suggestions in other posts didn't work in Bootstrap 5. So I tested it by updating one of the demos in the Bootstrap 5 documentation and it worked. With this demo application, <label>, <input> and <button> elements can be defined in a single line:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form role="form">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">Article Title</span>
<input type="text" class="form-control" placeholder="Please enter the new article name..." aria-label="Username" aria-describedby="addon-wrapping">
<button class="btn btn-primary" type="submit" id="article-update-button">Update</button>
</div>
</form>
The form screenshot is available below: For more information, visit the Bootstrap 5 Input Group page.
See Bootstrap 4 documentation about Forms and use form-inline
<div class="col-md-12 form-group form-inline">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
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>
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.
I have a horizontal form in bootstrap and I am trying to arrange a radio button with two text fields like so (sorry I can't embed the image):
However, I can't see to replicate this. I've tried the following (Jade markup):
.col-sm-4
.form-group
label.control-label(for='time') Time Range
.form-inline
.form-group
input(type='radio', id="from", name='time', value='from', data-toggle='radio')
label(for="from") From
.form-group
input(type='text', name='first')
.form-group
input(type='text', name='last')
Which results in everything being on one line, but the "From" is completely covered up and the two text boxes are back to back with no space. Is this a simple CSS fix, or am I mis-understanding form layouts in Bootstrap 3? Any feedback would be much appreciated.
EDIT: The rendered html is:
<div class="form-group">
<label for="time" class="control-label">Time Range</label>
<div class="form-inline">
<div class="form-group">
<input type="radio" id="from" name="time" value="from" data-toggle="radio">
<label for="from">From</label>
</div>
<div class="form-group">
<input type="text" name="first">
</div>
<div class="form-group">
<input type="text" name="last">
</div>
</div>
</div>
Here's how you want it:
<div class="form-inline">
<label for="time" class="control-label">Time Range</label>
<div class="form-group">
<input type="radio" id="from" name="time" value="from" data-toggle="radio">
<label class="control-label" for="from">From</label>
</div>
<div class="form-group">
<input class="form-control" type="text" name="first">
</div>
<div class="form-group">
<label class="control-label">To</label>
<input class="form-control" type="text" name="last">
</div>
</div>
See this demo
I'm not sure how to translate that into Jade markup--I'll leave that to you :)
EDITED to add: This is what an online converter spit out:
.form-inline
label.control-label(for='time') Time Range
.form-group
input#from(type='radio', name='time', value='from', data-toggle='radio')
label.control-label(for='from') From
.form-group
input.form-control(type='text', name='first')
.form-group
label.control-label To
input.form-control(type='text', name='last')
I have following HTML, but I can't get two inputs to be on same line as all buttons.
<div class="well">
<div class="input-group">
<input class="form-control" placeholder="Page path">
<input class="form-control" placeholder="Name">
<div class="input-group-btn">
View
Edit
Delete</div>
</div>
</div>
http://www.bootply.com/Iu7Ic99jm6
Bootstrap makes the width of those input elements 100%. You will need to overwrite that value. Something like this:
.input-group .form-control {
width:45%;
margin-right:5%;
}
See my bootply fork here:
http://www.bootply.com/ApJNHnX5Lv
Place the entire content in a .form-inline <form> tag, and place the input and button sections in .form-group <div>'s :
<div class="well">
<form class="form-inline">
<div class="form-group">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name">
</div>
<div class="form-group">
View
Edit
Delete
</div>
</form>
</div>
see forked bootply -> http://www.bootply.com/xSxTb0xzqh
you could use col divs to force the inputs to be in certain places. in combo with form-inline / form-group like so
Try using class form-inline
<div class="well">
<div class="form-inline">
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name">
View
Edit
Delete
</div>
</div>
</div>
Bootply