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')
Related
I'm making a form and I want the left half of the page to fill up the section. I have tried col-lg-4, changing the CSS width to 100%, nothing is changing the actual input field. I have searched Stack Overflow, but I couldn't find anything that worked. The first picture is what I have, and the second picture is what I was trying to recreate.
<section class="col-md-6">
<form class="form-group row">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail" placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</form>
</section>
set css display property to inline-block and give width 100%
.form-control{
display:inline-block;
width:100%
}
ok first of all you cannot have two elements with the same id, because only the last element will get to have that id and the first one won't
to answer your question try to this in css
.form-group, .form-control {width : 100%;}
I'd rather though you'd give an id to your form and then call these classes as its children, like -#form_id .form-group {...
use bootstrap div as mentioned below and try
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail"
placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</div>
<div class="col-sm-6">
Maps Section Comes Here!
</div>
</div>
</div>
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 want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
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
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>