This is a cosmetic question, but I've got a form for sending out messages to predefined recipients and/or to custom recipients. But if you run the example you'll notice a small vertical alignment problem with the checkbox and the textbox for the last option (Ideally the checkbox would vertically aligned to the center of the textbox). I could manually override the top margin of the checkbox with an inline style of 10px, but I'm hoping there is an option that doesn't rely on an assumption of textbox size? I've tried the input-group or form-inline for just the last option, but none seem to be quite right and tend to make it worse.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Recipient Types</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />Send to Sales Department
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Send to HR Department
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
</form>
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>
I will like to put an image beside and input field using bootstrap. i want my output to be like :`
but with the below code i get
<div class="form-group row">
<label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
<div class="col-sm-10">
<span class="glyphicon glyphicon-phone"></span>
<input type="title" class="form-control" id="inputTitle" >
</div>
</div>
The form-control class will make your input 100% wide, meaning it will flow onto the next line. Additionally, it will make it display as a block element.
If I were you, I would look at using input groups instead, this is a nice tidy way of achieving the same effect:
Also, you have given your text input a type of title which is not valid. It's likely just a text input.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
I think this should do it
<div class="form-group">
<label class="control-label">Title</label>
<div class="input-group"><span class="input-group-addon"></span>
<input type="text" class="form-control">
</div>
</div>
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'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>