I have used row and now using form-group CSS.
I am confused between these 2, which one should I prefer if I want to build form controls. Seems like both do same job.
I usually follow this pattern:
<div class="form-group">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
Note the col-md-6 and col-md-5 are examples and you can use any col-md-x class with unlimited number. just sum MUST be 12.
The direct answer to your question is in the documentation:
".form-row" is a variation of our standard grid class ".row" which overrides the
default column gutters for tighter and more compact layouts
See here: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
This is for Bootstrap.
form-group per set of controls on a form. If your row has multiple cols, and each col has a label and an input text, put a form-group around each label and input control, such as:
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Client Name: </label>
<input type="text" name="clientName" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Client Email: </label>
<input type="text" name="clientEmail />
</div>
</div>
</div>
... etc.
Related
I am fairly new to Bootstrap and I'm trying to make a simple form, all elements of which are in a single line on the screen. My html code for the form looks something like this:
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label>Search by:</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>Something:</label>
<input class="form-control" type="text">
</div>
</div>
</fieldset>
</form>
By default, the labels for my input fields appear about the input fields. I want them to be on the left side of the input fields. I've googled and checked on here how to implement this, but none of the solutions I found have worked (I tried adding classes to my form and changing their CSS, and tried using bootstrap's form-inline functionality).
Does anyone know how I could make the form look how I want it to look?
You will want to make two modifications to each form group in order to utilize the bootstrap grid system.
not sure which version of BS you are using but for grid it is the same concept: https://v4-alpha.getbootstrap.com/layout/grid/
You will want to use bootstrap grid system to define that the label and input on are the same line. Keep in mind that there are 12 columns in 1 row so items you want to be on the same line must add up to 12.
Add the following classes to your label: "col-lg-2 col-md-2 col-sm-2 control-label"
Wrap your input in a div and add the following classes: "col-lg-10 col-md-10 col-sm-10"
You will notice that between these two elements, the columns add up to 12 so in the bootstrap grid system, they will be on the same line.
(I also wrapped this in a container just for a more tidy display on this post)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</div>
I suppose it's wrong to nest a col-md-x immediately inside a col-md-x in Bootstrap 3. Am I right?
I have following at the moment:
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<input class="col-md-4" value="something" />
<div class="col-md-8">Something here</div>
</div>
In this case, the input border starts at the very beginning of the row. It doesn't have any padding on the outside of it.
I would like the input to show 15px away from the row border. The way I know of how to achieve this is to put this input inside a col-md-x. However, could this cause any issues?
From the bootstrap docs:
To nest your content with the default grid, add a new .row and set of
.col-sm-* columns within an existing .col-sm-* column.
So as long as you are nesting within child rows, you are gonna be fine. Another option would be custom css rules and ids for your nested structure to achieve the desired padding or margin.
UPDATE
To refer to your comment, since this is about validation states: let me add that bootstrap already offers great validation-highlighting. See this quick sample. The bootstrap docs on forms offer great documentation on this topic. As for the padding: I like to put most of my "not-inline" forms into a .well, which shows the user, where action is required and allows a consistent styling of forms...
var resetSec = function(){
$('#sth-form-section').removeClass('has-error');
$('#sth-form-section').removeClass('has-warning');
$('#sth-form-section').removeClass('has-success');
$('#helpBlock-sth').addClass('sr-only');
$('#helpBlock-sth').html('');
};
$('#invalid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-error');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Oh snap! Better think about this one more time!');
});
$('#valid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-success');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Well done! I think your input was the best so far!');
});
$('#reset').click(function(){
resetSec();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<form class="form-horizontal" role="form">
<div id="sth-form-section" class="form-group">
<label for="something" class="col-lg-2 control-label">Something:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="something" placeholder="Something here">
<span id="helpBlock-sth" class="help-block sr-only"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<button class="btn btn-primary" id="reset">Reset</button>
<button class="btn btn-danger" id="invalid">Invalid</button>
<button class="btn btn-success" id="valid">Valid</button>
Ah, just write the markup a little differently, like so:
<div class="row">
<div class="col-md-4">
<input class="form-control" value="something" />
</div>
<div class="col-md-8">
<p class="form-control-static">Something here</p>
</div>
</div>
The problem was putting the col-md-4 class on the input.
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 "col-md-12" divs on forms that appear to "cover" preceding inputs such that they are not clickable.
I have created a bootply with Bootstrap 3.0.0 to illustrate the issue. unclickable inputs
If I make the same bootply with bootstrap 3.0.3 then the input fields are now accessible clickable inputs
What I want to know is whether this is a bootstrap bug that has been fixed or whether my layout is breahing some rule or other?
you need to put your cols into a div with the row class
<form>
<div class="row"> // HERE
<div class="col-md-6">
<label class="control-label col-md-4">Home Phone:</label>
<div class="col-md-8">
<input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-md-4">Work Phone:</label>
<div class="col-md-8">
<input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
</div>
</div>
</div>
<div class="row"> // AND HERE
<div class="col-md-12">
<label class="control-label">Notes:</label>
<textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
</div>
</div>
</form>
If you use medium size columns col-md- you can only have total 12 column units per each <div class=row>.
So, don't put more than total 12 units of col-md instead one row.
I assume this is limitation of doing layouts with columsn, floating divs and web page rendering legacy.
I am looking to have the following html render a select box, then a label, then another select box all in one row while using twitter bootstrap 2.0 What css could I add to bootstrap to accomplish this?
<div class="row">
<select class="span4"></select>
<label class="span4">UCA</label>
<select class="span4"></select>
</div>
I ultimately decided on this
<div class="row-fluid form-inline">
<select class="span4"></select>
<div class="span4 pagination-centered">#displayTag</div>
<select class="span4"></select>
</div>
Try taking a look at using the pull-left or pull-right classes.
<div class="row">
<select class="span4 pull-left"></select>
<label class="span4 pull-left">UCA</label>
<select class="span4 pull-left"></select>
</div>