I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</div>
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>
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.
What is the correct way in bootstrap to have proper alignment of inputs and labels across grids?
I would like to have the labels to be placed exactly the same as the first col.
See my plunk:
http://plnkr.co/edit/jaMAp38Rr1g7BLW3R5AI
<div class="row">
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;">
<label>OK</label>
</div>
</form>
</div>
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<form class="form-inline" role="form">
<div class="form-group">
<label>NOK</label>how to align it to the same as text 'OK'?
</div>
</form>
</div>
</div>
Use .form-control-static
Plunkr: http://plnkr.co/edit/0uVL2IIglzV0mrhqZdla?p=preview
HTML:
<div class="row">
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<form class="form-inline">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"/>
<label for="exampleInputEmail1">OK</label>
</form>
</div>
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<p class="form-control-static"><b>NOK</b></p>
</div>
</div>
Since bootstrap 4, this changed to
.form-control-static
CHANGED TO:
.form-control-plaintext
https://getbootstrap.com/docs/4.0/migration/#forms-1
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>
I have some bootstrap 3.0 based markup that produces an inline form like this:
The code for this is:
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<input type="text" placeholder="Github username" class="form-control" id="gh_user">
</div>
<div class="form-group">
<div class="col-lg-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey">
</div>
</div>
<button type="submit" class="btn btn-success"> Save </button>
</form>
I am trying to increase the width of the second box (API Key) to be twice what it is now, but no matter what I change the width of the div holding the second input is changing the width. Can someone show me how this done?
when I manually set the width of the second INPUT, I get this:
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey" />
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
DEMO
PS : close input tags as <input class="" />
Final edit here, I guess external bootstrap 3.1.1 was not getting included thus you got the result in 3 different lines, take a look at this
Final Demo
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
</div>
You should be able to target your ID within your css and set your desired width like so:
#gh_apikey{width:400px;}